Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Retour du diaporama en page d'accueil #287

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Conversation

Guts
Copy link
Member

@Guts Guts commented Feb 23, 2021

Objectif

Maintenant que l'outillage et le workflow tiennent à peu près la route, il est temps de se pencher sur l'esthétique et l'ergonomie.
D'après quelques retours glanés ici ou là, les pages de contenus sont finalement pas si mal car très focalisées sur le contenu justement et donnent une impression de "propre".

L'objectif est donc de travailler à améliorer la page d'accueil. Pourquoi ne pas commencer à par restaurer un diaporama des derniers contenus comme dans l'ancien site ?

Principe

Idée générale

L'idée est de tirer profit du flux RSS produit par le plugin et qui contient déjà ce dont on a besoin :

  • image d'illustration
  • titre
  • lien vers la page
  • date de publication

Points techniques

On peut donc imaginer le processus technique suivant :

  1. on crée un fichier CSS et un fichier de JS spécifiques pour le diaporam
  2. on crée un template spécifique pour la page d'accueil (voir doc)
  3. dedans on inclut le diaporama avec des balises de type Jinja pour les différents éléments (titre, image, etc)
  4. à la fin de la génération du site, on parse le RSS et on remplit les balises jinja

Enjeux

Comme pour l'ancien site, la difficulté avec les diaporamas tient surtout aux dimensions/proportions des images. Si elles n'ont pas toutes le même ratio, soit le cadre du diaporama se déforme, soit ce sont les images qui apparaissent déformées. Dans les deux cas, c'est moche.

Il y a donc du CSS à se farcir avec des joyeusetés du genre max-height et width=100%.


Aperçu

Premier jet :

Peek.23-02-2021.10-20.mp4

@Guts Guts self-assigned this Feb 23, 2021
@github-actions github-actions bot added the thème Personnalisation du thème du site (CSS, JS, partials...) label Feb 23, 2021
@github-actions
Copy link
Contributor

💥 Erreurs repérées dans la syntaxe Markdown.
@Guts merci de consulter le rapport du linter (téléchargeable comme artifact). 🙏

@github-actions
Copy link
Contributor

💥 Erreurs repérées dans la syntaxe Markdown.
@Guts merci de consulter le rapport du linter (téléchargeable comme artifact). 🙏

@github-actions
Copy link
Contributor

🎉 Le markdown a l'air tout propre !

@github-actions
Copy link
Contributor

Documentation preview for this PR is ready! 🎉
Built with commit: 05e9489

@Guts Guts added enhancement Ajout ou amélioration d'une fonctionnalité preview labels Jul 10, 2021
@Guts Guts removed the preview label May 31, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Ajout ou amélioration d'une fonctionnalité thème Personnalisation du thème du site (CSS, JS, partials...)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant