Spip et foundation interchange : comment inclure des bouts de squelette small, medium, large ?

Vinc · Septembre 14, 2015, 6:22

bonjour,

Quelqu'un aurait une idée pour utiliser au mieux interchange de Foundation (notamment avec des INCLURE de squelettes) ?

Interchange permet de ne charger un contenu qu'en fonction du périphérique utilisé : par exemple une petite image sur un mobile et une image plus grande sur un écran large.

J'ai bien dit "chargé" (il ne s'agit pas de visibilité). Cela permet vraiment d'optimiser une page pour mobile par exemple).

http://foundation.zurb.com/docs/components/interchange.html

Je ne vois pas comment lui dire d'aller prendre tel bout de squelette ou tel autre (et, ce , en gardant l'environnement du squelette général). Car les inclure sont calculés avant... Une balise #CHEMIN (mais alors comment passer l'environnement ?) ?

Pour en savoir plus sur interchange :
http://davidl.fr/blog/foundation5-interchange.html

Merci,

Bonne soirée,

Vincent

*

nicod · Septembre 14, 2015, 8:12

Le 14/09/2015 20:22, Vincent a écrit :

bonjour,

Quelqu'un aurait une idée pour utiliser au mieux interchange de
Foundation (notamment avec des INCLURE de squelettes) ?

Interchange permet de ne charger un contenu qu'en fonction du
périphérique utilisé : par exemple une petite image sur un mobile et une
image plus grande sur un écran large.

J'ai bien dit "chargé" (il ne s'agit pas de visibilité). Cela permet
vraiment d'optimiser une page pour mobile par exemple).

Interchange | Foundation Docs

Je ne vois pas comment lui dire d'aller prendre tel bout de squelette ou
tel autre (et, ce , en gardant l'environnement du squelette général).
Car les inclure sont calculés avant... Une balise #CHEMIN (mais alors
comment passer l'environnement ?) ?

Pour en savoir plus sur interchange :
http://davidl.fr/blog/foundation5-interchange.html

Hello,

à mon avis il faut regarder du côté de Zcore et var_zajax :

Sachant que le chargement des blocs Z peut être déclenché en javascript, il doit y avoir moyen de jouer avec ça.

A l'occasion, si tu aboutis à quelque chose d'intéressant ça peut être l'occasion d'un retour d'expérience.

--
nicod_

Brice_Boucard · Septembre 15, 2015, 5:51

Bonjour,

Pour ce qui est du chargement des images en fonction de la taille du terminal, j'ai utilisé ces derniers temps le plugin Filtre image_responsive plutôt riche.

Sinon quand on cherche de la doc sur Ajax on tombe généralement sur un plugin qui doit s'appeler plus ou moins ajaxload et qui opère le chargement via javascript (enfin d'après mes souvenirs).
A+

--
Brice Boucard
GéoCulture - Le Limousin vu par les artistes
AVEC Limousin

Le 14 sept. 2015 à 20:23, Vincent <cbvinc742000@yahoo.fr> a écrit :

bonjour,

Quelqu'un aurait une idée pour utiliser au mieux interchange de Foundation (notamment avec des INCLURE de squelettes) ?

Interchange permet de ne charger un contenu qu'en fonction du périphérique utilisé : par exemple une petite image sur un mobile et une image plus grande sur un écran large.

J'ai bien dit "chargé" (il ne s'agit pas de visibilité). Cela permet vraiment d'optimiser une page pour mobile par exemple).

http://foundation.zurb.com/docs/components/interchange.html

Je ne vois pas comment lui dire d'aller prendre tel bout de squelette ou tel autre (et, ce , en gardant l'environnement du squelette général). Car les inclure sont calculés avant... Une balise #CHEMIN (mais alors comment passer l'environnement ?) ?

Pour en savoir plus sur interchange :
http://davidl.fr/blog/foundation5-interchange.html

Merci,

Bonne soirée,

Vincent

*

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

Vinc · Septembre 15, 2015, 6:51

Bonjour

Merci pour ces pistes. Mais j'aurai préféré une solution sans ajax , sans zcore. Un truc qui n'utiliserait que les boucles et les squelettes classiques.
C'est possible facilement pour les images (il suffit d'utiliser le #LOGO_ARTICLE avec des filtres recadrer_image et redimensionner_image (de mémoire) dans chaque partie du code interchange, par exemple.Pour les squelettes .html c'est une toute autre affaire ...

Vincent

Le 15/09/2015 07:51, Brice Boucard a écrit :

Bonjour,

Pour ce qui est du chargement des images en fonction de la taille du terminal, j'ai utilisé ces derniers temps le plugin Filtre image_responsive plutôt riche.

Sinon quand on cherche de la doc sur Ajax on tombe généralement sur un plugin qui doit s'appeler plus ou moins ajaxload et qui opère le chargement via javascript (enfin d'après mes souvenirs).
A+

--
Brice Boucard
GéoCulture - Le Limousin vu par les artistes
AVEC Limousin

Le 14 sept. 2015 à 20:23, Vincent <cbvinc742000@yahoo.fr> a écrit :

bonjour,

Quelqu'un aurait une idée pour utiliser au mieux interchange de Foundation (notamment avec des INCLURE de squelettes) ?

Interchange permet de ne charger un contenu qu'en fonction du périphérique utilisé : par exemple une petite image sur un mobile et une image plus grande sur un écran large.

J'ai bien dit "chargé" (il ne s'agit pas de visibilité). Cela permet vraiment d'optimiser une page pour mobile par exemple).

Interchange | Foundation Docs

Je ne vois pas comment lui dire d'aller prendre tel bout de squelette ou tel autre (et, ce , en gardant l'environnement du squelette général). Car les inclure sont calculés avant... Une balise #CHEMIN (mais alors comment passer l'environnement ?) ?

Pour en savoir plus sur interchange :
http://davidl.fr/blog/foundation5-interchange.html

Merci,

Bonne soirée,

Vincent

*

_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net

Infos et archives : http://listes.rezo.net/mailman/listinfo/spip
Discuter chez rezo.net

Documentation de SPIP : http://www.spip.net/

Irc : de l'aide à toute heure : http://spip.net/irc

nicod · Septembre 15, 2015, 10:45

Le 15/09/2015 08:51, Vincent a écrit :

Bonjour

Merci pour ces pistes. Mais j'aurai préféré une solution sans ajax ,
sans zcore. Un truc qui n'utiliserait que les boucles et les
squelettes classiques.
C'est possible facilement pour les images (il suffit d'utiliser le
#LOGO_ARTICLE avec des filtres recadrer_image et redimensionner_image
(de mémoire) dans chaque partie du code interchange, par exemple.Pour
les squelettes .html c'est une toute autre affaire ...

Tu as essayé en utilisant des urls de squelettes dans les data-interchange ?

--
nicod_

Vinc · Septembre 15, 2015, 6:52

Merci à tous !

Nicod ta solution était la bonne !

Je vous mets les boucles si cela peut servir à quelqu'un d'autre :
--------
la boucle interchange pour le contenu sur le squelette article.html (associé à des squelettes menusmall.html , menumedium.html et menularge.html... )

---------
exemple de squelette pour menusmall.html :
<BOUCLE_article(ARTICLES){id_article}>
<h2>#TITRE</h2>
#TEXTE
</BOUCLE_article>

-------------
La boucle avec interchange pour les images (le logo d'un article ici) :

<BOUCLE_art(ARTICLES){id_article}>
<img data-interchange="\[ [(#LOGO_ARTICLE|image_reduire{x,60}|extraire_attribut{src})],\(small\)\], \[ [(#LOGO_ARTICLE|image_reduire{x,250}|extraire_attribut{src})],\(medium\)\], \[[(#LOGO_ARTICLE|image_reduire{x,500}|extraire_attribut{src})], \(large\)\]">

<a href="#URL_ARTICLE">Voir l'article </a>
</BOUCLE_art>

Voilà !

Bonne soirée,

Vincent

Le 15/09/2015 12:45, nicod_ a écrit :

Le 15/09/2015 08:51, Vincent a écrit :

Bonjour

Merci pour ces pistes. Mais j'aurai préféré une solution sans ajax ,
sans zcore. Un truc qui n'utiliserait que les boucles et les
squelettes classiques.
C'est possible facilement pour les images (il suffit d'utiliser le
#LOGO_ARTICLE avec des filtres recadrer_image et redimensionner_image
(de mémoire) dans chaque partie du code interchange, par exemple.Pour
les squelettes .html c'est une toute autre affaire ...

Tu as essayé en utilisant des urls de squelettes dans les
data-interchange ?

<div data-interchange="[spip.php?page=small, (default)],
[spip.php?page=large, (large)]">