Mode Cognac pour SoyezCréateurs

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

Zonage

Zonage du mode portail Cognac
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 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)
  • 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)

Bloc 5 : Gros blocs de couleur (DessousBreves)

  • 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)

Bloc 6 : 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 (ou à défaut, par ordre anti-chronologique)
  • Articles de ces rubriques : Logo, Titre, URL (si besoin, utiliser une redirection)
  • 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

Exemple: changement de la couleur de fond du cycloshow

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

updated on 14 April 2020

Discussion

13 discussions

  • 3

    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 ;-)

    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

    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

  • 4

    bonjour
    un petit sujet...
    en portail cognac, sans zoomsur, je me retrouve avec le cycloshow collé en haut au menu, sans marges... l’effet n’est pas terrible, et je voudrais donc ajouter une marge haute au cycloshow..

    j’ai fait un peu brutal avec un BR dans la préboucle de la noisette, mais je me dis que ca doit pouvoir se faire de manière plus élégante avec un css...

    un truc du genre #cycloshow .zone-slider  margin-top: 10px

    j’avoue bloquer pour trouver où le mettre ...
    merci d’avance
    pam

    • C’est écrit dans la doc sur cette page : #Personnalisation-avancee

    • merci pour la réactivité...
      pam

    • désolé, mais j’ai bien ajouté un stylesportailcognac_perso.less.html dans squelettes/images
      avec à priori un css qui devrait suffire #cycloshow margin-top: 10px;
      mais il ne s’applique pas
      -  d’abord, je ne suis pas sûr, est ce que le recalcul du squelette provoque la recompilation des less css ? ou suffit-il de rafraichir les styles avec un F5 ? ou autre chose ?
      -  en debug console chrome, je vois que le margin-top est toujours à 0 et je ne vois pas trace de l’ajout... et si j’explore la valeur margin-top dans le cache, je trouve

      /* gestion block texte sur slider : CycloShow */

      #cycloshow
      position: relative;

      max-width: 1160px;

      width: 100%;
      margin: 0 auto 7em auto;

      ???
      il y a un truc pour tracer le recalcul css ? (j’ai bien désactivé la compression css spip...)

      je progresse lentement !
      pam

    • désolé.... il fallait juste activer le plugin less css... ou alors mettre dans le css de perso...
      je pensais que less css était obligatoire avec le squelette.

      pam

    Reply to this message

  • 3

    Bonjour,
    Merci pour votre travail.
    Je cherche à modifier l’image mis par défaut sous le menuhaut.
    Quel fichier l’appelle dans le squelette ?
    Merci pour votre réponse.

    • Bonjour,

      Il faut aller dans Edition - Rubriques
      Et c’est le logo par défaut des rubriques.

      Merci pour la question

    • Bonjour,
      Merci pour votre aide.
      Une autre question
      Je n’ai pas réussi à trouver la solution pour modifier dans le menu haut la couleur de fond lorsque l’on a cliqué sur le lien (et survol) dans la partie couleur de la configuration.
      Je dois passer par perso.css ?
      Merci pour votre réponse.

    • Bonsoir,

      Je n’ai pas de tête la réponse à cette question.

      Par contre, ça n’est pas perso.css mais ce qui est indiqué dans Personnalisation graphique du squelette SoyezCréateurs.

    Reply to this message

  • 4

    Bonjour,
    Sur l’image “Zonage du mode portail Cognac” on a 4 colonnes affichées pour le bloc 4, mais le texte indique seulement “de 1 à 3 colonnes en fonction des proportions de leur logo”.
    Peut-on donc afficher 4 colonnes (ça m’intéresse...) et comment faire ?
    Merci d’avance.

    • Bonjour,

      Le code actuel (squelettes + CSS) ne gère que 1, 2 ou 3 colonnes.
      Autrement dit, il n’est pas prévu de pouvoir avoir 4 colonnes.

      Donc, pour avoir 4 colonnes, il faudrait le rajouter au code.

    • On est d’accord. Donc il faut corriger le schéma ! ;-)

    • Je n’ai pas l’impression que l’on parle de la même chose.

      Le schéma présente des images de largeur une colonne avec 4 images par ligne.
      Si la largeur du site est 960, il n’y en aura que 3.
      Si c’est 1160, il y en aura 4.

      Ensuite, ce à quoi j’ai répondu, c’est le fait qu’une image puisse être recadrée sur l’espace de 1, 2 ou 3 colonnes..

    • Effectivement tu as raison. Le problème est l’affichage sur tablettes (sur Smartphones le bandeau est de toutes façons trop large pour apparaître). Je vais faire un essai demain pour que le bandeau puisse apparaître sur une majorité de tablettes selon la largeur de l’écran.

    Reply to this message

  • 1

    Bonjour

    J’essaie le squelette “SoyezCréateurs Rebirth v5.0.15” sous SPIP 3.2.1 en mode affichage “Cognac”. Tous les plugins ont été installés en mode automatique depuis “Ajouter des plugins”

    Je rencontre des difficultés avec les “goodies” dont les articles d’une rubrique avec le mot clef “goodies” ne s’affichent pas sous forme de Slider mais les uns en dessous des autres.

    J’ai rencontré ce défaut sur une mise à jour d’un site SPIP installé en local sous ubuntu.
    J’ai fait également une installation vierge chez mon hébergeur et la rubrique “Goodies” s’affiche aussi sous forme de colonnes.

    Faut il activer d’autres plugins pour avoir l’affichage comme la rubrique “En 1 clic” du site de la ville de Cognac ?

    P.S.: mes versions de PHP sont 5.5.9 en local et 7.0.32 chez mon hébergeur.

    Merci d’avance

    • Bonjour,

      J’ai trouvé tout seul.
      Dans l’installation des dépendances de “SoyezCréateurs Rebirth”, il manque l’ajout du plugin Slick 1.2.8

      Tout marche mieux ensuite.

    Reply to this message

  • Bonjour,
    J’ai besoin d’aide: les caractères du menu haut sur mon mode portail sont trop grand, je ne trouve pas où les modifier.
    La Configuration de la taille des polices ne fonctionne visiblement pas. C’est curieux.

    Bref quelqu’un peut m’aider ?

    Reply to this message

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