Overblog Kiwi : gérer les sections, images, vidéos, liens en toute indépendance (3)

06/12/2012 18:12

Comme convenu je continue cette découverte des possibilités d'affichage dans vos thèmes des éléments constitutifs d'un article ou d'une page.

Au programme aujourd'hui extraire les images et les affcicher comme et où on le désire sur son thème.

Dans mon précédent billet, je vous ai présenté une manière simpliste mais formelle d'affichage du contenu texte uniquement, ici je vais récupérer toutes les photos/images d'un post pour pouvoir les afficher une à une. Il me faudra tester dans l'itération parcourant l'ensemble des sections, tester uniquement celles de type "image", comme dans le morceau de code ci-dessous :

Afficher toutes les images d'un article ou d'une page'


{%list Post.Sections%}
    {% if Section.Type=="images"%}
		{%list Section.Images%}
			<a href="{{Image.Url}}" class="ob-link-img">
				<img src="{{Image.Url}}"/>
			</a>
		{%endlist%}
	{%endif%}
{%endlist%}

Bien entendu nous pouvons forcer la taille et la disposition de nos images sur notre thème en utilisant des selecteurs Twig et un style CSS. Le code ci-dessous vous affichera toutes vos images sous formes de miniatures de 96pixels par 96 pixels espacées de 8 pixels chacunes en vertical et horizontal, une bordure noire de 1 pixel et une marge intérieure de 2 pixels.

miniatures de 96pixels par 96 pixels espacées de 8 pixels chacunes en vertical et horizontal, une bordure noire de 1 pixel et une marge intérieure de 2 pixels

    
{%list Post.Sections%}
{% if Section.Type=="images"%}
		{%list Section.Images%}
			<a href="{{Image.Url}}" class="ob-link-img">
				<img src="{{Image.Url|resize(96,96)|crop}}"
				style="dispaly:block;float:left;margin:8px;border:1px solid black;padding:2px;"/>
			</a>
		{%endlist%}
	{%endif%}
{%endlist%}

Avec la même technique d'extraction des images, je vous proposerais dans mon prochain post une méthode pour créer un diaporama dynamique avec différents paaramètres de transition (fondu, glisser, mosaïque etc.)

Voir aussi :

Overblog Kiwi : gérer les sections, images, vidéos, liens en toute indépendance (1) -

Je commence aujourd'hui une série de posts concernant la récupération des différents éléments constitutifs d'un article ou d'une page : à savoir le texte, le html, la vidéo, les images, les...

http://photonautesassocies.overblog.com/overblog-kiwi-gerer-les-sections-images-videos-liens-en-toute-independance-1

Overblog Kiwi : gérer les sections, images, vidéos, liens en toute indépendance (2) -

Pour commencer, je vais insister sur la structure interne d'un article ou d'une page. Les éléments constitutifs d'un article ou page. Un article est composé de plusieurs sections. Ces sections ...

http://photonautesassocies.overblog.com/overblog-kiwi-gerer-les-sections-images-videos-liens-en-toute-independance-2