Transformez votre blog en Photoblog

Avec PiwigoPress 2.2.1, vous allez mettre en valeur les photos de votre galerie.
Et pour cela quelques clics suffisent.

Pour commencer, je vous invite à découvrir ici l’usage d’une miniature en Lettrine. Ce qui se réalise en plaçant le curseur en début de texte, en sélectionnant une miniature carrée et en précisant les Class suivantes: « img-drop-cap ». La miniature carrée vous permettra de conserver de l’espace pour le texte, la Class img-drop-cap conserve votre texte dans l’alignement de votre image tel un article de presse écrite. Le plus important restera le positionnement du curseur au moment de la génération et insertion. Vous devrez obtenir sous votre éditeur de WordPress quelque chose comme ceci:

[PiwigoPress id=9091 url="http://www.vdigital.org/piwigo/" size='sq' class="img-drop-cap"] Pour commencer, je vous invite à découvrir ici …

Découvrons maintenant quelques une des autres possibilités de PiwigoPress.

Quelques une des « Class » CSS livrées en standard (pour certain la prise en compte ne se réalisera qu’à partir de navigateurs récents) :

  • img-shadow : Bordure de 1px, à 6px de l’image avec une ombre discrète, notez que le pourtour de l’image sera transparent.
  • img-white-border : en complément de la « Class » précédente le pourtour devient blanc.
  • img-soft-corner : les angles seront légèrement arrondis.
  • img-rounded : les angles seront visiblement arrondis.
  • img-drop-cap : le positionnement sera en « Lettrine ».
  • img-drop-cap-right : le positionnement sera bien en « Lettrine » mais à droite.
  • center : Positionnement centré.
  • right : Positionnement à droite.
  • left : Positionnement à gauche.

En démonstration, cela donnera :

avec [PiwigoPress id=9093 url='http://www.vdigital.org/piwigo/' size='sq' class='img-shadow img-drop-cap'] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt pulvinar est, non posuere justo euismod ac. Ut eros tellus, bibendum commodo sollicitudin et, scelerisque quis orci. Integer et lorem et enim sodales fringilla. Ut sed lectus in purus laoreet vestibulum. Maecenas volutpat, arcu quis vestibulum euismod, mi ante pellentesque sapien, et venenatis odio ligula sed dui. Phasellus scelerisque libero ac lectus vehicula tincidunt.

En commençant par [PiwigoPress id=9092 url='http://www.vdigital.org/piwigo/' size='sq' class='img-shadow img-drop-cap-right'] Nam bibendum nisl dui. Proin vitae quam tellus, vitae ultricies lacus. Integer scelerisque ornare nulla, sed accumsan sem ornare a. Nunc lacinia elementum ante, a fermentum ante dictum consequat. Aenean ut neque odio, non fermentum arcu. Nunc posuere massa quis nulla imperdiet sollicitudin. Vivamus accumsan nunc eu dolor rutrum vitae euismod nisi sodales. Phasellus cursus eros ut augue ultrices dapibus. Aliquam tempor erat id lorem ornare at molestie arcu porta. Maecenas bibendum est scelerisque quam vehicula nec interdum leo tempus. Phasellus congue nisi ut neque suscipit hendrerit.

avec cette fois ceci: [PiwigoPress id=9090 url='http://www.vdigital.org/piwigo/' size='th' class='img-shadow img-drop-cap img-white-border img-soft-corner'] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt pulvinar est, non posuere justo euismod ac. Ut eros tellus, bibendum commodo sollicitudin et, scelerisque quis orci. Integer et lorem et enim sodales fringilla. Ut sed lectus in purus laoreet vestibulum. Maecenas volutpat, arcu quis vestibulum euismod, mi ante pellentesque sapien, et venenatis odio ligula sed dui. Phasellus scelerisque libero ac lectus vehicula tincidunt. Mauris et risus dui, et accumsan elit. Nullam a dolor purus. Suspendisse at odio id lacus venenatis accumsan. Integer non velit sem, eget condimentum sem.

Oublions les lettrines pour un modèle un peu plus grand comme ceci : [PiwigoPress id=9091 url='http://www.vdigital.org/piwigo/' size='sm' class='img-shadow img-white-border img-rounded']

Pour les thèmes ayant un fond très clair voire blanc, l’exemple suivant n’aurait que peut d’intérêt, alors donnons un fond teinté temporairement à fin d’observer la bordure.

Dernier exemple [PiwigoPress id=9095 url='http://www.vdigital.org/piwigo/' size='sm' class='img-white-border img-soft-corner center']

A vous de jouer…

Un article illustré par des images de la cathédrale Saint-Théodorit et sa tour Fenestrelle, les galeries de la place aux Herbes à Uzès (Gard) et vous l’aurez reconnu le célèbre « Pont du Gard ».

3 réflexions sur “ Transformez votre blog en Photoblog ”

  1. Très intéressant ! Je n’ai juste pas compris ce que voulait dire ces 2 phrases enchaînées (ou plutôt la 1ère des 2).
    « Pour commencer, je vous invite à découvrir ici … Découvrons maintenant quelques une des autres possibilités de PiwigoPress. »

Les commentaires sont fermés.