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

wp-infinity
ThemeForestElegantThemes

Merci de vous inscrire pour participer au forum
Invité

Rechercher

— Forum Scope —




— Correspondances —





— Options du forum —





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

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

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
sp_UserOfflineSmall Hors ligne
2
6 août 2015 - 18:06
sp_Permalink sp_Print

<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
Sylvain
Modérateur
Membres

Modérateurs
Messages du forum : 195
Membre depuis :
6 janvier 2014
sp_UserOfflineSmall Hors ligne
Sthalea
Membre
Membres
Messages du forum : 7
Membre depuis :
26 juillet 2014
sp_UserOfflineSmall Hors ligne
4
13 août 2015 - 11:55
sp_Permalink sp_Print

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
sp_UserOfflineSmall Hors ligne
5
13 août 2015 - 15:44
sp_Permalink sp_Print

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

Sthalea
Membre
Membres
Messages du forum : 7
Membre depuis :
26 juillet 2014
sp_UserOfflineSmall Hors ligne
6
13 août 2015 - 16:57
sp_Permalink sp_Print

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 :
8 Invité(s)

Actuellement sur cette page :
1 Invité(s)

Auteurs les plus actifs :

BrunoT: 52

vKr_Onii: 42

bosschris: 39

athox: 26

Martine677: 25

monchihuahua: 25

Dan: 24

regisbor33: 23

monblogestunroman: 23

Nouveaux membres :

Talisker25

maziecrocker

barbpaulk0349

Djiman

sherrillv03

latashaflagg556

jefferybustamant

niklasm62431705

kerry9554@aol.com

Statistiques du forum :

Groupes :3

Forums :9

Topics :702

Posts :2782

 

Statistiques des membres :

Invités: 23

Membres : 8654

Modérateurs : 27

Admins: 1

Administrateurs :Thibaud

Modérateurs :Sylvain, bruno, david, Catherine0614, zapps, soborne, Mojiezuo, Soufian Ait Tirite, Jeff, redwhirl, sigridregnier, Jess, Malles, spleen13, Alain2choeur, kaepaul, negativenetwork, Pictures4events, 100son, Ben 44, Ailpp84, joecab, SPITI, Fatalys, Therese, P-x3l, Gayraud Marina