Mode Cognac pour SoyezCréateurs

Ce mode d’affichage très graphique...

Zonage

Zonage du mode portail Cognac

Pré-requis à l’installation

Pour fonctionner, ce mode d’affichage a besoin :

Sur un site multilingue, on utilisera : Menu de langues sous forme de liens

Identité Extra permettra de gérer simplement la zone de contact en bas de chaque page.

Noizetier V3 (avec N-Core) permettra quant à lui de choisir l’ordre des blocs sur la page (installable par SVN uniquement pour l’instant)

Enfin, Importeur / Exporteur de configurations permettra de gérer facilement la configuration en rajoutant dans le menu Aide de SoyezCréateurs une entrée pour configurer en un clic le Mode Cognac.

Paramétrage rapide

  1. Aller dans le menu Squelettes - Aide sur SoyezCréateurs
  2. Cliquer sur « Configurations rapides de SoyezCréateurs » (ecrire/ ?exec=sc_import)
  3. Cliquer sur « Mode Cognac (paramètres principaux, y compris largeurs site et images) »
  4. Vider le cache
  5. Admirer le résultat

Configuration

Bloc 1 : Carrousel /ZoomSur

Les images qui défilent et le lien mènent vers le dernier article ayant le mot clef « ZoomSur » :
On a donc :

  • le titre,
  • le lien vers l’article (ce dernier peut bien sur être une redirection)
  • images jointes dans le portfolio
  • vidéos au format .mp4
  • lien vers des vidéos en ligne si le plugin oEmbed est présent

Taille :

  • Largeur : 1920px
  • Hauteur : 580px (paramétrage dans la configuration de SoyezCréateurs)

Les contenus sont recadrés pour tenir dans la hauteur déclarée (pour une largeur d’écran de 1920).

Bloc 2 : Cycloshow

Affiche tous les articles ayant le mot clef « CycloShow », par numéro de titre ou par ordre anti-chronologique, avec :

  • logo (largeur de la colonne x hauteur du slider ; peut aussi être configuré pour occuper toute la largeur de l’écran)
  • titre de l’article
  • bulle d’aide

Bloc 3 : EDITO

Affiche un article auquel on a mis le mot clef EDITO :

  • titre de l’article
  • logo (recadré à la largeur de la colonne, hauteur fixée à 200px)
  • chapo sinon bulle d’aide
  • texte
  • PS
  • lien
  • galerie de photos

Bloc 4 : Quoi de neuf ? (ALaUne, Agenda, articles récents)

  1. D’abord les articles avec le mot clef « ALaUne » (Logo : 308×340 ou 638×340 ou 955×340 (ou redimensionnées au plus large possible selon les proportions de l’image)
  2. Puis des événements de l’agenda (Logo : 180×95)
  3. Puis des articles récemment publiés et/ou modifiés

Les blocs ALaUne et articles récents peuvent occuper 1 à 3 colonnes en fonction des proportions de leur logo :

  • 308×340
  • 638×340
  • 955×340
  • ou redimensionné au plus large possible selon les proportions de l’image
  • Il est aussi possible de forcer une largeur via la liste déroulante disponible tout en bas de l’article

Le nombre de chacun de ces 3 éléments est paramétrable dans la CFG de SoyezCréateurs :

  • Nombre de « À la une »
  • Nombre de « Quoi de neuf »
  • Nombre maximum d’éléments affichés sous l’agenda (commun avec le mini agenda)

À la fin de ce bloc, s’il y a un article avec le mot clef VideoALaUne, la vidéo de cet article est affichée.
2 modes d’insertion possible :

  • par iframe :
    <iframe width="100%" height="auto" src="//www.youtube-nocookie.com/embed/Cbk980jV7Ao?rel=0" allowfullscreen="true" loading="lazy" style="aspect-ratio: 16 / 9;">


    Notez les paramètre width, height et surtout le style :

    aspect-ratio: 16 / 9;
  • simplement en tant que document joint (ce peut être un .mp4, ou l’url d’une video Youtube qui sera intégrée comme document distant grâce à oEmbed)

Bloc 5 : Bannière à cliquer (Goodies2)

  • Article avec le mot clef « Goodies2 » :
    • le titre du bloc est le titre de l’article
    • image ramenée à la largeur du site
    • alternative à l’image : descriptif sinon titre de l’article
  • utiliser une redirection pour renvoyer vers le bon endroit dans le site ou ailleurs.

Bloc 6 : Gros blocs de couleur (ZoomSur2)

  • Rubriques ayant le mot clef « DessousBreves » ou « ZoomSur2 »
  • Trié par numéro de titre
  • Couleur réglable avec un mot clef du groupe « _CouleurRubrique » (couleur inscrite dans le texte du mot clef, en hexa, sans le # au début)
  • Sur 2 ou 3 colonnes selon configuration

Bloc 7 : Blocs défilants (Goodies)

  • Rubriques ayant le mot clef « Goodies » :
    • le titre du bloc est le titre de la rubrique
    • blocs dans l’ordre des numéros de titre
  • Articles de ces rubriques : Logo, Titre, URL (si besoin, utiliser une redirection), classés par numéro de titre (ou à défaut, par ordre antéchronologique)
  • Minimum : 280×190

Paramétrage dans la CFG

Quelques éléments de la configuration de SoyezCréateurs (ecrire/ ?exec=configurer_soyezcreateurs) améliorent ce mode :

  • Position de la date de mise à jour du site : Dans le pied de page
  • Affichage du mini agenda : Dans le pied de page
  • NewsLetter du site : Dans le pied de page

Quelques exemples de sites

Personnalisation avancée

Via CSS, avec un fichier squelettes/images/stylesportailcognac_perso.css
Ou, avec le plugin LESS CSS : squelettes/images/stylesportailcognac_perso.less.html

Ces fichiers ne concernent que la page d’accueil. Voir Personnalisation graphique du squelette SoyezCréateurs pour le reste du site.

Exemple : changement de la couleur de fond du cycloshow

.slider-content.desc-gauche {
    background-color: rgba(50,70,50,0.6);
}

Discussion

Une discussion

  • 1

    Bonjour,

    Merci pour ce squelette de qualité.

    J’ai testé et installé SC sur le site que je gère. Il y a encore qqs paramétrages graphiques à faire (et à former les utilisateurs) mais je n’arrive pas à reproduire ce que j’ai fait dans ma maquette auparavant.
    Les articles ’ALaUne’ refuse de s’afficher et reste dans QuoiDeNeuf. :(
    J’ai comparé ligne à ligne le paramétrage et je ne vois pas de différence.
    Je vous invite à jeter un œil sur la maquette https://etablissementbertrandeborn.net/maquette3 et sur le site https://etablissementbertrandeborn.net/ . Les étoiles caractéristiques de ALaUne s’affiche bien dans ma maquette.

    Qu’ai-je bien pu oublier ?

    Bien cordialement

    PS : bien entendu, il y a le mot clé AlaUne sur certains articles du site.

    • Bonjour,

      Sans accès à l’admin du site, c’est impossible de répondre à cette question.

       ?var_mode=debug peut donner des pistes...

      Les autres mots clefs mis sur les articles/rubriques aussi.

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom