1. IMPORTANT : Nouvelles mesures de sécurité - 2. Règles pour obtenir de l'aide dans les forums de support - 3. Restrictions des droits pour le groupe "Support suspendu"

Il est obligatoire de respecter les Règles de MyBB.fr : Version abrégée ou Version complète pour obtenir du support sur nos forums.

Les membres ayant un site/forum contrevenant aux règles de MyBB.support seront placés dans le groupe "Support suspendu" et ne bénéficieront plus du support du staff. Nous recommandons aux autres membres d'agir de même. Il ne s'agit pas d'un bannissement, le membre retrouvera son statut "normal" dès que sa situation sera conforme aux règles.

Nouveau : un Wiki en français : plus de détails.
Avant de soumettre votre problème, consultez-le, ainsi que la FAQ, sans oublier le moteur de recherche interne.


Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
[Tutoriel] Intégrer un script d'hébergement d'images.
Mots-clés » tutoriel, intégrer, hébergeur, image, script, hébergement, images
30-03-2012, 17:50, (Modification du message : 30-03-2012, 17:53 par Saphir.)
#1
Wink  [Tutoriel] Intégrer un script d'hébergement d'images.
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]


Pièces jointes Miniature(s)
           

Cordialement,
Saphir,
Modérateur MyBB.support.
Répondre
04-04-2012, 21:04,
#2
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
Fonctionne à merveille !
Répondre
06-04-2012, 19:33,
#3
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
Merci beaucoup, très utile !

[Image: image.png]
Répondre
12-04-2012, 6:08,
#4
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
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

forum en création
Répondre
12-04-2012, 10:57,
#5
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
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

Cordialement,
Saphir,
Modérateur MyBB.support.
Répondre
22-07-2013, 20:31,
#6
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
Fonctionnel chez moi, merci.
Répondre
23-07-2013, 17:07,
#7
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
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
Répondre
23-07-2013, 17:26, (Modification du message : 23-07-2013, 17:26 par Saphir.)
#8
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
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...

Cordialement,
Saphir,
Modérateur MyBB.support.
Répondre
23-07-2013, 18:00,
#9
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
(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
Répondre
23-07-2013, 19:06,
#10
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
Sur ce lien, cliquez sur "Continue to image links", puis copiez le champ "Forum Code".

Cordialement,
Saphir,
Modérateur MyBB.support.
Répondre
23-07-2013, 19:30,
#11
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
Hum, merci. Le lien original est donc http://img7.imageshack.us/img7/8641/c6kc.png
Il fallait le savoir...

Merci
Répondre
24-07-2013, 4:39,
#12
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
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
Répondre
24-07-2013, 10:50,
#13
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
(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.

Répondre
24-07-2013, 12:33,
#14
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
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^^
Répondre
26-07-2013, 9:40,
#15
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
(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
Répondre
15-08-2013, 23:53,
#16
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
Moi j'ai un sacré probleme pourtant j'ai vraiment tout bien fait meme refait plusieur fois :/ voir piece jointe


Pièces jointes Miniature(s)
   
Répondre
15-08-2013, 23:59,
#17
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
Pouvez-vous me donner le contenu de votre template newthread ?

Cordialement,
Saphir,
Modérateur MyBB.support.
Répondre
16-08-2013, 0:06,
#18
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
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>
Répondre
16-08-2013, 0:09,
#19
RE: [Tutoriel] Intégrer un script d'hébergement d'images.

  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.

Cordialement,
Saphir,
Modérateur MyBB.support.
Répondre
16-08-2013, 0:16,
#20
RE: [Tutoriel] Intégrer un script d'hébergement d'images.
Parfait ! Je vous remercie ! Smile
Répondre




Utilisateur(s) parcourant ce sujet :

Contact | MyBB.support | Retourner en haut | Retourner au contenu | Version bas-débit (Archivé) | Syndication RSS
 Utilitaire de traduction fourni par Regentronique