AgC 3075 [Infos-Interm.]

Visiteurs connectés : 0

| Liens | ** Europe ** | - | Par thèmes | Plan du site | Glossaire |
| Suivre la vie du site RSS 2.0 | Liens morts | info visites 138924 | Agenda | Mentions Légales |
Accueil > Audiovisuel > Images > Spip : Dimensionnement d’une image ..

Spip : Dimensionnement d’une image ..

mardi 2 mars 2010, par AgC | Imprimer Imprimer |
Dernière modification : jeudi 20 janvier 2011 à 21:29

Cet article a été vu 1789 fois.


Version actuelle de ce site, Spip : v3.0.22 [22914]

Dimensionnement d’une image dans spip ..

En complément de l’article « Dimensionnement d’une image », ci-dessous l’adaptation de la réponse faite par Olivier Berger du 7 décembre 2008 18:36 :

- Introduction et pré-requis -

L’image originale fait « 800 x 528 » que je transforme en « 400 x 150 » ( .. volontairement déformée pour l’exemple .. ).

Pré-requis à la date de publication : spip 2.0.9 ( Voir ci-dessus la version actuelle de Spip ..) ,
- Utilisation de la balise « <img512|center|largeur=400|hauteur=150> ».

A noter que pour cet exemple j’ai fait une copie du fichier « img.html » trouvé dans le dossier « Prive », .. copie que j’ai placé dans « mes_squelettes/modeles/img.html » [1] et en remplaçant dans ce fichier comme indiqué par Olivier, soit :
- modifier pour définir : <img src='#URL_DOCUMENT'[ width="(#ENV{largeur})"][ height="(#ENV{hauteur})"]
- à la place de : <img src='#URL_DOCUMENT'[ width="(#LARGEUR)"][ height="(#HAUTEUR)"] ... :

- Le résultat -

Image originale 800x528
Cliquez sur l’image pour voir l’originale ..

Ci-dessous, l’ensemble du code du fichier ajouté dans
« mes_squelettes/modeles/img.html » :

*En rouge ci-dessous le code changé ..

<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

]
[(#SET{
        image,
                #MODE|match{'image|vignette'}
                |sinon{#ENV{embed}}
                |?{' '}
})][

        (#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});[ width:(#LARGEUR)px;]']>
[<a href="(#ENV{lien})"[ class="(#ENV{lien_class})"]>]<img src='#URL_DOCUMENT'

[ width="(#ENV{largeur})"][ height="(#ENV{hauteur})"]

alt="[(#TITRE|texte_backend)]"[ title="(#TITRE|texte_backend)"] />[(#ENV{lien}|?{</a>})]</span>
][

        (#REM) sinon logo document + lien + alt + title etc

][(#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});[ width:(#LOGO_DOCUMENT||largeur)px;]']><a href="[(#ENV{lien}|sinon{#URL_DOCUMENT})]"[ (#ENV{lien}|?{'',type="#MIME_TYPE"})][ title="(#TITRE|texte_backend)"]>[(#LOGO_DOCUMENT||inserer_attribut{alt,#TITRE|strlen|?{#TITRE {#TYPE_DOCUMENT},#TYPE_DOCUMENT}})]</a></span>
]</BOUCLE_document>

Télécharger télécharger Télécharger un fichier :

- pour Mac, faire contrôle + clic, et choisir « Télécharger le fichier lié .. »

- pour PC, faire un clic droit, et choisir « Enregistrer le lien sur votre disque dur, ou quelque chose d’approchant .. »

Télécharger sur DL.free :

- Réseaux Free : Cliquez seulement sur le lien, une nouvelle fenêtre vide s’ouvre et le téléchargement commence ..

- Autres réseaux : Cliquez seulement sur le lien, une nouvelle fenêtre s’ouvre et cliquez sur le lien ( voir l’image .. ).
le fichier :
img.html ou img.html.zip

Dimensionnement proportionnel d’une image dans spip ..

Suite à la question " Dimensionnement d’une image - 8 mars 22:30 - par bennett

En gardant le même fichier décrit ci-dessus, il est possible de créer une image proportionnelle en utilisant cette balise :
<img512|right|largeur=250|hauteur>

- Le résultat -

Image originale 800x528
Il semble donc qu’il suffise d’indiquer « |hauteur », sans y mettre le signe « = » et la dimension de celle-ci.

Soit la balise :
<img512|right|largeur=250|hauteur>
—>

Image originale 800x528
<— Ci-contre un exemple avec une largeur de 180 pixels, soit la balise :
<img512|left|largeur=180|hauteur>

Articles connexes :

- <— Dimensionnement d’une image - SPIP Forums

- —> Basse manoeuvre, dimensionnement en javascript abandonné ( résultat pas évident après mise à jour de spip ... ), au profit de la balise « (#TEXTE|image_reduire{480,0}) » inclus dans mon squelette « article.html » ...

- —> Les filtres de SPIP - SPIP.net, et notamment l’explication du filtre « |image_reduire » dans la balise « #TEXTE » apposé dans vos squelettes qui délimite quelque soit la grandeur de l’image, une taille maximum définie par cette balise.
Bien entendu une image plus petite est affichée à sa taille d’origine.
A noter, que malgré tout il vaut mieux travailler ses photos-images avant de les charger sur le site pour des questions d’accessibilité et de fluidié .. ( un poids important est un temps de téléchargement téléchargement Télécharger un fichier :

- pour Mac, faire contrôle + clic, et choisir « Télécharger le fichier lié .. »

- pour PC, faire un clic droit, et choisir « Enregistrer le lien sur votre disque dur, ou quelque chose d’approchant .. »
de la page qui se rallonge, pensons aux internautes qui sont en bas débit ou moyen .. ).

- —> Spip : Intégration d’une bande son ou vidéo automatique avec le plugin Lecteur_multimedia ..

- —> Couteau KISS - SPIP-Contrib, et notamment il limite le poids maximum de téléchargement téléchargement Télécharger un fichier :

- pour Mac, faire contrôle + clic, et choisir « Télécharger le fichier lié .. »

- pour PC, faire un clic droit, et choisir « Enregistrer le lien sur votre disque dur, ou quelque chose d’approchant .. »
à partir du dossier « upload » actuellement dans le dossier tmp, .. accessible aux rédacteurs par le menu « Ajouter une image ou un document » au moment de l’écriture de l’article en déroulant celui-ci ; et compatible avec les versions spip 2.0 à 2.1 .
Inconvénients possibles .. : ce plugin limite à priori tous les téléchargements de tous les fichiers ( certes, pour les images qui ne devraient faire normalement que quelques centaines de kilo-octets au grand maximun, .. mais aussi les sons ou vidéos qui peuvent faire plusieurs méga-octets.
A voir ou essayer suivant ses besoins .. il y a plusieurs réglages .. , voir l’administration des « Images et documents » ci-dessous dans le portfolio —>



info portfolio - Document téléchargeable téléchargeable
téléchargeables
Télécharger un fichier :

- pour Mac, faire contrôle + clic, et choisir « Télécharger le fichier lié .. »

- pour PC, faire un clic droit, et choisir « Enregistrer le lien sur votre disque dur, ou quelque chose d’approchant .. »
quand l'image est ouverte ...

Diaporama manuel : Vous pouvez vous déplacer de photo à photo quand l'une d'elle est ouverte avec les flèches du clavier ( Gauche ou Haut pour précédante .. - Droite ou Bas pour photo suivante .. ). Cliquez sur la croix en bas à droite pour agrandir l'image au maximum. Pour fermer une image cliquer sur celle-ci. * JavaScript doit être activé sur votre navigateur


Couteau KISS - Administration ( copie ) : Images et documents

Notes

[1- Dans mon cas mes_squelettes sont placés dans plugins/mes_squelettes/..

A priori on peut aussi le placer dans « squelettes-dist/modeles/.. », que personnellement je ne conseillerais pas car vous risquez de perdre ce modèle au moment d’une mise à jour de spip ...

  • Liste relative au Champ d’application de l’Annexe VIII mise à jour le 06/05/11


    Liste relative au Champ d’application de l’Annexe VIII Arrêté du 30 mars 2009 portant agrément de l’avenant n° 1 à l’annexe VIII au règlement général annexé à la convention du 18 janvier 2006 relative à l’aide au retour à l’emploi et à l’indemnisation du chômage mise à jour le 6 mai 2011 Vous trouverez ci-joint la liste des fonctions inscrite à l’annexe 8 pour lesquelles vous pouvez être engagé, et suivant la Nomenclature (...)

    Lire la suite ..

  • Déni de démocratie et laïcité en danger : le Traité de Lisbonne ratifié par l’Assemblée et le Sénat ..


    Déni de démocratie et laïcité en danger : le Traité de Lisbonne ratifié par l’Assemblée et le Sénat .. Déni de démocratie, forfaiture et incompétence face aux citoyens !?. Normalement, les parlementaires sont là pour représenter le peuple, non pour se substituer à lui. Et ce n’est pas à priori ce qui se pratique dans nos parlements en France, .. et ce n’est pas non plus la direction que prend l’Europe. Quelques exemples : (...)

    Lire la suite ..

  • Traité modificatif ou traité de Lisbonne, Traité dit simplifié ..


    Traité modificatif ou Traité de Lisbonne - Traité dit simplifié !.. Versions consolidées du traité sur l’Union européenne et du traité sur le fonctionnement de l’Union européenne au 30/03/2010 Bientôt les municipales et cantonales, et vous aspirez à devenir responsable de votre ville : « Vous savez que l’Union Européenne, au travers de ce traité, favorise les accords avec l’OMC. Donc si vous signez ou cautionnez celui-ci, (...)

    Lire la suite ..

  •  
    Retour en haut de page

     

    2007-2017 - AgC 3075 [Infos-Interm.]
    | SPIP | | |
    | Actualités | A la une | Audiovisuel | Documents | Rendez-vous en Régions | Société | Autres-actualités | Liens | ** Europe ** | - | Par thèmes | Plan du site | Glossaire |
    | Suivre la vie du site RSS 2.0 | Liens morts | info visites 138924 | Agenda | Mentions Légales |