Image dépasse zone article

[AlainBO]

Bonjour,

Après 2 heures à chercher un peu partout sur google, j'abandonne et fais appel à la communauté. J'ai fais quelques joomla en mode bricolage tel que ces sites la:
- https://www.elec-innov.fr/ (le mien)
- https://www.aappma-colombier-fontaine.fr/ (association)

Je tente de créer un site pour une amie
- http://www.la-vallee-des-fees.fr/

Mon soucis est de demander à l'article de se dimensionner par rapport au contenu. L'image en page d'accueil dépasse lorsque je lui mets la taille que je souhaite. Quelle est la méthode?

Merci

AlainB

[RobertG]

Bonjour,

Si j'en crois le code sources, la largeur est définie à 50% et le style définit de son côté une largeur max de 100% et une hauteur automatique.
Ce que je ferais plutôt, c'est créer une image à la taille voulue sans forcer un redimensionnement, ce qui devrait régler le problème, y compris sur de petits écrans.

[AlainBO]

Salut RobertG,

J'ai suivi ton conseil. J'ai mit une largeur fixe de 500px de large, ce qui est pour moi le minimum sur PC, j'ai le même probleme...

Sur téléphone le 500px fonctionne, l'image ce positionne au dessus du texte sans sortir du cadre (ça me convient bien).

Ce que je ne comprends pas, c'est pourquoi le parent ne grossi pas en fonction de ses enfants...

Sur ma div cadre blanc, j'ai collé un height de 800px... Ok le parent grossi mais je pense que ce n'est qu'un moyen détourné de régler mon probleme.... J'ai l'impression que ne maitrisant pas correctement le codage, je n'ai pas la bonne solution.

[schott0200]

Bonjour, tu utilises Cassiopeia comme template ?
Essaie tout simplement de rajouter des espaces en bas de ton texte. Il manque tout simplement de contenu je poense.

[RobertG]

Premier point sans lien direct avec cette question : ton image est beaucoup trop lourde (5,2 Mo), il faut que tu l'allèges.

Ensuite, si je ne me trompe, la hauteur de l'article est définie par le texte et ta classe "fondblanc" ne s'applique en fait que sur lui, l'image étant plus haute que le texte et le fond de la page n'étant pas blanc, l'image déborde en effet.

La solution de schott0200 est peut-être la plus simple !

[AlainBO]

Merci Schott et Robert,

La solution de Schott me parait juste être un patch... Je l'ai quand même tenté mais ça n’agrandit pas ma classe fondblanc... Je vai donc creuser l'idée de ma classe.. Commence à me revenir quelques souvenirs. Si je supprime ma classe et que je créé une div que je CSS en fond blanc et que je colle texte + image dedans. Ça peut le faire?

[RobertG]

Pourtant, un ajout de lignes devrait fonctionner.

Je ne suis pas sûr que la div soit la solution, peut-être une gestion en colonnes serait-elle plus appropriée.

[AlainBO]

Effectivement la div n'est pas la solution... en fait, ma class, est la div ou est déja dans la div... Ci joint le code de la page.

Et effectivement l'idée de Schott fonctionne du moment qu'on rentre les retours a la ligne dans et non pas sous la div.... Ce qui m’ennuie avec cette solution c'est qu'en mode portable, je me retrouve avec un paquet de retour a la ligne sous le texte sans aucune raison....

Donc je continu à creuser... Pour trouver une solution.

<div class="fondblanc"><img style="float: right;" src="images/Photo_magasin/Facade.png" alt="Magasin ésotérique &quot;la vallée des fées&quot; à Montceau les mines" width="500" loading="lazy" data-path="local-images:/Photo_magasin/Facade.png" />
<p><span class="s1">Karine, qui a baptisé sa boutique « La Vallée des Fées » attend sa future clientèle, afin de lui faire découvrir non seulement les soins énergétiques qu’elle propose, mais également tous les petits trésors qu’elle a sélectionnés pour elle.</span></p>
<p class="p1"><span class="s1"><b>Une boutique unique</b></span></p>
<p class="p1"><span class="s1">A la Vallée des Fées, on trouve des pierres telles que quartz, améthyste, citrine, aigue-marine, rubis, turquoise etc. Chaque pierre possède une petite fiche, avec la description de ses propriétés.</span></p>
<p class="p1"><span class="s1">Au fil des rayons, des pendules divinatoires, des oracles de toute beauté, de l’encens, des bouddhas, des bougies et autres porte-encens.</span></p>
<p class="p1"><span class="s1">Et dans une petite vitrine, des bijoux de créateurs, uniques, qui vous séduiront d’entrée, tant par leur finesse que leur éclat.</span></p>
</div>
<p class="p1"> </p>
<p class="p1"> </p>
<p class="p1"> </p>
<p class="p1"> </p>
<p class="p1"> </p>
<p class="p1"> </p>
<p class="p1"> </p>
<p class="p1"> </p>
<p class="p1"> </p>
<p class="p1"> </p>

[RobertG]

Avec JCE Pro, j'ai rapidement testé l'utilisation de deux colonnes, le texte dans la première, l'image dans la seconde.
L'avantage est que la div prend bien dans ce cas la hauteur de l'image, et qu'elle décale celle-ci sous le texte sur les petits écrans.
Je ne suis pas assez à l'aise avec le CSS pour en faire autant sans utiliser ces fonctions de JCE Pro.

[AlainBO]

ok, je vai regarder ce qu'est JCE pro (j'imagine que pro coute quelque chose?? )

[Helloo]

ok, je vai regarder ce qu'est JCE pro (j'imagine que pro coute quelque chose?? )

Quel radin ! haha , oui ça coûte quelque chose, mais tu peux l’installer sur tous les sites qui t’appartienne.

[daneel]

Euh... bonsoir !

Désolé mais pourquoi se compliquer la vie ? On a les grilles et on a boostrap 5.

Edite le code source de l'article et colle le code suivant

            <div class="row mb-3 fondblanc">
    <div class="col-md-7"><p><span class="s1">Karine, qui a baptisé sa boutique «&nbsp;La Vallée des Fées&nbsp;» attend sa future clientèle, afin de lui faire découvrir non seulement les soins énergétiques qu’elle propose, mais également tous les petits trésors qu’elle a sélectionnés pour elle.</span></p>
<p class="p1"><span class="s1"><b>Une boutique unique</b></span></p>
<p class="p1"><span class="s1">A la Vallée des Fées, on trouve des pierres telles que quartz, améthyste, citrine, aigue-marine, rubis, turquoise etc. Chaque pierre possède une petite fiche, avec la description de ses propriétés.</span></p>
<p class="p1"><span class="s1">Au fil des rayons, des pendules divinatoires, des oracles de toute beauté, de l’encens, des bouddhas, des bougies et autres porte-encens.</span></p>
<p class="p1"><span class="s1">Et dans une petite vitrine, des bijoux de créateurs, uniques, qui vous séduiront d’entrée, tant par leur finesse que leur éclat.</span></p></div>
    <div class="col-md-5"><img src="/images/Photo_magasin/Facade.png" alt="Magasin ésotérique &quot;la vallée des fées&quot; à Montceau les mines" loading="lazy" data-path="local-images:/Photo_magasin/Facade.png"></div>
  </div>​

Explications :
- j'ajoute la classe la classe row à la div existante pour définir une ligne
- je créé 2 div à l'intérieur pour faire les deux colonnes. La grille étant sur 12 colonnes, j'attribue 7 colonnes pour le texte et le reste pour l'image avec les classes col-md-x
Pour plus d'informations, consulter : https://www.w3schools.com/bootstrap5...grid_basic.php ainsi que la documentation officielle

https://getbootstrap.com/docs/5.0/layout/grid/

Après on peut définir une police spécifique pour la thématique des fées pour le titre que l'on récupère depuis google font et que l'on incorpore localement dans cassiopeia.
On a un petit site nommé goofonts qui permet de rechercher d'après des mots clés comme fairy tale (conte de fées en anglais) : https://goofonts.com/tag/fairy-tale/

Un petit de coup d'AI pour donner un effet sur l'image et hop le résultat.





En 2022, j'ai expliqué lors du joomladay que l'on pouvait ajouter les colonnes de bootstrap 5 depuis tinymce. Cela permet d'éviter de se taper manuellement le code et de préciser l'affichage également sur tablette et mobile. On peut retrouver le lien dans le pdf sur le site du joomladay.fr. Sinon manuellement comme indiqué ci-dessus, cela fonctionne également.

Sur le forum, j'ai expliqué comment incorporer localement des fontes dans cassiopeia provenant notamment de google font pour améliorer la présentation. Cela permet d'éviter de les charger depuis les serveurs de google.

Enfin, on peut également définir des images responsives, ce qui evite d'avoir des images trop lourdes à charger en utilisant des solutions comme https://responsive-images.dgrammatiko.dev/
qui optimisent les images et convertissent en webp et sans avoir besoin de les traiter avant de les envoyer sur le site.

[daneel]

Pour info, la nouvelle version de Joomla sera publiée dans deux jours.
Comme tu viens seulement de commencer à réaliser le site de ton ami, je te conseille d'attendre d'ici mardi.

Parmi les nouvelles fonctionnalités, tu as justement l'alignement native de l'image à droite ou à gauche du texte dans l'éditeur de Joomla donc dans tinymce.
De mon avis, ce n'est pas forcément la plus intéressante des avancées techniques mais elle peut éviter de chercher comme tu l'as indiqué dans ton premier message...

Une fois l'image insérée dans le contenu, il suffit de l'éditer via tinymce et de choisir la classe left (aligné à gauche) ou right (aligné à droite),
la version finale disposera de la traduction en français (désolé pour la capture).



A tester !



Après, ce que j'ai indiqué précédemment reste valable surtout en utilisant Cassiopeia ou tout autre template à base de bootstrap 5 donc natif joomla 4 et 5.
Je verrai pour faire encore plus simple à l'avenir