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

  • WordPress :6.4
  • Statut : non résolu
15 sujets de 1 à 15 (sur un total de 55)
  • Auteur
    Messages
  • #2467543
    Henri13
    Participant
    Chevalier WordPress
    490 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 8.2
    • Thème utilisé : Spacious
    • Extensions en place :
    • Nom de l’hébergeur : OVH
    • Adresse du site : https://raphael-toussaint.com/

    Problème(s) rencontré(s) :

    Bonjour,

    Sur iMac Nouveau 24-Version sonoma 14.3.1

    Si c’est possible, je n’ai pas la solution pour afficher des images côtes à côte dans une page.

    Par défaut, alors qu’elles se chargent  horizontale dans la page à modifier, sur le Site elles sont verticales.

    Les tutos sur ce sujet sont anciens donc obsolètes, ils ne s’appliquent plus.

    Peut-être par CSS ? Une aide serait la bienvenue.

    Images à modifier en fichier joint:

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

    Bonjour,

    Pouvez-vous préciser où (sur quelle page) peut-on trouver les images que vous montrez en pj?

    #2467551
    Henri13
    Participant
    Chevalier WordPress
    490 contributions
    https://raphael-toussaint.com/videos/#Videos-par-Laurent-Guiller

    Je ne suis pas sûr de la saisie de ce lien !

    Dans le Site en haut de page-> section Vidéo->Vidéos par Laurent Guiller, en fin de page.

    Les images désactivées se trouvent Section Lithographies –> Sans titre

    • Cette réponse a été modifiée le il y a 3 semaines par Henri13.
    #2467555
    ferman
    Participant
    Maître WordPress
    6776 contributions

    On peut effectivement utiliser le CSS. Le premier code (page-id-64…)correspond à la page « vidéos », le deuxième (#post-5759…)  à la page « lithos ».

    .page-id-64 .entry-content .entry-content.clearfix{display:inline-flex;
    gap:30px;
    }

    #post-5759 .entry-content p{display:inline-flex;
    gap:30px
    }

    #2467556
    Henri13
    Participant
    Chevalier WordPress
    490 contributions

    Un grand merci, c’est parfait.

    Bonne soirée. Très cordialement.

    #2468039
    Henri13
    Participant
    Chevalier WordPress
    490 contributions

    Bonjour Ferman,

    Ce matin en ouvrant « Vidéos par Laurent Guiller dans la page Sans titre dans la section Lithographies », cette page ne s’ouvre plus, disparue.

    Dans le menu elle figue en rouge- page non valide.

    Je l’ai retiré et j’ai créé une page avec toutes les vidéos de Laurent Guiller dans la section Lithographe: https://raphael-toussaint.com/videos-par-laurent-guiller/

    Les CSS que vous avez créés ne fonctionne pas pour cette nouvelle page, pouvez vous SVP m’en créé un.

    Je vous remercie par avance.

    #2468051
    ferman
    Participant
    Maître WordPress
    6776 contributions

    Bonjour,

    Les CSS que vous avez créés ne fonctionne pas pour cette nouvelle page

    C’est normal. Je ne me souviens plus comment c’était avant: une ligne? Ici vous avez trop de photos pour les mettre sur une seule ligne; elles seront sous forme d’une grille. J’espère que cela conviendra.

    #post-8640 .entry-content p{
    display: flex;
    flex-flow: row wrap;
    gap:10px;
    }

    8640 est l’identité de la nouvelle page. Vous pouvez modifier l’écartement des photos en jouant sur la valeur gap:10px (20px, 30px…) Avec 0px les photos se touchent.

    Mais je me demande pourquoi la page précédente est devenue non-valide.

    • Cette réponse a été modifiée le il y a 2 semaines par ferman.
    #2468058
    Henri13
    Participant
    Chevalier WordPress
    490 contributions

    C’est très bien en grille. J’espère que cette page ne va pas disparaître.

    En fichiers joints la capture de la page.

    Merci beaucoup pour votre aide très appréciée.

    Henri.

    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #2468079
    Henri13
    Participant
    Chevalier WordPress
    490 contributions

    RE: Bonjour,

    Obligé de rechargé la page, la barre espace en voulant séparer les images les supprime.

    La page s’affiche correctement.

    En voulant ajouter une légende pour saisir un texte sous chaque vidéo, les images s’affichent de nouveau en vertical, le CSS n’est plus valide comme vous pouvez le voir: https://raphael-toussaint.com/videos-par-laurent-guiller/

    Faut-il que je traite toutes les images pour ajouter un nouveau CSS ?

    #2468082
    ferman
    Participant
    Maître WordPress
    6776 contributions

    Bonjour,

    Dès que vous faites une modification importante (même ajouter une légende) ça perturbe les CSS. Cela se comprend: les CSS ne sont que de la mise en forme d’éléments et si vous modifiez ces éléments les CSS ne sont plus valables. C’est comme si on vous demandait de préparer un maquette pour un catalogue des œuvres de Raphaël Toussaint puis qu’on vous dise « tout compte fait, non, ce sera Manet ».

    Par exemple, dans le code précédent,

    #post-8640 .entry-content p{
    display: flex;
    flex-flow: row wrap;
    gap:10px;
    }

    la disposition en « flex » sera appliquée aux éléments de premier niveau*  dans les paragraphes (p) contenus dans la section ayant pour nom .entry-content, elle même contenue dans l’article ayant pour identité 8640.

    * premier niveau: venant immédiatement après.

    Auparavant, il n’y avait pas de problème : il n’y avait qu’un paragraphe, les éléments de premier niveau étant les images (je simplifie un peu) et les CSS correspondaient à cette situation.

    Maintenant, ce n’est plus le cas pour les images auxquelles vous avez ajouté des légendes.  Elles ne sont plus au premier niveau dans un paragraphe. Elles sont contenues dans des  » figures » (image + légende) et surtout ces figures ne sont plus contenues dans un paragraphe. Vous pouvez d’ailleurs constater que le code précédent s’applique toujours aux images non modifiées mais pas aux autres.

    En conclusion: Si vous modifiez les éléments auxquels s’appliquent les CSS, elles ne sont plus valables. Le mieux est d’enlever le code CSS que je vous avais donné et de faire les modifications voulues sur toutes les images, sans vous occuper de la présentation finale. Quand ce sera fait et qu’aucune modification (autre que de forme) des éléments nous verrons ce qu’il est possible de faire en CSS. Si vous pouviez déjà inclure toutes ces figures et les titres (Vidéos de Laurent Guiller -…) dans un paragraphe unique ce serait bien.

    Si ce n’est pas clair, n’hésitez pas à demander des explications.

    #2468083
    Henri13
    Participant
    Chevalier WordPress
    490 contributions

    Dire que j’ai bien compris, c’est prétentieux.

    J’ai ajouté la légende à chaque image, la page est prête pour un nouveau CSS, SVP.

    #2468092
    Henri13
    Participant
    Chevalier WordPress
    490 contributions

    Je n’ai pas encore insérer les liens, est-ce que ça risque de modifier le CSS ?

    Si oui, je vais les insérer.

    #2468093
    Henri13
    Participant
    Chevalier WordPress
    490 contributions

    Tous les liens sont placés.

    #2468111
    ferman
    Participant
    Maître WordPress
    6776 contributions

    Voici les résultats. En pièce jointe, à gauche, si l’on applique simplement le code précédent. Comme vous le voyez, ce n’est pas du tout satisfaisant. L’ajout de titres perturbe tout et il est impossible de faire mieux simplement. Par contre, il est possible (mais pas simplement), d’obtenir ce qui est à droite dans la pièce jointe et qui me semble correct comme présentation. Cepandant la méthode a des limites et impose, une fois la mise en page faite,  de ne rien changer à votre série d’images: ne pas ajouter d’images et ne pas changer d’images sinon les CSS ne seront plus valables.

    Je vois trois possibilités:

    • Utiliser la méthode telle qu’elle est actuellement, avec les limitations mentionnées.
    • Utiliser cette méthode en l’améliorant, ce qui permettrait de lever les limitations (il serait possible de modifier ou d’ajouter des images). Pour cela il faudrait que vous ajoutiez une classe à chacun des paragraphes titres afin de pouvoir les distinguer en CSS. Par exemple au lieu de <p><span style= »font-size: 20px; color: #ff0000; »>Vidéos de Laurent Guiller -7 avril 2023</span></p> écrire  <p class = »avril« ><span style= »font-size: 20px; color: #ff0000; »>Vidéos de Laurent Guiller -7 avril 2023</span></p>. Pareil pour les autres titres. C’est facile à faire.
    • Et pour finir, sans doute le plus simple: pourquoi ne pas utiliser, au lieu d’une longue liste de photos, des galeries (une par série d’images).

    Tenez-moi au courant.

     

     

     

     

     

    De

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

    Utiliser cette méthode en l’améliorant, ce qui permettrait de lever les limitations (il serait possible de modifier ou d’ajouter des images). Pour cela il faudrait que vous ajoutiez une classe à chacun des paragraphes titres afin de pouvoir les distinguer en CSS.

    Ce point est résolu. Vous n’avez pas à vous occuper des classes aux paragraphes.

15 sujets de 1 à 15 (sur un total de 55)
  • Vous devez être connecté pour répondre à ce sujet.