Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Utilisé à ce jour dans 1517 sites
test modele image_fluide
Article mis en ligne le 24 novembre 2013
dernière modification le 27 mars 2015

par Jean Christophe Villeneuve
Visites : 1342 - Popularité :
3%
logo imprimer
Enregistrer au format PDF

Test sur le modèle <image_fluideXXX> qui doit

  • respecter la largeur maximum des images dans les articles définies dans la configuration d’Escal
  • ne pas agrandir l’image si elle est plus petite que cette limite
  • réduire l’image sur les petits écrans en fonction de la taille de ces derniers
  • être centrée

Tests avec largeur maxi des images : 500px

Test avec une image de 640 X 180 px

Test avec une image de 360 X 480 px

argentine04

Test avec une image de 594 X 671 px

Test avec une image de 48 X 48 px


Forum
Répondre à cet article
Modele "image_fluide" & plugin "Insertion avancée d’images"
Jaseur Boréal - le 3 janvier 2018

Bonjour,

Avec l’arrivée récente en 2017 du plugin "Insertion avancée d’images" décrit dans l’article-escal 328 il va y avoir redondance d’outils.

Dans l’espace privé de SPIP, ce plugin est par contre nommé "Médias compatibles responsive et modifiés"

Je teste les "Insertion avancée d’images" en remplaçant
-* <image_fluidexxx>
par
-* <imgxxx|center|rond|largeur=500|flip>

Pour l’instant j’ai un défaut d’affichage : l’espace est réservé, le titre & descriptif d’image s’affiche, mais pas encore l’image.

Va falloir aller tripatouiller le fichier .htaccess, d’après les explications données par Arno*.

Mon besoin actuel, qui sera aussi celui d’autres escaliens c’est de trouver facilement la procédure détaillée, rassemblée dans l’article concerné, pour basculer progressivement les pages contenant ces "images fluides" vers des "images avancées responsives".

Je continue les tests. L’affichage des images et logos dans les listes d’articles des sous-rubriques, va pouvoir aussi bien mieux "s’adapter" aux écrans et aux doigts.

@+

Modele "image_fluide" & plugin "Insertion avancée d’images"
Jaseur Boréal - le 3 janvier 2018

En ajoutant, comme le suggère Arno* une règle de réécriture des liens d’images dans le fichier "htaccess" ( source paris-Beyrouth) du site :

RewriteRule (.*)\-resp([0-9]+v?)(\-([0-9\.]+))?\.(jpg|png|gif)index.php?action=image_responsive&img=$1.{$5&taille=$2&dpr=$4}

L’affichage est extra, comme on peut le voir ici par exemple. Cela apporte un vrai [changement esthétique et simple aux images dans un article : https://www.lettonie-francija.fr/Aminata-Kalnins-spectacle-choral-jeunes-traverser-les-ponts-1366]

Modele "image_fluide" & plugin "Insertion avancée d’images"
conil26 - le 3 janvier 2018

Bjr,

Le nom exact du plugin à afficher dans "Ajouter des plugins" est :
"Médias compatibles responsive et modifiés" ;)



Plan du site Contact Mentions légales Espace rédacteurs squelette RSS

2009-2018 © Escal V4 - Tous droits réservés
Réalisé sous SPIP
Habillage ESCAL 4.0.99