Commit 8eed9675 authored by L0r3nt's avatar L0r3nt

Mise en place du filtre image_responsive sur les images

parent 642b8463
.formulaire_spip ul { list-style-type: none; }
.clear { clear: both; }
\ No newline at end of file
.clear { clear: both; }
.clearfix:after {
content: ""; /* Important, sinon l'élément n'est pas généré. */
display: table;
clear: both;
}
\ No newline at end of file
......@@ -9,11 +9,11 @@
]
</div>
[<div class="#EDIT{chapo} chapo surlignable">(#CHAPO|image_reduire{500,*})</div>]
[<div class="#EDIT{texte} texte surlignable clearfix">(#TEXTE|image_reduire{500,*})</div>]
[<div class="#EDIT{chapo} chapo surlignable">(#CHAPO)</div>]
[<div class="#EDIT{texte} texte surlignable clearfix">(#TEXTE)</div>]
[<hr /><p class="#EDIT{hyperlien} hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
[<div class="#EDIT{ps} ps surlignable"><hr />(#PS|image_reduire{500,*})</div>]
[<div class="#EDIT{ps} ps surlignable"><hr />(#PS)</div>]
[(#REM) Gestion du portfolio et des documents ]
[(#INCLURE{fond=inclure/documents,id_article, env})]
......
<BOUCLE_doc (DOCUMENTS) {id_document} {tout}>
[<!--(#REM)
Modele pour <doc> en dl/dt/dd
cf. http://pompage.net/pompe/listesdefinitions/
La largeur de la legende est egale a la largeur de l'image
avec un minimum de 120px, et un maximum de 350px.
Dans le cas d'une simple image (mode=image), on affiche
le document lui-meme, sans lien de telechargement
-->]
[(#ENV{mode_force,#MODE}|=={image}|oui)
[(#REM) #SET{fichier,#URL_DOCUMENT} ]
#SET{width,#LARGEUR}
#SET{height,#HAUTEUR}
#SET{url,#ENV{lien}}
]
[(#ENV{mode_force,#MODE}|=={image}|non)
[(#REM) [(#SET{fichier,[(#LOGO_DOCUMENT|extraire_attribut{src})]})] ]
[(#SET{width,[(#LOGO_DOCUMENT|extraire_attribut{width})]})]
[(#SET{height,[(#LOGO_DOCUMENT|extraire_attribut{height})]})]
#SET{url,#ENV{lien,#URL_DOCUMENT}}
][<!--(#REM)
Si largeur ou hauteur fournit en parametre, redimensionner
-->][
(#ENV{largeur,0}|ou{#ENV{hauteur,0}})
[(#REM) #SET{fichier,#GET{fichier}|image_reduire{#ENV{largeur,0},#ENV{hauteur,0}}} ]
#SET{width,#GET{fichier}|largeur}
#SET{height,#GET{fichier}|hauteur}
#SET{fichier,#GET{fichier}|extraire_attribut{src}}
]
[(#SET{title,[(#TYPE_DOCUMENT) - [(#TAILLE|taille_en_octets)]]})]
[(#MEDIA|=={image}|oui) #SET{title,#TITRE|sinon{#GET{title}}]
<dl class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[
style='float:(#ENV{align}|match{left|right});']>
<dt>[<a href="(#GET{url})"[
class="(#ENV{lien_class})"] title='[(#GET{title}|attribut_html)]'[
(#ENV{lien}|?{'',type="#MIME_TYPE"})]>]
[(#ENV{largeur,0}|ou{#ENV{hauteur,0}}|?{
[(#ENV{mode_force,#MODE}|=={image}|?{
[(#VAL{<img src='[(#URL_DOCUMENT|image_reduire{#ENV{largeur,0},#ENV{hauteur,0}}|extraire_attribut{src})]'[ width="(#GET{width})"][ height="(#GET{height})"] alt="#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]" />}|image_responsive{800})]
,
[(#VAL{<img src='[(#LOGO_DOCUMENT|image_reduire{#ENV{largeur,0},#ENV{hauteur,0}}|extraire_attribut{src})]'[ width="(#GET{width})"][ height="(#GET{height})"] alt="#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]" />}|image_responsive{800})]
})]
,
[(#ENV{mode_force,#MODE}|=={image}|?{
[(#VAL{<img src='#URL_DOCUMENT'[ width="(#GET{width})"][ height="(#GET{height})"] alt="#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]" />}|image_responsive{800})]
,
[(#VAL{<img src='[(#LOGO_DOCUMENT|extraire_attribut{src})]'[ width="(#GET{width})"][ height="(#GET{height})"] alt="#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]" />}|image_responsive{800})]
})]
})]
[(#GET{url}|?{</a>})]</dt>[
<dt class='#EDIT{titre} spip_doc_titre'[ style='width:(#GET{width}|min{350}|max{120})px;']><strong>(#TITRE)</strong></dt>][
<dd class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</dd>]
</dl>
</BOUCLE_doc>
#FILTRE{trim}
\ No newline at end of file
<BOUCLE_tous (DOCUMENTS types_documents) {id_document=#ID} {tout}>[
(#REM) Cas <imageXX> : equivalent a <imgXX> pour une image en mode image
][(#INCLUS|=={image}|et{#ENV{emb,''}|non}|oui)
<span class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[
style='float:(#ENV{align}|match{left|right});']>[
<a href="(#ENV{lien})"[
class="(#ENV{lien_class})"]>]<img src='#URL_DOCUMENT'[
width="(#LARGEUR|?{#LARGEUR})"][
height="(#HAUTEUR|?{#HAUTEUR})"][
title="(#TITRE|attribut_html)"]
alt="[(#TITRE|attribut_html)]" />[(#ENV{lien}|?{</a>})]</span>
][
(#REM) Cas <embXX> : on est appele ici avec emb=' ' : on veut la legende
equivalent a un <docXX> pour une image en mode image
][(#INCLUS|=={image}|et{#ENV{emb,''}|oui}|oui)
#SET{fichier,#URL_DOCUMENT}
#SET{width,#LARGEUR}
#SET{height,#HAUTEUR}
#SET{url,#ENV{lien}}#GET{fichier}
<dl class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[
style='float:(#ENV{align}|match{left|right});[width:(#GET{width}|max{120})]px;']>
<dt>[<a href="(#GET{url})"[ class="(#ENV{lien_class})"] title='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]'[ type="(#ENV{lien}|?{#ENV{lien_mime},#MIME_TYPE})"]>][(#VAL{<img src='#GET{fichier}' width='#GET{width}' height='#GET{height}' alt='#TYPE_DOCUMENT - [(#TAILLE|taille_en_octets|texte_backend)]' />}|image_responsive{800})][(#GET{url}|?{</a>})]</dt>[
<dt class='#EDIT{titre} spip_doc_titre'[ style='width:(#GET{width}|min{350}|max{120})px;']><strong>(#TITRE)</strong></dt>][
<dd class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{350}|max{120})px;']>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</dd>]
</dl>
][
(#REM) Cas des images qu'il faut embed (svg)
][
(#INCLUS|=={embed}|oui)
<div class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})]'[
style='[(#ENV{align}|match{^(left|right)$}|?{' '})float:#ENV{align};] (#ENV{align,center}|=={center}|?{'',' '})']>
<object data='#URL_DOCUMENT'
type='#MIME_TYPE'[
width='(#ENV{largeur}?{'', #LARGEUR})'][
height='(#ENV{hauteur}?{'', #HAUTEUR})']
[(#ENV*|env_to_attributs)] >
<param name='src' value='#URL_DOCUMENT' />
[(#ID_DOCUMENT|appliquer_filtre{#MIME_TYPE})]
</object>[
<div class='spip_doc_titre'><strong>(#TITRE)</strong></div>
][
<div class='spip_doc_descriptif'>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>
]</div>]
</BOUCLE_tous>
<BOUCLE_document (DOCUMENTS) {id_document} {mode?} {tout}>
[(#REM)
Modele pour <img>
Si on est en mode "image" ou "vignette", ou appele avec embed=oui,
on affiche l'image complete ; sinon le logo
Si un lien est passe #ENV{lien} on ajoute le a href
ou on truque le #URL_DOCUMENT
Si une code de langue est passe #ENV{langue} ex: <img12|langue=en>
on ajoute l'attribut lang la balise img et eventuellement sur la balise a
Dans le cas mode "image ou vignette", le contenu de l'attribut
alt et title se construit selon le schema suivant :
- prend la valeur de alt passe en environnement par le biais
d'un parametre sur la balise ex: <img12|alt=xxx>
- sinon on prend le titre
- sinon si #ENV{lien} est passe on prend #ENV{lien} ou Document si lien vers #URL_DOCUMENT
- sinon alt vide
Dans le cas mode "document", le contenu de l'attribut
alt et title se construit selon le même schema a ceci pres
qu'on ajoute #TYPE_DOCUMENT - #TAILLE
sauf si #ENV{lien} est passe
]
[(#SET{
image,
#ENV{mode_force,#MODE}|match{'image|vignette'}
|sinon{#ENV{embed}}
|oui
})][
(#REM) image complete ?
][(#GET{image})
<span class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[
style='float:(#ENV{align}|match{left|right});']>
[<a href="(#ENV{lien})"[ class="(#ENV{lien_class})"]>][(#VAL{<img src='#URL_DOCUMENT'[ width="(#LARGEUR)"][ height="(#HAUTEUR)"] alt="[(#TITRE|texte_backend)]"[ title="(#TITRE|texte_backend)"] />}|image_responsive{800})][(#ENV{lien}|?{</a>})]</span>
][
(#REM) sinon logo document + lien + alt + title etc
][(#GET{image}|non)
[(#REM) [(#SET{fichier,[(#LOGO_DOCUMENT|extraire_attribut{src})]})] ]
[(#SET{width,[(#LOGO_DOCUMENT|extraire_attribut{width})]})]
[(#SET{height,[(#LOGO_DOCUMENT|extraire_attribut{height})]})]
<span class='spip_document_#ID_DOCUMENT spip_documents[ spip_documents_(#ENV{align})][ (#ENV{class})] spip_lien_ok'[
style='float:(#ENV{align}|match{left|right});[ width:(#GET{width})px;]']><a href="[(#ENV{lien}|sinon{#URL_DOCUMENT})]"[
(#ENV{lien}|?{'',type="#MIME_TYPE"})][ title="(#TITRE|texte_backend)"]>[(#VAL{<img src='[(#LOGO_DOCUMENT|extraire_attribut{src})]'[ width="(#GET{width})"][ height="(#GET{height})"] alt="[(#TITRE|strlen|?{#TITRE {#TYPE_DOCUMENT},#TYPE_DOCUMENT}|attribut_html)]" />}|image_responsive{800})]</a></span>
]</BOUCLE_document>
<paquet
prefix='hyperspace'
categorie='squelette'
version='2.0.5'
version='2.0.6'
etat='stable'
compatibilite="[3.0.0;3.1.*]"
logo="hyperspace-32.png"
......@@ -11,5 +11,7 @@
<credit lien="http://twitter.com/n33co">Adaptation du travail de @n33co</credit>
<licence lien="http://html5up.net/license">Creative Commons Attribution 3.0 License</licence>
<menu nom="configurer_hyperspace" titre="Hyperspace" parent="menu_squelette" icone="images/hyperspace-16.png" />
<necessite nom="medias" />
<necessite nom="image_responsive" />
</paquet>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment