Remplacer le champ description par un champ image

Voir le sujet précédent Voir le sujet suivant Aller en bas

fascicularia
avatar
Administrateur


fascicularia


Messagefascicularia

  • 16px
  • 24px
  • Zoom

Bonjour à tous,
Un petit tutoriel  qui vous permettra de modifier le champ description pour le tranformer en champ image. Vos membres pourront ainsi mettre une miniature devant les titres des sujets.
Ce champ n'accepte que les liens des images cad sous cette forme
Code:
http://i36.servimg.com/u/f36/11/93/85/24/sans_t32.jpg


En image
visuel de la modification:

visuel de la fenêtre de saisie


Visuel dans la liste des sujets



Prérequis :
Activer la description des sujets ( PA> Général> Messagerie et e-mail - Configuration> Afficher la description des sujets: Oui )

On commence
Template  posting_body

Rechercher
Code:


    <!-- BEGIN switch_description -->
    <tr>
    <td class="row1" width="22%"><span class="gen"><b>{L_DESCRIPTION}</b></span></td>
    <td class="row2" width="78%">
    <span class="gen">
    <input class="post" style="width:450px" type="text" name="description" value="{DESCRIPTION}" maxlength="{TOPIC_DESCRIPTION_MAXLENGTH}" onkeypress="if (event.keyCode==13){return false}" />
    </span>
    </td>
    </tr>
    <!-- END switch_description -->

et le remplacer par
Code:


    <!-- BEGIN switch_description -->
    <tr class="addtopimg">
    <td class="row1" width="22%"><span class="gen"><b>Mini hoto sur le thème</b></span></td>
    <td class="row2" width="78%">
    <span class="gen">
    <input class="post" style="width:450px" type="text" name="description" value="{DESCRIPTION}" maxlength="1000" onkeypress="if (event.keyCode==13){return false}" />
    </span><br /><span class="gen">Lien de l'image!</span>
    </td>
    </tr>
    <!-- END switch_description -->


template topics_list_box

Rechercher
Code:


    <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
    <div class="topictitle">
    {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
    <h2 class="topic-title">
    <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
    </h2>
    </div>
    <!-- BEGIN switch_description -->
    <span class="genmed">
    <br />
    {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
    </span>
    <!-- END switch_description -->
    <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
    <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
    </td>


et le remplacer par
Code:


    <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
    <table border="0" class="temtab"><tr>
    <td><!-- BEGIN switch_description --><img src={topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION} class="temico" alt="image devant les titres des sujets" /><!-- END switch_description --></td>
    <td><div class="topictitle">
    {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}
    <h2 class="topic-title">
    <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
    </h2>
    </div>
    <br /><span class="gensmall">{topics_list_box.row.TOPIC_TYPE}</span><br />
    <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
    <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span></td>
    </tr></table>
    </td>


Nota : n'oubliez pas d'enregistrer vos modifications .

La css


   
Code:
.temico {
    width: 90px;
    height: auto;
    border: 2px solid #fff;
    margin: 1px 2px 2px 1px;
    -moz-box-shadow: 2px 2px 0px rgba(83, 83, 83, 0.5);
    -webkit-box-shadow: 2px 2px 0px rgba(83, 83, 83, 0.5);
    box-shadow: 2px 2px 0px rgba(83, 83, 83, 0.5);
    }
   
    .temtab td {
    vertical-align: top;
    text-align: left;
    }

Pour modifier la taille de l'image c'est dans cette partie
Code:
.temico {  width: 90px; }


Dernière édition par fascicularia le Lun 15 Juil 2013 - 19:33, édité 4 fois
Teten85
avatar
Membre

Teten85


MessageTeten85

  • 16px
  • 24px
  • Zoom

Faut que j'essaye, merci super 
Milouze14
avatar
Fondateur


Milouze14


MessageMilouze14

  • 16px
  • 24px
  • Zoom

coucou  ,

merci pour le partage Stéphane tape la 



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums



Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum