Mettre en forme les images à la une en une grande mosaïque (index.php) | Forum WordPress


Rechercher

— Forum Scope —




— Correspondances —





— Options du forum —





La longueur minimum du terme à rechercher est 3caractère - la longueur maximum est de 84 caractères

Mot de passe oublié ?
forum-theme
Mettre en forme les images à la une en une grande mosaïque (index.php)
Ajouter une réponse
vincentdddd
Membre
Membres
Messages du forum : 3
Membre depuis :
6 août 2015
Hors ligne
1
6 août 2015 - 18:04

Bonjour tout le monde,

Je suis en train de créer mon propre thème wordpress .

Je souhaite que la page d'accueil (index.php) soit une grande mosaïque d'images (images à la une) menant aux articles correspondants, un peu comme ça: http://40.media.tumblr.com/43cc9cfee09afee238b27deda5feadef/tumblr_mmdmzgZnsp1r6vtpno1_1280.png

J'ai réussi à créer toute la structure et l'arborescence du site mais je cale complètement sur la mosaïque.
Pour le moment, le contenu (les images) s'affiche en une colonne verticale car je ne sais pas comment appeler ces contenus dans mon CSS.

Mon problème est que je ne sais pas comment composer avec des objets qui ne sont pas nommés dans mon code (puisqu'il s'agit de la boucle). Auriez-vous des solutions, exemples, ou des tutos pour que je puisse mettre en forme ces images ?

Merci beaucoup !

Voici mon modeste code:

vincentdddd
Membre
Membres
Messages du forum : 3
Membre depuis :
6 août 2015
Hors ligne
2
6 août 2015 - 18:06

<div id="main">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(vignette); ?></a></h2>
</div>
</div>

Avatar
Robin
Membre
Membres
Messages du forum : 44
Membre depuis :
8 décembre 2018
Hors ligne
Sylviane
Membre
Membres
Messages du forum : 7
Membre depuis :
27 juillet 2014
Hors ligne
4
13 août 2015 - 11:55

Bonjour,

Ce style de galerie est obtenu par l'ajout d'une feuille  javascript : Masonry

Ensuite, il faut attribuer dans la boucle elle-même les classes spécifiques à Masonry et ajouter le script jQuery.

Par exemple :  

<div id="main" class="grid">
   <?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
       <div class="post grid-item" id="post-<?php the_ID(); ?>">
       <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(vignette); ?></a></h2>
       </div>
</div>

Démo et explications détaillées http://masonry.desandro.com  (voir notamment "HTML / CSS / Initialize jQuery)

Bon courage Wink.

vincentdddd
Membre
Membres
Messages du forum : 3
Membre depuis :
6 août 2015
Hors ligne
5
13 août 2015 - 15:44

C'est parfait, merci beaucoup Sylvain et Sthalea ! Masonry est exactement ce qu'il me faut. 🙂

Sylviane
Membre
Membres
Messages du forum : 7
Membre depuis :
27 juillet 2014
Hors ligne
6
13 août 2015 - 16:57

Super, contente si cela t'a aidé. 

Tiens-nous au courant par la suite (Difficultés de mise en oeuvre ou pas, Astuces, etc...) cela nous sera certainement utile.

A bientôt

Fuseau horaire du forum :Europe/Paris

Nb max. d'utilisateurs en ligne :574

Actuellement en ligne :
6 Invité(s)

Actuellement sur cette page :
1 Invité(s)

Auteurs les plus actifs :

Bruno: 52

Robin: 44

vKr_Onii: 41

bosschris: 39

Dan: 27

Nouveaux membres :

Lucinda

Carole_1

Sylvie_1

Julien_1

Jean-françois_1

Statistiques du forum :

Groupes :1

Forums :7

Topics :572

Posts :2383

 

Statistiques des membres :

Invités: 31

Membres : 9936

Modérateurs : 26

Admins: 2

Administrateurs :wpengine, Thibaud

Modérateurs :Gebhard, david, Catherine1, zapps, soborne, mojiezuo, Soufian, Jeff, redwhirl, sigridregnier, Jessica, Benjamin2, spleen13, Alain2, kaepaul, negativenetwork, Gaetan1, Samson, Benoit1, Ailpp84, Joel2, Catherine2, Fatalys, Therese, Guillaume3, Gayraud

En ligne

12 visiteurs, 10 membres

Messages récents