Aoto

Squelette de présentation de photos avec FancyBox 3

Présentation

Aoto est un squelette de présentation de photographies.
Il est idéal pour présenter un portfolio de photos, de dessins, ....

Il utilise la fenêtre modale Fancybox 3 qui est particulièrement adaptée aux présentation de photos avec son lecteur intégré.

  • La page d’accueil est minimale et affiche une image en fond de façon aléatoire
  • Les pages courantes affichent une photo ou une planche contact
  • Le squelette fonctionne aussi très bien sur smartphones (gestion du glisser, des zooms, ...)

Aperçu

Exemple de site basé sur Aoto
https://www.pg.photos/

Page d’accueil

Page article

Installation

A l’installation, le plugin crée aussi 3 champs extras pour gérer les options sur les rubriques

Le plugin Favicon peut être installé en complément.

Lorsque votre site passe en production, il est recommandé :

  • d’activer la compression des fichiers Javascript et CSS pour avoir un site rapide à charger.
  • de désactiver la boite multimédia fournie par SPIP que l’on n’utilise pas.

Configuration

Le squelette est configurable via le menu squelettes

Choix des contenus (liens vers les réseaux sociaux, choix des articles alimentant les photos de la page d’accueil)

Liens vers les pages démo

Le menu est constitué des rubriques à la racine listées par numéros suivi des éventuels icônes des réseaux sociaux.
Exemple: 10. Portrait, 20. Paysage, 80. Contact, ....

Sur chaque rubrique, vous pouvez déterminer:

  • si vous souhaitez lister les articles dans le menu-déroulant
  • si vous souhaitez ne pas lister la rubrique dans le menu (pour ranger par exemple des articles techniques)

Fonctionnement de la page d’accueil

La page accueil affiche aléatoirement une image aléatoire d’un article défini dans le menu de configuration du squelette.

Plus précisement, on affiche 2 images aléatoires:

  • une image pour grands écrans (format horizontal)
  • une image pour petits écrans (format vertical)

Fonctionnement des pages rubriques

Le site propose 4 types de rubriques que vous pouvez éditer à tout moment

Classique | Portfolio | News | Court-circuit


Classique (par défaut)

Affichage Liste les articles avec le pseudo-logo
Tri des articles tri par date (le plus récent en premier)
Lien vers les articles oui

Portfolio

Affichage Liste la 1er photo de tous les articles de la rubrique sous-forme de planche-contact avec la légende affichée
Tri des articles tri par numéro sinon par date
Lien vers les articles non

News

Affichage Liste tous les articles avec le logo non-coupé et le texte entier
Tri des articles tri par date (le plus récent en premier)
Lien vers les articles non

Court-circuit

Affichage On renvoie sur le 1er article de la rubrique (tri par numéro, sinon par date le plus récent )

Fonctionnement des pages articles

Si l’article contient 0 ou 1 photo ; on affiche le texte suivi de la photo en pleine hauteur (la hauteur du viewport)

Si l’article contient plus 1 photos: on affiche la présentation planche contact. La logo sert de fond au texte.

Taille des images

Vous pouvez mettre les photos des dimensions que vous souhaitez mais il est conseillé de d’optimiser la taille et la compression des photos placées en ligne (taux de compression 80% et avec l’option .jpg progressif)

Taille recommandée : 2000 à 2500 pixels de largeur

Taille des logos

Les logos servent principalement à illustrer les rubriques avec leur encart texte.
La taille recommandée des logos est : 2000 * 600 pixels

  • Si le logo est plus grand, on le recadre avec le plugin centre_image.
  • Si le logo est plus petit, on ajoute un fond gris pour obtenir la bonne taille.

Astuce: Bootstrap

Le site utilise le framework Bootstrap

Il est donc possible d’utiliser ces classes pour compléter les articles par exemple pour forcer un alignement à gauche ou afficher une boite alerte dans vos articles SPIP

Personnaliser Aoto

Ajouter une feuille de style personnalisée
Vous pouvez ajouter votre feuilles de style personnelle.
Cette feuille de style devra s’appeler css/perso.css.
Il est recommandé de la déposer dans le répertoire squelettes/

Surcharger d’autres blocs
Plus généralement, vous pouvez surcharger tous les les éléments du squelette en ajoutant votre copie modifiée dans le répertoire squelettes/. Vous pouvez aussi ajouter des déclinaisons spéciales pour une rubrique donnée, par exemple squelettes/rubrique-45.html

Remarques

Le squelette est sur la zone. N’hésitez pas à contribuer en conservant à l’esprit de laisser le squelette aussi générique que possible.

updated on 1 February 2021

Discussion

Une discussion

Ajouter un commentaire

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom