[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 :

PHP Code:

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


REMPLACEZ PAR :

PHP Code:

<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 :

PHP Code:

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


Et remplacer par :

PHP Code:

<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 :

PHP Code:

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


Par :

PHP Code:

<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 !

[micklie]

Fonctionne à merveille !

[Geoo]

Merci beaucoup, très utile !

[L@Fouine]

Merci pour les infos mais les templates sont traduit en Français depuis la version 1.6.7 ex: Avant head templates Maintenant entête templates tu peu prexciser stp

[Saphir]

Non, c'est pas nouveau, ça fait longtemps qu'ils ont été traduits, mais je n'utilise pas la langue française sur mon forum de test...

[Steven]

Fonctionnel chez moi, merci.

[Steven]

Salut, j'ai un petit problème.
Quand j'upload il y a un problème de dimensions.
Ex: mon images 200x200 devient 125x90 ...
"Si vous rencontrez des problèmes d'affichage sur de petits écrans, vous pouvez réduire la valeur X de "
Ca m'étonnerait qu'il y est un rapport avec mon problème.

Merci

[Saphir]

Le lien que vous choisissez d'afficher est probablement une vignette. Cliquer dessus vous permet d'accéder à l'image en taille réelle. Pour ne pas passer par une vignette, copiez seulement le lien direct et placez le entre les balise [ img] et [ /img].

P.S. : Le tutoriel date quand même de plus d'un an, il est possible que le script ne soit plus à jour...

[Steven]

(23-07-2013, 17:26)Saphir Wrote:  Le lien que vous choisissez d'afficher est probablement une vignette. Cliquer dessus vous permet d'accéder à l'image en taille réelle. Pour ne pas passer par une vignette, copiez seulement le lien direct et placez le entre les balise [ img] et [ /img].

P.S. : Le tutoriel date quand même de plus d'un an, il est possible que le script ne soit plus à jour...

Je clique dessus et ca ne fait rien.
Voici le lien par exemple: http://imageshack.us/content_round.php?page=done&l=img7/8641/c6kc.png

[Saphir]

Sur ce lien, cliquez sur "Continue to image links", puis copiez le champ "Forum Code".

[Steven]

Hum, merci. Le lien original est donc http://img7.imageshack.us/img7/8641/c6kc.png
Il fallait le savoir...

Merci

[Nitrome]

Oui dommage qu'il ne donne pas du premier coup le lien direct...
Si en plus il pouvait l'intégrer directement au message avec les balises... le rêve

[Steven]

(24-07-2013, 4:39)Nitrome Wrote:  Oui dommage qu'il ne donne pas du premier coup le lien direct...
Si en plus il pouvait l'intégrer directement au message avec les balises... le rêve

Ce serait beaucoup plus simple, que MyBB est un script où lorsque tu cliques sur l'icone "Insérer une image", ça te demande soit le lien, soit de l'upload. Comme ca, l'image est hébergé sur ton propre serveur, et c'est plus rapide.

[Nitrome]

Après un solution c'est d'agrandir la taille des pièces jointes.
Comme ça tu upload l'image, tu fait "intégrer au message" et ça revient au même... ou presque^^

[Steven]

(24-07-2013, 12:33)Nitrome Wrote:  Après un solution c'est d'agrandir la taille des pièces jointes.
Comme ça tu upload l'image, tu fait "intégrer au message" et ça revient au même... ou presque^^

Ah ouai pas mal

[aliweb88]

Moi j'ai un sacré probleme pourtant j'ai vraiment tout bien fait meme refait plusieur fois :/ voir piece jointe

[Saphir]

Pouvez-vous me donner le contenu de votre template newthread ?

[aliweb88]

Code:

<html>
<head>
<title>{$lang->newthread_in}</title>
{$headerinclude}
<script type="text/javascript" src="jscripts/post.js?ver=1400"></script>
</head>
<body>
{$header}
{$preview}
{$thread_errors}
{$attacherror}
<form action="newthread.php?fid={$fid}&amp;processed=1" method="post" enctype="multipart/form-data" name="input">
<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="2"><strong>{$lang->post_new_thread}</strong></td>
</tr>
{$loginbox}
<tr>
<td class="trow2" width="20%"><strong>{$lang->thread_subject}</strong></td>
<td class="trow2">{$prefixselect}<input type="text" class="textbox" name="subject" size="40" maxlength="85" value="{$subject}" tabindex="1" /></td>
</tr>
{$posticons}
<tr>
<td class="trow2" valign="top"><strong>{$lang->your_message}</strong>{$smilieinserter}</td>
<td class="trow2">
<table>
&nbsp;&nbsp;&nbsp;&nbsp;<tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<textarea&nbsp;name="message"&nbsp;id="message"&nbsp;rows="20"&nbsp;cols="70"&nbsp;tabindex="4">{$message}</textarea>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td&nbsp;style="vertical-align:&nbsp;top;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<table&nbsp;border="0"&nbsp;cellspacing="{$theme['borderwidth']}"&nbsp;cellpadding="{$theme['tablespace']}"&nbsp;class="tborder">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td&nbsp;class="thead"&nbsp;colspan="2"><strong>Hébergement&nbsp;dImages</strong></td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<td&nbsp;class="trow1"&nbsp;valign="top"&nbsp;width="200">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;src="http://imageshack.us/scripts/syndicate/widget.js"&nbsp;type="text/javascript"&nbsp;charset="utf-8"></script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;type="text/javascript">new&nbsp;ImageShackSyndicateWidget({width:&nbsp;"300",height:&nbsp;"110",theme:&nbsp;{shell:&nbsp;{buttonColor:&nbsp;"#3cbbfa",color:&nbsp;"#111111",backgroundColor:&nbsp;"#cccccc",backgroundImage:&nbsp;"",text:&nbsp;""}}}).render();</script>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</tr>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</table>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
&nbsp;&nbsp;&nbsp;&nbsp;</tr>
</table>
{$codebuttons}
{$multiquote_external}
</td>
</tr>
<tr>
<td class="trow1" valign="top"><strong>{$lang->post_options}</strong></td>
<td class="trow1"><span class="smalltext">
{$option_signature}
{$disablesmilies}</span></td>
</tr>
{$modoptions}
{$subscriptionmethod}
{$pollbox}
{$captcha}
</table>
{$attachbox}
<br />
<div style="text-align:center"><input type="submit" class="button" name="submit" value="{$lang->post_thread}" tabindex="4" accesskey="s" />  <input type="submit" class="button" name="previewpost" value="{$lang->preview_post}" tabindex="5" />{$savedraftbutton}</div>
<input type="hidden" name="action" value="do_newthread" />
<input type="hidden" name="posthash" value="{$posthash}" />
<input type="hidden" name="attachmentaid" value="" />
<input type="hidden" name="attachmentact" value="" />
<input type="hidden" name="quoted_ids" value="{$quoted_ids}" />
<input type="hidden" name="tid" value="{$tid}" />
{$editdraftpid}
</form>
{$forumrules}
{$footer}
</body>
</html>

[Saphir]

1. Annulez les modifications que vous avez apportées.
   (Cliquez sur Options à droite du nom du template dans la liste, puis Revenir à l'original.)
2. Copiez le code fourni dans le tutoriel dans un éditeur de texte qui encode le contenu en UTF 8 sans BOM (par exemple, Notepad++ ou Hapedit).
3. Collez le code dans votre template.

[aliweb88]

Parfait ! Je vous remercie !