MyBB.support, le portail francophone de MyBB
[Tutoriel] Intégrer un script d'hébergement d'images. - Version imprimable

+- MyBB.support, le portail francophone de MyBB (https://mybb.support)
+-- Forum : MyBB.fr (https://mybb.support/forum-1.html)
+--- Forum : Tutoriels (https://mybb.support/forum-19.html)
+--- Sujet : [Tutoriel] Intégrer un script d'hébergement d'images. (/thread-5445.html)

Pages : 1 2 3


[Tutoriel] Intégrer un script d'hébergement d'images. - Saphir - 30-03-2012

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

[Image: 88x31.png]


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - micklie - 04-04-2012

Fonctionne à merveille !


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Geoo - 06-04-2012

Merci beaucoup, très utile !


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - L@Fouine - 12-04-2012

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


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Saphir - 12-04-2012

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... Wink



RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Steven - 22-07-2013

Fonctionnel chez moi, merci.


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Steven - 23-07-2013

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


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Saphir - 23-07-2013

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


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Steven - 23-07-2013

(23-07-2013, 17:26)Saphir a écrit :  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


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Saphir - 23-07-2013

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


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Steven - 23-07-2013

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

Merci


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Nitrome - 24-07-2013

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 Tongue


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Steven - 24-07-2013

(24-07-2013, 4:39)Nitrome a écrit :  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 Tongue
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.




RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Nitrome - 24-07-2013

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


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Steven - 26-07-2013

(24-07-2013, 12:33)Nitrome a écrit :  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



RE: [Tutoriel] Intégrer un script d'hébergement d'images. - aliweb88 - 15-08-2013

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


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Saphir - 15-08-2013

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


RE: [Tutoriel] Intégrer un script d'hébergement d'images. - aliweb88 - 16-08-2013

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>



RE: [Tutoriel] Intégrer un script d'hébergement d'images. - Saphir - 16-08-2013


  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.



RE: [Tutoriel] Intégrer un script d'hébergement d'images. - aliweb88 - 16-08-2013

Parfait ! Je vous remercie ! Smile


 Utilitaire de traduction fourni par Regentronique