[Problème] Problème de redimensionnement des images dans un article

[obelix1990]

Bonjour,

J'essaie de redimensionner les images dans un article (hauteur ou largeur).
Dans l'éditeur, pas de problème, tout semble correct (voir image ci-dessous)



Ci-dessous, le code HTML généré pour cette page



En front end, l'image est bien redimensionnée en largeur, mais le redimensionnement ne fonctionne pas pour la hauteur (voir image ci-dessous)



Pouvez-vous m'aider à solutionner ce problème?

Merci

[Casper17]

Re : Problème de redimensionnement des images dans un article

Bonjour
dans les propriétés de l'image tu as essayé de modifier la hauteur et la largeur ?
as tu décoché au besoin le lien de proportionnalité entre les deux ?

[lefabdu51]

Re : Problème de redimensionnement des images dans un article

tu est un peu comique, j apprecies.
Sur ta seconde capture:
premiere image height:100px
seconde image width:100px

Dans le premier cas tu regles la hauteur et dans le second la largeur.
donc c est toi tu regles la hauteur sur les deux, soit la largeur sur les deux.....

dans tout les cas, ton image s affiches bien selon les paramètres ci dessus.....

[obelix1990]

Re : Problème de redimensionnement des images dans un article

Bonjour,

@lefabdu51
je ne vois pas ce qui est comique!

Dans la première image, j"essaie d'imposer la hauteur de l'image (proportion contrainte) ce qui veut dire que la largeur de l'image dépendra de la hauteur imposée.
Dans la prévisualisation la hauteur et largeur de l'image correspond bien à ce qui est demandé.
Dans le front end, c"est la taille originale de l'image qui est affichée (et pas la taille demandée)

Lorsque je demande la re-dimension de l'image en imposant la largeur tout fonctionne correctement.

@SUPER BRICOLEUR
Non, j'ai essayé d'imposer la hauteur (avec proportion contrainte), dans la première image, normalement, la largeur sera calculée en fonction de la hauteur demandée. La prévisualisation donne les bonnes images avec les bonnes tailles.
Par contre, l'image n'est pas correcte dans le front end lorsque la hauteur est imposée.

Par contre le code suivant fonctionne correctement:

<p> </p>
<p><img style="height: 100px;" src="Photos/Carrieres/Plate Taille.jpg" alt="" /></p>
<p><img src="Photos/Carrieres/Plate Taille.jpg" alt="" width="100" /></p> (voir résultat en front end ci dessous)




Pour info, j'ai imposé la hauteur de certaines images dans mon site en ligne (joomla 2.5) et cela fonctionne correctement!... Et la même page (avec les images redimensionnées) sous Joomla 3.3 (en local) ne redimensionne pas les images lorsque la hauteur est imposée!

[obelix1990]

Re : Problème de redimensionnement des images dans un article

Hello

petit up pour ne pas m'oublier...

[Toutsi]

Re : Problème de redimensionnement des images dans un article

Bonjour
Même problème de hauteur. Largeur OK. Mais une intégration de vidéo YouTube.
J'ai tout essayé, code la page, editeur vidéo... Rien n'y fait. Toujours hauteur tronquée en front end & dimensions correctes en backend..?
Je continue à consulter les posts
Merci de votre aide.

[Toutsi]

Re : Problème de redimensionnement des images dans un article

Si on intègre la vidéo en tant que <object width="640" height="360"><param name="movie" value="//www.youtube... la taille des images ne fonctionne pas.
Mais en intégrant <iframe width="640" height="360" src="//www.youtube... ça marche.
Toutefois, il faut régler les éléments prohibés du TinyMCE. Virer iFrame.

[ghazal]

Re : Problème de redimensionnement des images dans un article

@obelix1990
* ton nommage d'images n'est pas correct (du moins tel qu'il apparait dans ton exemple) :

Photos/Carrieres/Plate Taille.jpg

devrait être :

Photos/Carrieres/Plate_Taille.jpg

La règle est :
pas d'espace, pas de slash (/)
remplacer les espaces par underscore (_) ou tiret (-).
De plus, ce n'est pas très SEO-friendly.

Une URL pour voir ce que tu fais ?

@toutsi
Ton souci d'intégration de vidéo n'a pas vraiment sa place dans cette discussion.
Tu ferais mieux d'ouvrir un nouveau post.
Tu auras des réponses adaptées.
As-tu checké du coté du JED pour voir si une extension te conviendrait ?

[Toutsi]

Re : Problème de redimensionnement des images dans un article

Toutes mes excuses Ghazal, je pensais que cela irait aussi pour les vidéos.
Bonne journée

[obelix1990]

Re : Problème de redimensionnement des images dans un article

Bonjour Ghazal,
merci pour ces précisions. J'avais fait cet exemple (nom avecles espaces) pour montrer le problème.
Ci-dessous tu trouveras une URL (joomla 2.5) avec une page qui fonctionne avec un redimensionnement en hauteur.

http://www.lesbelougas.net/index.php/le-club/contacts

Cette même page, en local et avec joomla 3.3.2 ne redimensionne pas les images. Toutes les images sont affichées avec leurs tailles originales

[Rajoz]

Re : Problème de redimensionnement des images dans un article

Bonjour obelix1990,

La différence c'est le mode "responsive" de la plupart des templates en J! 3.x alors que les templates qui étaient utilisés pour J! 2.5 ne l'étaient pas (il en existe maintenant qui sont "responsive").

Sur les exemples, je vois que le site en 2.5 est beez_20 qui n'est pas responsive, l'image du site en 3.x me fait penser à Protostar qui est responsive.

Pour rendre les images adaptatives dans les templates responsives, le CSS utilisé est le suivant :

img {
    max-width: 100%;
    height: auto;
}

max-width: 100%; limite la largeur de l'image à 100% de l'écran
height: auto; impose la hauteur de l'image à rester proportionnelle à la largeur

Le résultat de l'utilisation de ce CSS est visible quand on inspecte les deux images du site (firebug ou inspecteur d'élément de Chrome) :

Pour la 1ère image (height imposé) :

• width = largeur de l'image ==> car non définie par le code (limitée à 100% par le CSS ce qui ne s'appliquera que si l'image est plus large que l'écran)
• height = hauteur de l'image ==> en auto par le CSS (l'attribut height="100" est écrasé par le CSS)

Pour la 2ème image (width imposé) :

• width = 100px par application de l'attribut width="100" (limité à 100% par le CSS mais ne joue pas ici tant que écran plus large que 100px)
• height = hauteur proportionnelle aux 100px de la largeur car en auto par le CSS et non définie par ailleurs

Pour obtenir le même résultat dans l'éditeur que sur le site, il faut que le CSS du template avec le code responsive pour les images soit intégré à l'éditeur.

Amicalement,
Rajoz

[obelix1990]

Re : Problème de redimensionnement des images dans un article

Bonjour Rajoz,
à nouveau merci pour ces précisions.
Etant un béotien dans ce domaine, pourrais-tu m'expliquer ce qu'est un template responsive? Si je ne me trompe pas ce serait un template qui s'adapte à la taille ou résolution des différents écrans?
Ce qui est dommage, c'est que l'éditeur fourni avec la version joomla 3.3 permet toute une série de manipulation sur la taille des images, mais que cela ne fonctionne plus sur les templates par défaut fourni...
Je vois que tu as beaucoup de connaissance en css. Pourrais-tu m'indiquer (si tu connais) un lien où je pourrais avoir une documentation pour les nuls sur la manière de modifier le template protostar?

Merci encore

[Rajoz]

Re : Problème de redimensionnement des images dans un article

Bonjour obelix1990,

Un template "responsive" ou "adaptatif" est effectivement un template qui s'adapte à la dimension et à la définition de l'écran.

Dans le temps, on se contentait d'un seul format car il n'y avait que les écrans standards PC ou MAC. Maintenant, les sites web sont consultés par une grande diversité d'écrans : smartphone, tablette, écran de bureau, écran TV de grande dimension. Il serait très difficile voire impossible de maintenir un type d'affichage différent pour chaque type d'écran. La solution c'est un seul type d'affichage qui s'adapte à l'écran.

Joomla! 3 a été un précurseur parmi les CMS en intégrant directement la librairie Bootstrap qui a permit un affichage adaptatif de l'administration et la création de templates comme Protostar. Bootstrap n'est pas obligatoire pour créer des templates adaptatifs et certains fournisseurs de templates utilisent soit la nouvelle version de Bootstrap (pas celle de Joomla!) soit d'autres librairies.

L'éditeur fourni avec Joomla! (TinyMCE) ou d'autres éditeurs (ex: JCE) permettent de faire beaucoup de choses. Cela permet de créer ses articles exactement comme on le souhaite. Mais il faut toujours se rappeler qu'à la fin c'est le template qui a la main sur la façon dont va s'afficher la page du site. Une des façons d'améliorer l'aspect WYSIWYG de l'éditeur c'est de lui dire quel est le CSS utilisé par le template. Pour TinyMCE c'est le paramètre "Classes CSS personnalisées".

Je ne connais pas de documentation spécifique pour la modification de Protostar, une simple recherche sur Google de "template protostar" donne de très nombreuses réponses y compris en français.
Pour avoir un template personnalisé correspondant à ses besoins, il y a différentes possibilités selon ses connaissances html, php, css et js :

• Trouver celui qui convient parmi la multitude de templates existants
• Utiliser un outil de construction de templates (ex: http://www.template-creator.com/fr/)
• Partir d'un framework (base de template) comme Gantry, Warp, JAT3, Gavern, etc. La plupart des fournisseurs de templates construisent leurs templates à partir de frameworks plus ou moins facilement personnalisables. Ces framework sont souvent gratuits et fournis avec un template de base.
• Modifier un template existant comme Protostar ou autre
• Créer un template en partant de zéro, il existe des tutoriels qui expliquent comment construire un template. Ces tutoriels sont utiles pour savoir comment est construit un template et donc utile pour modifier un existant comme Protostar. Par exemple :
  • http://www.joomlack.fr/documentation...lates-joomla-3
  • en anglais : http://www.inmotionhosting.com/suppo...reate-template

Note : en cas de modification de Protostar, penser à en faire une copie et travailler sur la copie pour éviter que le travail ne soit écrasé par la prochaine mise à jour de Joomla!.

Amicalement,
Rajoz

[obelix1990]

Re : Problème de redimensionnement des images dans un article

Bonjour Rajoz,
merci pour ces informations. Je vais essayer en suivant le lien fourni sur la construction d'un template de modifier le template protostar.
Les positions 7 et 8 du template protostar ont étés modifiées par rapport au temlate beez20 et je voudrais inverser ces 2 positions en donnant au menu de gauche le style well par défaut.
Merci pour tes infos.