+- 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)
[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"Vous trouverez jointes à ce message trois petites captures d'écran !
![[Image: 88x31.png]](http://i.creativecommons.org/l/by-nc-sa/3.0/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...
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].Je clique dessus et ca ne fait rien.
P.S. : Le tutoriel date quand même de plus d'un an, il est possible que le script ne soit plus à jour...
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
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...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.
Si en plus il pouvait l'intégrer directement au message avec les balises... le rêve
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.Ah ouai pas mal
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. - 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}&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>
<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 dImages</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>
{$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
- Annulez les modifications que vous avez apportées.
(Cliquez sur Options à droite du nom du template dans la liste, puis Revenir à l'original.) - 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).
- 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 !
