[Tutoriel] Intégrer un script d'hébergement d'images.

[Saphir]

Bonjour à tous.

Dans ce tutoriel, nous allons intégrer un script d'hébergement d'images aux pages de création de messages de votre forum.
Ceci permettra à vos membres d'héberger leurs images sur un site distant (en l'occurrence imageshack.us) sans avoir à ouvrir eux-même le site.

Ce tutoriel est très simple. Il y aura quatre templates à modifier de la même façon : newthread (pour que le formulaire s'affiche à la création d'une nouvelle discussion), newreply (pour que le script s'affiche lorsqu'un membre répond à une discussion), private_send (pour afficher la boîte à la création de messages privés) et editpost (pour faire de même lors de l'édition d'un message).

Cherchez :

Code PHP :

<textarea id="message" name="message" rows="20" cols="70" tabindex="2" >{$message}</textarea> 


REMPLACEZ PAR :

Code PHP :

<table>
    <tr>
        <td>
            <textarea name="message" id="message" rows="20" cols="70" tabindex="4">{$message}</textarea>
        </td>
        <td style="vertical-align: top;">
            <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
                <tr>
                    <td class="thead" colspan="2"><strong>Hébergement d'Images</strong></td>
                </tr>
                <tr>
                    <td class="trow1" valign="top" width="200">
                        <script src="http://imageshack.us/scripts/syndicate/widget.js" type="text/javascript" charset="utf-8"></script>
                        <script type="text/javascript">new ImageShackSyndicateWidget({width: "300",height: "110",theme: {shell: {buttonColor: "#3cbbfa",color: "#111111",backgroundColor: "#cccccc",backgroundImage: "",text: ""}}}).render();</script>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table> 


Répétez cette opération pour chacun des quatre templates.
Pour le template "editpost", la ligne est légèrement différente (un 3 au lieu d'un 4). Vous pouvez chercher :

Code PHP :

<textarea name="message" id="message" rows="20" cols="70" tabindex="3">{$message}</textarea> 


Et remplacer par :

Code PHP :

<table>
    <tr>
        <td>
            <textarea name="message" id="message" rows="20" cols="70" tabindex="3">{$message}</textarea>
        </td>
        <td style="vertical-align: top;">
            <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
                <tr>
                    <td class="thead" colspan="2"><strong>Hébergement d'Images</strong></td>
                </tr>
                <tr>
                    <td class="trow1" valign="top" width="200">
                        <script src="http://imageshack.us/scripts/syndicate/widget.js" type="text/javascript" charset="utf-8"></script>
                        <script type="text/javascript">new ImageShackSyndicateWidget({width: "300",height: "110",theme: {shell: {buttonColor: "#3cbbfa",color: "#111111",backgroundColor: "#cccccc",backgroundImage: "",text: ""}}}).render();</script>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table> 


Enfin, vous pouvez également modifier le template showthread_quickreply en remplaçant :

Code PHP :

<textarea style="width: 100%; padding: 4px; margin: 0;" rows="8" cols="80" name="message" id="message" tabindex="1"></textarea> 


Par :

Code PHP :

<table>
    <tr>
        <td>
            <textarea style="padding: 4px; margin: 0;" rows="8" cols="80" name="message" id="message" tabindex="1"></textarea>
        </td>
        <td style="vertical-align: top;">
            <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
                <tr>
                    <td class="thead" colspan="2"><strong>Hébergement d'Images</strong></td>
                </tr>
                <tr>
                    <td class="trow1" valign="top" width="200">
                        <script src="http://imageshack.us/scripts/syndicate/widget.js" type="text/javascript" charset="utf-8"></script>
                        <script type="text/javascript">new ImageShackSyndicateWidget({width: "300",height: "110",theme: {shell: {buttonColor: "#3cbbfa",color: "#111111",backgroundColor: "#cccccc",backgroundImage: "",text: ""}}}).render();</script>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table> 


Si vous rencontrez des problèmes d'affichage sur de petits écrans, vous pouvez réduire la valeur X de

Code :

cols="X"

À l'intérieur des balises <textarea>.

Vous trouverez jointes à ce message trois petites captures d'écran !