Zonage
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
- Aller dans le menu Squelettes - Aide sur SoyezCréateurs
- Cliquer sur « Configurations rapides de SoyezCréateurs » (ecrire/ ?exec=sc_import)
- Cliquer sur « Mode Cognac (paramètres principaux, y compris largeurs site et images) »
- Vider le cache
- 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)
- 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)
- Puis des événements de l’agenda (Logo : 180×95)
- 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);
}
Discussions par date d’activité
14 discussions
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
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
Répondre à ce message
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.
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 ;-)
Répondre à ce message
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)
Répondre à ce message
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... ?
Bonjour Philippe,
Je viens de préciser la doc avec : « Ces fichiers ne concernent que la page d’accueil. Voir Personnalisation graphique du squelette SoyezCréateurs pour le reste du site. »
Et, non, tu n’auras jamais une documentation exhaustive de tout ce qu’on peut faire en CSS, Parce qu’ici, c’est de la documentation SPIP, pas une formation CSS.
2 pistes :
Répondre à ce message
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.
En réglant la marge haute dans l’onglet des couleurs.
Répondre à ce message
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 :
Répondre à ce message
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
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...
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...
Répondre à ce 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
avec soyezcreateur
Répondre à ce message
@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 :
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 !
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 :
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.
Suivre les commentaires : |