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

18 discussions

  • 1

    Bonjour

    d’abord je vous fellicite pour cet outil qui facilite le travail des debutants qui ne sont pas assez competents pour programmer eux memes toutes les fonctionnalites de SPIP et de ces caracteristiques graphiques.

    J’ai installe SPIP 4.1.2, en local (wampserver), PHP 7.4.26, Mysql 5.7.36, et Soyez createurs rebirth 5.2.36.
    J’essaie de tester une configuration, d’un site en phase de test (le site il est en etape tres primaire encore). Je cherchais un outil qui pourrait me procurer d’un modele graphique riche et le SoyezCreatuers est de ce cote assez puissant, beau esthetiquement parlant et avec beaucoup de fonctionnalites.

    J’ai un petit soucis avec le MenuHaut qui ne s’affiche pas du tout (sauf si j’ajoute a la main un Menu avec classe menuder dans la page “Accueil mode Cognac”, dans ce cas la oui je le vois mais il n’a pas le meme style comme prevu par la configuration conforme par exemple avec l’onglet couleurs du Plugin Soyezcreatifs. J’ai egalement utilise la methode de configuration rapide (voir “parametrage rapide” dans cet article) qui ne fait apparaitre aucun menu HAut.

    J’ai compris que le Menu HAut est un element pour la config Cognac qui apparait “sans action speciale” a partir du moment
    ou ce n’est pas numeroté comme les autres blocs sur l’Image de zonage de cet article, il suffit de configurer bien dans la page “Configurer SoyezCréateurs”
    Donc je conclue a cette serie des questions:
    1 - faut il creer et ajouter le menu en dehors du SoyezCreatifs, dans le noizetier par exmple avec le Plugin Menus?
    2 - Dans ce cas la quel style css faut il appliquer? Le css "menuder ne “colle” pas avec les regalges graphiques du plugin SC.
    Merci, si qqun pourrait m’eclairer la dessus.
    CDT, RS
    Pour quelle raison le

    • Rebonjour,
      je reponds à moi meme:
      j’ai resolu mon probleme qui etait idiot : hier j’avais associe le mot clef MenuHaut dans les rubriques que je voulais afficher dans le Menu, sauf qu’il y a un petit bouton a coté qui dit “ajouter”, pour les utilisateurs futurs voir l’image, ci dessous. Ne pas oublier donc d’appuyer sur ce petit bouton, sinon le mot clef n’est pas pris en compte.
      Encore merci pour ce joli outil.
      CDT

    Reply to this message

  • 2

    Donc je poste dans le bon forum.
    Pour le moment je n’ai pas vu de différence de paramétrage entre les deux sites (colonnes SoyezCréateurs et Positionnement)

    Pour le site qui ne veut pas d’image de logo d’article plus petite que le bandeau (1920) je n’ai encore qu’une image de bandeau et pour l’autre j’en ai plusieurs. Peut-être ça.
    Je chercherai encore plus tard.

    Je crois que c’est pas le bon endroit pour poster ça (ça aurait dû être dans un forum de la doc du mode cognac).

    C’est bien SoyezCréateurs qui force à l’usage de grandes images pour les logo, car c’est nécessaire pour avoir un bel affichage du logo en bannière en haut des pages (entre le menu et le titre de l’article).

    Bonjour,
    Vous auriez une piste ?

    A la création du Logo d’article. REFUS : « Les images doivent faire au moins 1920 X pixels (ce fichier fait 1600 X 1459). »
    (Par exemple.) Et avec une image de 1920 ça passe.
    Sous
    Squelette SoyezCréateurs Rebirth 5.2.35
    SPIP 4.0.7
    mode Cognac
    Version PHP globale 7.4 puis 8.0
    Par contre, sur un autre site,
    Pas d’exigence particulière pour la taille des images à la création du logo d’article
    Autre serveur
    Sous
    Squelette SoyezCréateurs Rebirth 5.2.35
    SPIP 3.2.15
    mode Cognac
    Version PHP globale 7. 3 puis 7.4
    Il ne semble pas y avoir de plugin pour redimensionnement d’image

    Je ne sais pas si c’est à vous que je dois poser la question mais vous m’avez déjà dépanné tellement...
    Merci.
    JD

    • Merci beaucoup !
      Je m’y suis remis et SoyezCréateurs était bien la bonne piste.
      J’ai trouvé le paramètre dans soyezcreateurs_options.php
      J’ai copié-collé le code que j’ai modifié dans config/mes_options.php
      et ça marche, je ne suis plus bridé par la dimension!

    • C’est effectivement une possibilité, mais ça n’est pas pour rien que j’ai souhaité forcé la taille de 1920px de large pour les logos...

      À tes risques et périls ;-)

    Reply to this message

  • 4

    la largeur des images du quoi de neuf est paramétrable dans l’article , et la valeur par défaut est la largeur de l’image
    mais je ne vois pas de paramètre généraux qui permettrait de choisir la valeur par défaut ?

    bon, on peut la modifier dans le squelette, mais si un paramètre existe...

    • Bonsoir,

      J’ai pas vraiment compris la question.

      Avec des urls, le nom des paramètres, ça serait peut-être plus clair.

      J’ai même l’impression qu’il y a un mélange entre hauteur et largeur dans la question.

    • mille excuse, j’avoue que me relisant, je ne comprend pas la question !

      je reprends donc,
      en édition d’un article, avec SC, on doit choisir la largeur de “tuile” qui sera utilisée dans le pavé “quoi de neuf” du portail.. on peut choisir, “1”,“2” ou “3”, ou “selon la largeur de l’image” et c’est la valeur par défaut si on ne saisit rien....

      Ma question est: peut-on définir une autre valeur par défaut que “selon la largeur de l’image”?
      Bien sûr, on peut surcharger le script... mais c’est au cas où j’ai raté un paramètre qqpart...

      pam

    • Bonsoir,

      Réponse courte : non, ça n’est pas actuellement codé dans le plugin.

      Réponse longue : ça pourrait être codé (config à rajouter, et prise en compte de cette config dans le squelette). Mais ça ne fait pas partie des priorités du moment ;-)

    • Bonjour,

      Je réalise que j’ai codé cette possibilité depuis que la question a été posée ;-)

      voir dans la config de SoyezCréateurs (quelque part)

    Reply to this message

  • 1

    Hello,
    Tu indiques la possibilité d’une configuration avec une feuille de style squelettes/images/stylesportailcognac_perso.css mais a-t-on une aide quelque part pour écrire correctement le contenu : classes, sélecteurs, propriétés... ?

    Reply to this message

  • 1

    merci beaucoup
    une autre question:

    Dans tous les exemples de site présent dans le tuto Mode Cognac pour SoyezCréateurs, la bannière se trouve tous en haut de la page, pour ma part il y a un espace d’environ 1cm entre le haut de la page et la bannière. comment résoudre ce dilemme.

    Reply to this message

  • 1

    Bonjour,

    J’essaie le squelette « SoyezCréateurs Rebirth v5.0.11 » sous SPIP 3.2.8 en mode affichage « Cognac ».
    Je rencontre des difficultés avec le deuxième bandeau en haut de page qui représente un champ de blé. est il possible de le supprimé et de faire remonté les rubriques juste en dessous du menu haut?

    Amicalement

    • Oui.

      Plusieurs possibilités :

      • ne pas afficher les logos de rubrique en haut, mais ailleurs (voir ecrire/?exec=configurer_soyezcreateurs&cfg=soyezcreateurs_layout)
      • toujours dans cette page de config, “Affichage du logo de rubrique sur la page d’accueil” à mettre à non
      • Et possibilité de changer l’image des blés par une autre en changeant le “Logo standard des rubriques” dans ecrire/?exec=rubriques

    Reply to this message

  • 4

    un autre sujet de compréhension... l’affichage de la bannière selon la taille d’écran..

    sur mon essai, la bannière disparait pour un écran inférieur à la largeur du conteneur
    je suppose que ca vient de headerbanner.html qui teste si l’écran est plus grand ou plus petit que la largeurContainer...

    Mais je ne vois que le calcul de padding-top qui dépend de la largeur de l’écran...? Il est calculé d’abord dans tous les cas avec la hauteurrelative, puis pour les grands écrans on prend la hauteur de bannière paramétrée ou calcule la hauteur possible de l’image proportionnellement à la largeur de l’écran et on s’en sert comme padding-top

    @media screen and (min-width:[(#GET{LargeurContaineur})]px) {
            #header {
                    <?php if(#CONFIG{soyezcreateurs/hauteurbannierre,0}==0){ ?>
                    padding-top: <?php echo($banniere['hauteurrelative']); ?>%;
                    <?php } ?>
                    [(#CONFIG{soyezcreateurs/hauteurbannierre,0}|=={0}|non)
                    padding-top: [(#CONFIG{soyezcreateurs/hauteurbannierre,0})]px;
                    ]
            }
    }

    et pour les petits écrans, , on place juste une hauteur auto au header-inner, mais on n’ajoute rien au header, pas de padding, et on ne touche pas le background-image, qui je suppose devrait rester...

    [@media screen and (max-width: [(#GET{LargeurContaineur})]) {
    (#CONFIG{soyezcreateurs/mode_affichage,communiquant}|=={portailcognac}|ou{#CONFIG{soyezcreateurs_layout/pictogrammesoutils,non}|=={avecoutils}})
      #header_inner {
        height: auto;
      }}]

    A l’exécution, je vois que si l’écran est plus petit que le paramètre conteneur, la “backgound-image” du header est rayée... mais je ne comprends pas ce qui le produit...

    merci d’avance...

    • Cette bannière est destinée à être décorative, à donner une ambiance.

      Elle n’est donc pas faite pour contenir du texte (entre autre parce que ce dernier devient illisible sur mobile).

      Donc, cette bannière est volontairement masquée par CSS dès que la largeur de l’écran est trop faible.

      C’est voulu ;-)

    • OK, mais sur petit écran, on se retrouve sans rien avec le menu haut.. surtout si on affiche pas le logo en haut...

      Il est d’ailleurs prévu que le titre soit brulé dans la bannière, ce que j’ai utilisé pour obtenir l’effet recherché... le positionnement respectif du logo et du titre n’étant pas satisfaisant en texte... dou l’utilisation de la bannière pour mettre tout (logo et titre brulé...)

      effectivement le resize de bannière sur petit écran risque d’être mauvais, mais on pourrait laisser l’éditeur la choisir... donc dans l’idéal d’avoir, une bannière par taille d’écran... en utilisant des mots clés ?

    • et au passage, je n’ai toujours pas compris ce qui dans le css faisait disparaitre la bannière, la seule chose que je vois dépendre de la taille d’écran, c’est le padding-top ?

    • finalement, au hasard des réglages, j’ai trouvé :
      c’est noisettes/header/headerbanner.html qui fait dépendre la banière de la largeur d’écran...

    Reply to this message

  • bonjour

    je sais bien que les réseaux sociaux ne sont pas votre tasse de thé. D’ailleurs, moi non plus (ni pour twitter, ni pour FB, mais mes efforts pour contribuer à la dégooglisation d’internet dans mon entourage sont restés sans effets...

    Et donc, je ne peux que leur donner une place sur le site pour lequel j’utilise soyezcreateurs..

    Or, j’ai bien inséré un bloc “twitter” dans la noisette “quoi de neuf” du portail cognac, tout va bien, avec une image qui montre que ca passe par mastodon, l’alternative libre à twitter... Mais point de fil twitter...

    Pourtant, le même code SPIP fonctionne sur une autre installation (basée sur spipr-educ)...

    Et je ne vois pas de différence (la différence de classe twitter timeline ou hastagbutton ne jouant que sur l’apparence du titre

    si jamais quelqu’un avait un piste, merci d’avance...

    avec spipr-educ

    <a class="twitter-timeline" data-height="300" data-border-color="#ff0000" href="https://twitter.com/@levenissian">Tweets</a>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

    avec soyezcreateur

    <a href="https://twitter.com/@levenissian"  class="twitter-hashtag-button"   data-height="300"> 
    <h2><span class="titre-actus">Tweet #levenissian</span></h2></a> 
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

    Reply to this message

  • 7

    @realET

    je regarde le noizetier suite au commentaire “L’idéal serait de faire une vraie noisette supplémentaire insérable par le Noizetier et qui afficherait une vidéo en pleine largeur.”

    ca a l’air bien et assez simple... mais soyezcreateur est compatible avec le noizetier ? je vois bien la page portailcognac dans le noizetier avec ses noisettes zoom, cycloshow, quoide neuf... Mais j’ai l’impression que quoi que je fasse dans le noizetier, ce la ne modifie pas le squelette

    pam

    • Les noisettes du mode Cognac sont ici : https://git.spip.net/spip-contrib-squelettes/soyezcreateurs/src/branch/master/noisettes

      Et c’est une paire de fichiers. Exemple :

      1. https://git.spip.net/spip-contrib-squelettes/soyezcreateurs/src/branch/master/noisettes/sommaire_modeportailcognac_cycloshow.html
      2. https://git.spip.net/spip-contrib-squelettes/soyezcreateurs/src/branch/master/noisettes/sommaire_modeportailcognac_cycloshow.yaml

      Un peu de doc : https://contrib.spip.net/Declarer-des-noisettes-au-noiZetier

      PS : l’interface d’admin du Noizetier dans SoyezCréateurs ne sert qu’à ordonner les noizettes.
      PS² : et la liste des noizette est placée dans le bon conteneur via une fonction à chercher dans le menu squelettes/aide sur SoyezCréateurs.

    • merci

      le noizetier a l’air sympa, même si l’installation a généré beaucoup d’erreurs de compatibilité de versions de plugin, qui m’ont conduit à réinstaller les plugins...

      mais ca fonctionne et je vois comment déplacer des noisettes dans la page cognac, et ajouter des noisettes spécifiques.

      mais ce principe de stocker une noisette en base et de la recalculer au calcul de la page n’est-il pas risqué en besoin de performances ? ca rajoute de l’accès BD ?

      et me prenant au jeu, je me demande s’il y a d’autres noisettes toutes faites utilisables, donc je regarde le noizetier puis aveline... les noisettes d’aveline sont-elles en général utilisables avec soyezcreateur ?

      pam

    • Aucune autre noizette que celles fournies dans le plugin soyezCréateurs n’a été testée avec SoyezCréateurs.

      Merci des retours d’usage si c’est concluant.

    • et bien, je suis assez content ce soir !

      j’ai fait ma première noisette en partant d’une noisette “’liste des newsletter” adaptée en m’inspirant des goodies... c’est une v0 et il me reste des trucs à comprendre notamment sur le css, mais ca marche correct...

      après le quoi de neuf et avant les goodies sur dev.levenissian.fr

    • et une première noisette aveline (liste articles syndiqués) adaptée avec le style des goodies... (dernier bloc du portail dev.levenissian.fr

      je n’ai traité que le choix “liste” et pas encore le choix “résumé”, mais ca semble assez réaliste à faire... à part que je suis lent avec tout le css...

      pam

    • Bravo ! C’est juste par stylage CSS que l’adaptation a été faite ?

    • principalement css, mais avec des modifs html pour reprendre les classes soyez createurs... et qq modifs de contenu... je pense qu’on peut faire mieux en minimisant les modifs html, mais il faudrait faire plus de css, et ce n’est pas mon fort !

    Reply to this message

  • 3

    bonsoir,

    le paramètre “Largeur de la vidéo d’accueil (0 pour largeur automatique)” ne semble pas pris en compte dans mon bloc “quoi de neuf”.. je voudrais en fait le mettre en tête du bloc sur la largeur totale, mais en fait, il a toujours la largeur de tous les pavés de quoi de neuf...

    pourtant, le paramètre est bien pris en compte dans le calcul du squelette (en mode debug)...

    bon, j’ai encore un mois de confinement pour trouver, mais merci d’avance d’une piste...

    • Ce paramètre concerne (de mémoire) le mode portail communiquant.
      Donc pas le Mode Cognac.

      Pour le Mode Cognac, la vidéo est forcément à la fin du quoi de neuf.

      L’idéal serait de faire une vraie noisette supplémentaire insérable par le Noizetier et qui afficherait une vidéo en pleine largeur.

      Bon confinement

    • merci
      je butte sur un trou de compréhension des filtres ...

      que peut bien faire

      [(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}
             |>={340}
             |?{-x2})]

      la première ligne renvoie la valeur du paramètre ou 340, puis vérifie si elle est supérieure à 340, et donc renvoie la valeur vraie (j’ai mis pour voir 720), puis... fait un filtre de test siouisinon ? mais avec une seule valeur... et dont je n’ai aucune idée... que fait ce -x2 ?

      merci d’avance...

    • Ça se contente de rajoute “-x2” à la classe CSS si la condition est vraie.

    Reply to this message

Add a comment

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 / PostgreSQL
  • 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 apparait.

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.

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