çavalchalet?!

Grille Masonry dans un post

—

par

rfragniere
dans ,

Cet article est un regroupement à pour but de trouver la meilleure façon d’intégrer dans les posts le Masonry déjà importé qui est actif sur les pages d’archives

Le but c’est de réutiliser le masonrry que d’utiliser le masonry déjà importé qui est actif sur les pages d’archives

Custom html

c’est facile en le codant manuellement en html, en revanche cela présente quelques incovénicent

les « plus »

  • peu de css à écraser
  • permet un contrôle total, créer moult containers et d’y intégrer n’importe quel contenu.

les « moins »

  • Cela représente du travail, les liens des images doivent être importées manuellement
  • tout les liens sont à remplacer si l’adresse d’hebergement change ou si WordPress décide de perdre l’accès à votre médiathèque (c’est la raison de la maintenance actuelle de rfragniere.ch).
  • Cela représente du travail, les liens des images doivent être importées manuellement
  • tout les liens sont à remplacer si l’adresse d’hebergement change ou si WordPress décide de perdre l’accès à votre médiathèque (c’est la raison de la maintenance actuelle de rfragniere.ch.
  • Il n’est pas possible d’utiliser les fonction de tailles d’images de WordPress (thumbnail, medium, etc…) et il faut réfléchir à la taille de visualisation des images pour optimiser la vitesse de chargement.

Code

explication de la structure de base

<div class="archive-grid grid">
    
    <!--bloc image simple avec lien sur l'image d'origine-->
    <div class="grid-sizer grid-sizer-post">
    </div><!--grid-sizer-->
    <article class="grid-item grid-item-post">
        <a href="image_full_path" target="_blank">
            <img src="image_preview_path">  
        </a>
    </article><!--grid-item-->


    <!--bloc image intégrant un bouton avec  un lien sur l'image d'origine-->
    <div class="grid-sizer grid-sizer-post">
    </div>
    <article class="grid-item grid-item-post">
        <a href="image_full_path">
            <div class="img-button">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <g fill="none" fill-rule="evenodd">
                    <path d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8"></path>
                    </g>
                </svg>
            </div>   
        </a>
        <img src="image_preview_path">  
    </article>

     <!--bloc video utilise une image en arrière-plan pour définir la taille-->
    <div class="grid-sizer grid-sizer-post">
    </div>
    <!--grid-sizer-->
    <article class="grid-item grid-item-post">
        <div class="video-item">
            <img src="_blank_image_preview_path">
            <video controls="" id="change" loop="" autoplay="autoplay">
                <source src="video_path" type="video/mp4">
            </video>
        </div>
    </article>
    
   

    
</div><!--archive-grid-->
HTML

Meow Gallery

le plus convaincant et moins laborieux jusqu’ici est le plugin Meow Gallery mais ne laisse pas la possibilité de créer des bloc ou d’importer des videos ou autre contenu que des images statiques.

les « plus »

  • Très facile à mettre en place et personaliser.

les « moins »

  • N’offre pas la possibilité d’intégrer d’autres éléments que des images.

WordPress block editor

le moins maniable, ca pourrait marcher si wordpress créait seulement less containers nécessaires. Au lieu de cela il crée systématiquement un « inner-container » qui se révèle assez pénible, à étudier les techniques pour le détruire en Javascript.