THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline


Bonjour,

J'ai un problème au niveau de la gestion de mes images produits. J'aimerais que ceux-ci s'affichent comme présentés sur cette page http://www.blnprdkt.com/?fond=page1.html

le code HTML étant le suivant

<ul>
                   
                        <li class="imageWrapper">
                            <img src="template/img/1.jpg" alt="" />
                                <a href="#" class="cornerLink">
                            <p>BPT001 - 39 euros</p>
                            </a>
                        </li>
</ul>

Je n'arrive malheureusement pas à intégrer celui-ci dans les boucles thelia, dont voici l'exemple http://www.blnprdkt.com/?fond=rubrique&id_rubrique=2

       

<ul>
                    <THELIA_PROD type="PRODUIT" rubrique="#RUBRIQUE_ID" classement="manuel">
                        <li class="imageWrapper">
                       
                       
                       
                            <T_IMAGE>
                            <THELIA_IMAGE type="IMAGE" num="1" produit="#ID" hauteur="221" largeur="170">
                        <img src="#IMAGE" alt="#PRODTITRE" title="#PRODTITRE"/>
                        </THELIA_IMAGE>

                        </T_IMAGE>
                        <img src="./template/_gfx/no-image.png" alt="Pas d'image disponible" />
                        <//T_IMAGE>
                       
                            <a href="#URL" class="cornerlink" >   
                            <p>#TITRE</p>
                            </a>
                       
                        </li>
                    </THELIA_PROD>   
        </ul>

Et voici le code CSS qui gère les effets

.imageWrapper {
    position: relative;
    width: 230px;
    height: 307px;
    margin:0 6px 0 0;
}

.imageWrapper_r {
    position: relative;
    width: 230px;
    height: 307px;
}


.imageWrapper img,.imageWrapper_r img {
    display: block;
        width: 230px;
    height: 307px;
   
}
.imageWrapper .cornerLink, .imageWrapper_r .cornerLink {
    opacity: 0;
    position: absolute;
     width: 230px;
    height: 307px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 2px 0px;
    color: #ffffff;
    font-weight:bold;
    background: #000000;
    text-decoration: none;
    text-align: center;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;

}
.imageWrapper:hover .cornerLink , .imageWrapper_r:hover .cornerLink {
    opacity: 0.6;
     height: 307px;
}

.order_bottom{
    text-align: bottom;
}

Quelqu'un pourrait-il m’éclairer ?       

Merci d'avance

Last edited by mlayerm (01-05-2013 15:10:17)

Offline


Salut!

cornerLink

Last edited by Elyos (01-05-2013 15:54:26)


Aide les autres, ils t'aideront en retour.

Offline


Pfff, là j'ai un peu honte. Mais bon c'est ça aussi de bouffer des heures de codes, et finir par se prendre la tête avec des détails pourtant simples à résoudre ;-)

Enfin mille mercis à toi Elyos.

Last edited by mlayerm (02-05-2013 07:43:13)

Offline


Je t'avouerai qu'au début je comprenais pas le bug jusqu'à ce que je décide de vérifier les css des éléments avec Web Developer big_smile

De rien en tout cas wink


Aide les autres, ils t'aideront en retour.