[Résolu] réduire l’espace entre les images d’une galerie (Créer un compte)

  • WordPress :6.1
  • Statut : résolu
13 sujets de 1 à 13 (sur un total de 13)
  • Auteur
    Messages
  • #2432376
    laurentsc
    Participant
    Chevalier WordPress
    230 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 8.1/8
    • Thème utilisé : Spacious
    • Extensions en place :
      Akismet Anti-Spam   Version 5.0.1
      Classic Editor Version 1.6.2
      Classic Widgets    Version 0.3
      Contact Form 7 Version 5.6.47
      Darklup Lite - WP Dark Mode    Version 2.1.1
      Duplicate Page Version 4.4.9
      Duplicator Version 1.5.0
      Elementor  Version 3.8.1
      FooBox Image Lightbox  Version 2.7.17
      FooGallery Version 2.2.26
      Forum_wordpress_fr Version 4.2
      Lightbox with PhotoSwipe   Version 5.0.18
      ThemeGrill Demo Importer   Version 1.8.8.2
      To Top Version 2.5.1
      W3 Total Cache Version 2.2.7
    • Nom de l’hébergeur : Evxonline
    • Adresse du site : https://pasdpanique.fr/les-nids-et-les-insectes/

    Problème(s) rencontré(s) : Pour créer une galerie d’images, au début j’étais parti sur l’extension Foogallery mais souhaitant faire exactement le design que je veux, je la fais finalement en html+CSS.

    Je suis parti sur une flexbox. J’ai créé un design qui fonctionne parfaitement avec Codepen : https://codepen.io/laurentsch/pen/xxzWNbx par contre, si je le mets dans WordPress, il ne tient pas compte de la règle width: 40%; de la classe flex-item. Comment faire ?

      <h3>Les nids : </h3>
      <div class="flex-container">
        <div class="flex-item">
          <figure>
            <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/nidmontbonnot-300x169.jpg" alt="" class="img-nid size-medium wp-image-162 image-galerie" />
            <figcaption>Nid de guêpes à Montbonnot Saint Martin</figcaption>
          </figure>
        </div>
        <div class="flex-item">
          <figure>
            <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/nidfrelonsstmarcellin-225x300.jpeg" alt="" class="img-nid size-medium wp-image-161 image-galerie" />
            <figcaption>Frelons asiatiques à St Marcellin</figcaption>
          </figure>
        </div>
        <div class="flex-item">
          <figure>
            <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/nid-225x300.jpeg" alt="" class="img-nid size-medium wp-image-160 image-galerie" />
            <figcaption>Nid d'abeilles</figcaption>
          </figure>
        </div>
        <div class="flex-item">
          <figure>
            <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-09-08-at-15.51.52-290x300.jpeg" alt=""  class="img-nid size-medium wp-image-163 image-galerie" />
            <figcaption>Nid de guêpes à Lans en Vercors</figcaption>
          </figure>
        </div>
      </div>

     

    /* galerie_lightbox */
    .flex-container {
        /* We first create a flex layout context */
        display: flex;
    
        /* Then we define the flow direction
           and if we allow the items to wrap
         * Remember this is the same as:
         * flex-direction: row;
         * flex-wrap: wrap;
         */
        flex-flow: row wrap;
    
        /* Then we define how is distributed the remaining space */
        justify-content: space-between;
    
        padding: 0 10% 0 10%;
        margin: 0;
        list-style: none;
    }
    
    .flex-item {
        padding: 0;
        width: 40%;
        height: 40%;
        margin-top: 10px;
        /*line-height: 150px;*/
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
    }
    
    /* fin galerie_lightbox */
    
    .img-nid{
        width:100%;
        height:100%;
    }

    #2432915
    Hatake
    Participant
    Chevalier WordPress
    186 contributions

    Bonsoir,
    Je ne suis pas codeur, moi j’utilisais la fonction de base Galerie de WP.
    La partie CSS a été ajouté où ?
    Avez-vous essayé de supprimé toute les phrases comme
    /* We first create a flex layout context */

    /* galerie_lightbox */
    .flex-container {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        padding: 0 10% 0 10%;
        margin: 0;
        list-style: none;
    }
    
    .flex-item {
        padding: 0;
        width: 40%;
        height: 40%;
        margin-top: 10px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
    }
    
    /* fin galerie_lightbox */
    
    .img-nid{
        width:100%;
        height:100%;
    }

    Le code sur Codepen est différent de celui mis sur le forum, juste un exemple ?
    https://codepen.io/laurentsch/pen/xxzWNbx

    #2432927
    laurentsc
    Participant
    Chevalier WordPress
    230 contributions

    Bonsoir,

    moi, coder, ça a été mon métier (de 1987 à mars 2022)…Donc, même dans WordPress, peux pas m’empêcher ; et comme je maîtrise mal le réglage des extensions, en faisant du html + du CSS, j’obtiens ce que je veux…parfois, car justement, il y a souvent « conflit » entre mon code et celui de WordPress, et les règles CSS de WordPress écrasent parfois les miennes.

    Ajouter des règles CSS : dans le tableau de bord, onglet Apparence -> Personnaliser -> CSS additionnel (ou un nom approchant car ce dernier dépend du thème)

    Supprimer les phrases du genre /* bla bla */, ça changerait rien car ces phrases sont des commentaires.

    Différence entre le code mis dans le forum et celui de Codepen : erreur de copier-coller.

    #2432993
    Hatake
    Participant
    Chevalier WordPress
    186 contributions

    Bonjour,
    Oui, des commentaires, j’avais oublié l’appellation, merci.
    Je connais, mais je suis comme St Thomas, je teste, mais si cela ne change rien, au moins, j’ai essayé, par acquit de conscience.
    Ou ajouter !important ?

    Avez-vous un thème enfant ?
    Parfois, j’ai des codes qui ne fonctionnaient pas dans CSS additionnel, mais dans le thème enfant, sans savoir pourquoi.

    #2432998
    ferman
    Participant
    Maître WordPress
    5615 contributions

    Bonjour,

    Chez moi la largeur peut être modifiée sans problème: 30%, 20%… C’est la hauteur qui ne peut pas être modifiée. Ce n’est pas un problème: si vous pouviez modifier la hauteur et la largeur, vos images seraient déformées.

    #2433025
    laurentsc
    Participant
    Chevalier WordPress
    230 contributions

    Non, je n’ai pas essayé de créer un thème enfant : bon à savoir…

    Exemple de code avec !important :

    .flex-item {
        padding: 0;
        width: 40%;
        height: 40%!important;
        margin-top: 10px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
    }

    OK, ferman, pour la précision…

     

    #2433026
    Hatake
    Participant
    Chevalier WordPress
    186 contributions

    Re,
    Avec la fonction Inspecter, je vois le code de CSS  .flex-container, mais pas de .flex-item, vraiment pas doué.


    @Ferman
    est plus calé que moi, plus apte à vous aider que moi.

    #2433032
    laurentsc
    Participant
    Chevalier WordPress
    230 contributions

    lol ; c’est pas une question de pas être doué : j’ai effectivement supprimé cette classe, comme je ne parvenais pas à la faire fonctionner, je m’en suis passée…

    #2433033
    Hatake
    Participant
    Chevalier WordPress
    186 contributions

    Ok, je comprends.
    Mais la fonction native Galerie de WP, pas suffisant ?
    https://fr.wordpress.org/support/article/the-wordpress-gallery-b/

    Sinon le problème est résolu ou pas ?

    #2433146
    laurentsc
    Participant
    Chevalier WordPress
    230 contributions

    Si la galerie native est suffisante, je ne saurais répondre ; j’ai oublié quels essais j’avais fait ; je pense l’avoir aussi essayée…

    Si le problème est résolu, en fait, j’en ai un autre, très similaire : je voudrais grossir la talle (en affichage sur PC) de certaines images. J’ai donc crée la classe

    .grossir-taille{
    	width:1000%;
    }

    j’ai mis une valeur exagérée pour bien la voir (c’est du provisoire). Et :

    <h3>Les insectes :</h3>
    <div class=" padding-bottom50 flex-container">
      <div class="padding45 flex-item">
        <figure>
          <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-05-15-at-18.49.57-2-248x300.jpeg" alt="" class="grossir-taille wp-image-189 image-galerie" />
          <figcaption> Les insectes qui piquent</figcaption>
        </figure>
      </div>
    
      <div class="flex-item">
        <figure>
        <img src="https://pasdpanique.fr/wp-content/uploads/2022/11/WhatsApp-Image-2022-05-15-at-18.49.56-2-300x289.jpeg" alt="" class="grossir-taille wp-image-188 image-galerie" />
        <figcaption>Tous les insectes</figcaption>
        </figure>
      </div>
    </div>

    Mais ça grossit rien…

    Je vois avec l’inspecteur :

    .entry-content img:100%

    donc j’ai rajouté la classe

    .entry-content img:1000%

    mais je  vois avec l’inspecteur que c’est ignoré (cette ligne est barrée). Je vais donc cet après-midi créer un thème enfant (au cas où) ; à moins que vous ayez une autre idée…

    #2433164
    laurentsc
    Participant
    Chevalier WordPress
    230 contributions

    Tous comptes faits, la création d’un thème enfant s’est révélée efficace car du coup il a bien pris en compte mes règles CSS :

    .grossir-taille{
    	width:110%;
      padding-left:20%;	
    }
    
    .entry-content img{max-width:1000%;
    }

    Me suis montré plus raisonnable dans la largeur et ai rajouté un peu de padding pour écarter les images. A noter que la règle entry-content est obligatoire et sans l’inspecteur, il aurait été impossible de le savoir..

    #2433169
    Hatake
    Participant
    Chevalier WordPress
    186 contributions

    Bonjour,
    J’ai par habitude, de toujours créer un thème enfant, on ne sait jamais, un jour, besoin d’ajouter un code dan header.php ou de personnaliser une page.

    Bon à savoir pour entry-content.
    Tout est bon, maintenant ?

    #2433171
    laurentsc
    Participant
    Chevalier WordPress
    230 contributions

    Pour l’instant, oui, tout est bon et si je rencontre un nouveau problème, je créerai une nouvelle discussion. Bonne idée de toujours créer un thème enfant ; j’espère m’en rappeler ultérieurement…

     

    Heureusement, que je venais de sauvegarder tout mon CSS, car le fait de créer un thème enfant a tout supprimé…

    Mais ça ne serait pas arrivé si je l’avais fait dès le début.

    • Cette réponse a été modifiée le il y a 1 semaine et 3 jours par laurentsc.
    • Cette réponse a été modifiée le il y a 1 semaine et 3 jours par laurentsc.
13 sujets de 1 à 13 (sur un total de 13)
  • Vous devez être connecté pour répondre à ce sujet.