Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

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

- Auteur : Brunofaisart

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

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 :

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Alice 06/12/2012 18:12

Merci de cette présentation précise, tout cela sera utile plus tard.
Pour le moment, je ne touche plus à rien : pas le temps de tester et, d'autre part, mon thème (Glamour) a disparu depuis des semaines et ne réapparaît pas.

Iv-oam 06/12/2012 14:00

Salut,
j'ai fait un test sur mob blog pour afficher plus d'images dans la liste d'articles, ça marche bien : http://iv-oam.overblog.com/liste
Merci pour ces infos

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...