Comment placer des images côte à côte dans un Site (Créer un compte)

  • WordPress :6.4
  • Statut : non résolu
10 sujets de 46 à 55 (sur un total de 55)
  • Auteur
    Messages
  • #2468614
    Henri13
    Participant
    Maître WordPress
    511 contributions

    Pas sûr d’avoir compris, je remplace le code actuel par ce code:

    <script>
    $= jQuery;
    var a = #post-10000.entry-content.clearfix p');
    for (i=0; i<a.length; i++){
    $($(a)[i]).nextUntil ($(a)[i+1]).wrapAll("<p class = 'nouvelle'></p>");}
    </script>

    #2468616
    ferman
    Participant
    Maître WordPress
    6939 contributions

    Non, c’était un exemple si la page avait pour id 10000 ce qui n’est pas le cas.  Mais comme je ne connais pas encore les pages où vous voulez que le code s’applique, je ne peux pas être plus précis. Donc le mieux à faire est de créer vos pages sans vous occuper du code, de me donner l’adresse de ces pages pour que je puisse voir leur identité et je vous donnerai alors les codes correspondants.

    #2468617
    Henri13
    Participant
    Maître WordPress
    511 contributions

    Adresse actuelle qui doit rester en place: https://raphael-toussaint.com/videos-raphael-toussaint/

    Adresse pour essai multiple: https://raphael-toussaint.com/image-cote-a-cote/ son identité est: 8867 sauf erreur.

    #2468622
    ferman
    Participant
    Maître WordPress
    6939 contributions

    Adresse pour essai multiple: https://raphael-toussaint.com/image-cote-a-cote/ son identité est: 8867 sauf erreur.

    Ce n’est pas un bon exemple; je vous explique pourquoi. En pièce jointe, vous avez les schémas de la structure des pages « vidéos de Laurent Guiller » et « image côte à côte ». Comme on peut s’y attendre, elles ont la même structure de base: En dessous de l’image d’en-tête successivement   -> un titre (.header-post-title-container)  -> une section (.entry-content.clearfix) contenant divers éléments.

    Dans la première page « .entry-content.clearfix » contient une série de paragraphes (les titres dates) entre lesquels vous avez des séries d’images. Le dernier code jQuery se traduit de la manière suivante:

    1. var a = $(‘#post-8597 .entry-content.clearfix p’); signifie:  var a représente les paragraphes (p) contenus dans la section « .entry-content.clearfix  » de la page #post-8597.
    2. for (i=0; i<a.length; i++); signifie:  pour tous les paragraphes tels que définis ci-dessus
    3. $($(a)[i]).nextUntil ($(a)[i+1]).wrapAll; signifie: grouper tout ce qui se trouve entre deux paragraphes successifs (les séries d’images)
    4. <p class = ‘nouvelle’></p> »); signifie: en un nouveau paragraphe qui s’appellera « nouvelle ».

    En clair, on sélectionne les images entre deux paragraphes et on les regroupe en un seul paragraphe que l’on appelle « nouvelle ». Il y aura bien sûr autant de paragraphes « nouvelle’ que de séries d’images

    Je code CSS signifie: pour chaque nouveau paragraphe « nouvelle »  appliquer la règle « inline-flex » (mettre les images à l’horizontale)

    Dans la deuxième page il n’y a plus de paragraphes (les titres dates) dans la section  « .entry-content.clearfixs » seulement une série d’images. Le code jQuery ne peut donc pas s’appliquer. Vous n’avez plus besoin de regrouper les figures en un paragraphe « nouvelle » (vous pourriez le faire mais ce serait inutile). Il suffit donc de mettre toutes les images à l’horizontale  avec le code:

    #post-8867 .entry-content.clearfix{
    display: inline-flex;
    flex-flow: row wrap;
    gap:10px;
    }

    Pour conclure. Si votre page « image côte à côte » reste telle qu’elle est ou si vous vous contentez d’ajouter des images, vous avez seulement besoin du code CSS ci-dessus. Si vous introduisez des titres dates, vous aurez besoin du code CSS + le code jQuery. J’espère avoir bien expliqué.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2468658
    Henri13
    Participant
    Maître WordPress
    511 contributions

    Bonjour Ferman,

    Jai fait quelques essais et je remarque que saisir du texte dans la légende ne demande pas le code jQuery, les images s’alignent avec le code

    #post-8867 .entry-content.clearfix{
    display: inline-flex;
    flex-flow: row wrap;
    gap:10px;
    }

    Dès que je titre la page, ce code ne fonctionne plus.

    Si je place les deux codes dans « Personnaliser », les images s’alignent mais fractionnées.

    C’est bien compris, vos explications sont claires sauf que je ne sais pas où placer le code jQuery et comment.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2468684
    ferman
    Participant
    Maître WordPress
    6939 contributions

    Bonjour,

    Toujours matinal; je ne peux pas dire la même chose de moi.

    Donc en pièce jointe l’explication de ce que vous constatez.

    1. avec ce code CSS seul:
      #post-8867 .entry-content.clearfix{
      display: inline-flex;
      flex-flow: row wrap;
      gap:10px;
      }

      Tout ce qui est dans « .entry-content.clearfix  » est placé à l’horizontale; cela comprend les images et les deux paragraphes titres.  Vous constatez que les images sont sur deux lignes. Cela vient de se morceau de code « flex-flow: row wrap; »dans le code CSS. Cela équivaut à « passer à la ligne suivante ».  Quand la largeur totale du contenu placé à l’horizontale excède la largeur de la page, on continue en dessous. Ici, la largeur des deux titres + celle de 4 images sont le maximum autorisé; les deux images restantes se placent automatiquement sur la ligne suivante . Sans « flex-flow: row wrap; » tout serait sur une même ligne et sortirait éventuellement du cadre de la page.

    2. En appliquant le code jQuery, on crée une nouvelle section (« .nouvelle ») incluant les images mais excluant les deux paragraphes titres. Ce code CSS:
      #post-8867 .nouvelle{
      display: inline-flex;
      flex-flow: row wrap;
      gap:10px;
      }

      va maintenant placer le contenu de « .nouvelle » (les images et elles seules à l’horizontale. Vous ajoutez simplement ce code CSS dans les CSS personnalisées (et vous gardez bien sûr celui de la page 8797).

    Pour le code jQuery, vous remplacez le code utilisé en dernier par le suivant, qui s’applique aux deux pages.

    <script>
    $= jQuery;
    var a = $('#post-8797.entry-content.clearfix p');
    for (i=0; i<a.length; i++){
    $($(a)[i]).nextUntil ($(a)[i+1]).wrapAll("<p class = 'nouvelle'></p>");
    }
    var b = $('#post-8867 .entry-content.clearfix p');
    for (i=0; i<b.length; i++){
    $($(b)[i]).nextUntil ($(b)[i+1]).wrapAll("<p class = 'nouvelle'></p>");
    }
    </script>

     

    • Cette réponse a été modifiée le il y a 1 mois et 3 semaines par ferman.
    #2468688
    ferman
    Participant
    Maître WordPress
    6939 contributions

    La pièce jointe que j’ai oublié d’envoyer.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2468727
    Henri13
    Participant
    Maître WordPress
    511 contributions

    Bonjour Ferman,

    Avec le nouveau code jQuery ci-dessus, rien ne fonctionne.

    J’ai replacé le code fonctionnel.

    #2468735
    ferman
    Participant
    Maître WordPress
    6939 contributions

    Bonjour,

    Manque d’attention de ma part:  dans « #post-8797.entry-content », il manque un espace. Cela devrait être #post-8797 .entry-content.  Avec le code rectifié ci-dessous cela devrait aller mieux.

    <script>
    $= jQuery;
    var a = $('#post-8797 .entry-content.clearfix p');
    for (i=0; i<a.length; i++){
    $($(a)[i]).nextUntil ($(a)[i+1]).wrapAll("<p class = 'nouvelle'></p>");
    }
    var b = $('#post-8867 .entry-content.clearfix p');
    for (i=0; i<b.length; i++){
    $($(b)[i]).nextUntil ($(b)[i+1]).wrapAll("<p class = 'nouvelle'></p>");
    }
    </script>

     

    #2468754
    Henri13
    Participant
    Maître WordPress
    511 contributions

    Cette fois c’est bon, les deux pages sont alignées.

    Je dois quitter, à demain matin au cas où!

    Merci pour ce travail,

    Bonne fin de journée,

    Cordialement,

    Henri.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
10 sujets de 46 à 55 (sur un total de 55)
  • Vous devez être connecté pour répondre à ce sujet.