Condition de CSS a partir de mots clés

Chrys

Mai 2013

Bonjour,

Afin de faciliter l’édition, j’aimerai pouvoir gérer des styles CSS d’article via des mots clés.

Je n’arrive donc pas à trouver la bonne boucle, mais dans l’idée ça donnerait ceci.
Par exemple :

Les mots clé : "Style1" - "Style2" - "Style3"

Pour la boucle j’imagine quelque chose comme cela, mais je ne sais pas faire la condition OU dans mon exemple pour "ou style2 ou style3" :

<BOUCLE_n (ARTICLES){titre_mot=Style1,ou style2,ou style3}>
	<!-- STYLE1 -->
	<div class="Style1">
		<h2>[(#TITRE)]<br />« [(#SOUSTITRE)] »</h2>
		<div class="Style1">
			<ul class="Style1">
				<li class="Style1">
					<a href="#URL_ARTICLE">[(#LOGO_ARTICLE)]</a>
				</li>
			</ul>
		</div>
		<a href="#URL_SITE" class="sous-legende">#NOM_SITE</a>
	</div>
	<!-- OU STYLE2 -->
	<div class="Style1">
		<h2>[(#TITRE)]<br />« [(#SOUSTITRE)] »</h2>
		<div class="Style1">
			<ul class="Style1">
				<li class="Style1">
					<a href="#URL_ARTICLE">[(#LOGO_ARTICLE)]</a>
				</li>
			</ul>
		</div>
		<a href="#URL_SITE" class="sous-legende">#NOM_SITE</a>
	</div>
	<!-- OU STYLE3 -->
	<div class="Style1">
		<h2>[(#TITRE)]<br />« [(#SOUSTITRE)] »</h2>
		<div class="Style1">
			<ul class="Style1">
				<li class="Style1">
					<a href="#URL_ARTICLE">[(#LOGO_ARTICLE)]</a>
				</li>
			</ul>
		</div>
		<a href="#URL_SITE" class="sous-legende">#NOM_SITE</a>
	</div>
</BOUCLE_n>

Merci par avance de vos propositions.

Par note Par date Par date chronologique

Indiquez l’intérêt que vous portez à cette réponse

0
tcharlss

Mai 2013
Bonjour,

Alors pour les critères du genre {critere = pierre OU paul OU jaques}, ça peut s’écrire comme ça :
- {critere IN pierre,paul,jacques}
- {critere == pierre|paul|jacques}
Dans cette boucle ça pourrait aussi être :
- {critere LIKE style%} (= critère commençant par "style" suivi de n’importe quoi)
- {critere == ^style} (idem)
Donc concrètement ça pourrait donner ça (dans la mesure un chaque article n’a qu’un seul mot-clé) :
<BOUCLE_n (ARTICLES){titre_mot IN style1,style2,style3}> [(#REM) on récupère le titre du mot clé lié à l'article ] <BOUCLE_mot(MOTS){id_article}{0,1}>#SET{style,#TITRE}</BOUCLE_mot> <div class="#GET{style}"> <h2>[(#TITRE)]<br />« [(#SOUSTITRE)] »</h2> <div class="#GET{style}"> <ul class="#GET{style}"> <li class="#GET{style}"> <a href="#URL_ARTICLE">[(#LOGO_ARTICLE)]</a> </li> </ul> </div> <a href="#URL_SITE" class="sous-legende">#NOM_SITE</a> </div> </BOUCLE_n>
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Mai 2013

Bonjour et merci pour ces premiers points.

Afin d’être un peu plus clair, il s’agit pour nous de présenter des bouquins, certain on un format "normal", d’autre de "poche", et d’autres formats à venir …
Sur notre page sommaire.html, nous présentons des vignettes cliquables (pour accéder à l’article complet) de ces livres. Or, les vignettes ne sont pas toute de la même taille.

Voici le code pour le format dit "standard" (normal) :
<BOUCLE_pedagogie (ARTICLES){id_rubrique=1}{par date}> <div class="livre infos"> <h2>[(#TITRE)]<br />« [(#SOUSTITRE)] »</h2> <div class="couv"> <ul class="infos"> <li class="infos"> <a href="#URL_ARTICLE" class="zoombox zgallery1"> [(#LOGO_ARTICLE|inserer_attribut{alt,#TITRE #SOUSTITRE})] </a> </li> </ul> </div> <a href="#URL_SITE" class="sous-legende">#NOM_SITE</a> </div> </BOUCLE_pedagogie>
Ici celui de "mini" (poche) :
<BOUCLE_pedagogie (ARTICLES){id_rubrique=1}{par date}> <div class="livreMini infos"> <h2>[(#TITRE)]<br />« [(#SOUSTITRE)] »</h2> <div class="couvMini"> <ul class="infosMini"> <li class="infosMini"> <a href="#URL_ARTICLE" class="zoombox zgallery1"> [(#LOGO_ARTICLE|inserer_attribut{alt,#TITRE #SOUSTITRE})] </a> </li> </ul> </div> <a href="#URL_SITE" class="sous-legende">#NOM_SITE</a> </div> </BOUCLE_pedagogie>
L’idée est de pouvoir gérer ces formats via les mots clés, afin qu’une personne non habituer a internet puisse facilement indiquer le format du livre via l’admin.

Du côté "CODE", j’ai créé un groupe de mots-clés dont le titre est "Mise en page des vignettes". Dedans deux mots clés (pour le moment) "standard" et "mini", seuls les titres sont renseignés.
Dois je rajouter des informations de CSS ou autre !? Si oui ou ?
Pour que les CSS soient reconnues…

Il se peut que les articles aient plusieurs mots clés à l’avenir.

Puis je vous demander un exemple de cote svp, avec mes infos au dessus, cela m’aiderai a mieux comprendre le cheminement ?

Merci à vous
Indiquez l’intérêt que vous portez à cette réponse

0
tcharlss

Mai 2013
Avec plusieurs mots-clés, c’est possible, le principe reste le même :
<BOUCLE_pedagogie (ARTICLES){id_rubrique=1}{par date}> [(#REM) on récupère les titres des mots-clés liés à l'article ] #SET{class,' '} <BOUCLE_mots(MOTS){id_article}>#SET{class,#GET{class}|concat{' ',#TITRE}}</BOUCLE_mots> <div class="livre infos[ (#GET{class})]"> <h2>[(#TITRE)][<br />« (#SOUSTITRE) »]</h2> <div class="couv[ (#GET{class})]"> <ul class="infos[ (#GET{class})]"> <li class="infos[ (#GET{class})]"> <a href="#URL_ARTICLE" class="zoombox zgallery1"> [(#LOGO_ARTICLE|inserer_attribut{alt,#TITRE #SOUSTITRE})] </a> </li> </ul> </div> [<a href="#URL_SITE" class="sous-legende">(#NOM_SITE)</a>] </div> </BOUCLE_pedagogie>
Après il suffit de jouer avec les classes dans la feuille de style.
Par contre au lieu de faire un seul nom de classe à rallonge :
.infos .infosMini .infosMiniNouveaute etc.
Il vaut mieux cumuler les classes (et utiliser des minuscules) :
.infos {...} .infos.mini {...} .infos.mini.nouveaute {...} etc.
Un dernier coupage de cheveux en 4 : en principe, il suffit d’indiquer la classe dans le div conteneur (.livre.infos), inutile de la répéter pour chaque élément contenu à l’intérieur (les
- , les
- ...)
Indiquez l’intérêt que vous portez à cette réponse

0

Fa_b

Mai 2013

Vous pourriez aussi installer le plugin Champs Extra et paramétrer vos articles avec un sélecteur, ce qui éviterait à vos rédacteurs de se tromper en mettant plusieurs mots clés. Si le champ extra s’appelle format_vignette il suffit de l’appeler dans la boucle articles tout simple par #FORMAT_VIGNETTE

Exemple :
<ul class="infos[ (#FORMAT_VIGNETTE)]">
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Mai 2013

Merci pour ces infos que je vais aller regarder de plus près.

J’ai lu aussi quelques infos sur les modèles, et je me demande s’il ne serait pas plus simple d’appeler un modelé via les mots clés !?
Pour obtenir ce que propose Dr Bouvier Leduc
Dans la mesure ou c’est possible ! non ?

Cela me permettrait de garder mes CSS, et surtout de pouvoir créer un modèle par format de livre, etc…

Je ne suis pas assez compétent pour me répondre, mais la question est posée ;-)

Merci de votre soutien
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Mai 2013

Bonjour,

Bien voici mon retour sur la proposition de Dr Bouvier Leduc.

J’ai suivi à la lettre vos recommandations, et j’ai réduit mes css de moitié ;-)

Tout a l’air de bien fonctionner sauf qu’ il me reste juste un petit souci, les classes se répètent et se cumules sur chaque entré, par exemple, les deux class pour les ouvrages « normaux » sont accompagnés et accompagne celle de l’ouvrage de « poche ».
4 mots clés et donc 4 classes.

Comment puis je maitriser cela !?

Une fois fais, je pense, que ce sera bon !!

Merci de vos réponses.

tcharlss

Mai 2013

C’était pas le but recherché ?
Je n’ai peut-être pas tout saisi à ce que vous souhaitez faire.

Accumuler les classes en css, c’est normal et ça permet beaucoup plus de souplesse que des noms de classe à rallonge.

Donc concrètement, voilà le principe que je vous recommande d’utiliser :

mots-clés de l’article	résutat dans le squelette
aucun	`<div class="livre">`
« Mini »	`<div class="livre Mini">`
« Mini » et « Info »	`<div class="livre Mini Info">`
« Mini », « Poche » et « Info »	`<div class="livre Mini Poche info">`

Pouvez-vous poster le même tableau avec ce que vous souhaitez faire, et un autre avec ce que vous obtenez atuellement ?
Ca permettra d’y voir plus clair.

Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Mai 2013

Pardon, je ne nais pas du être clair.

Pour reprendre votre tableau.
Pour chaque ouvrage il existe deux classes à présent, une "livre" et dedans une "couv".
Le format normal marche très bien :

mots-clés HTML Résultat

Aucun <div class="livre"> OK

Aucun <div class="couv"> OK

L’autre format, celui de poche, ne marche pas du tout (je pensais à cause des deux espaces entre les noms de classe, mais non) :

mots-clés HTML Résultat

livremini <div class="livre couvmini livremini"> NON

couvmini <div class="couv couvmini livremini"> NON

Pour que cela fonctionne, j’aurais besoin de faire :

mots-clés HTML Résultat

livremini <div class="livremini"> Mon souhait

couvmini <div class="couvmini"> Mon souhait

Comme il est surtout question de dimension, il faudrait que la classe mini rapetisse la classe livre, en somme. Si je vous comprends bien.
Indiquez l’intérêt que vous portez à cette réponse

0

tcharlss

Mai 2013

Et un dernier détail : dans le cas où il y a plusieurs mot-clés associés à l’article, quel est le résultat attendu ?
Indiquez l’intérêt que vous portez à cette réponse

0

Chrys

Mai 2013

C’est déjà le cas, il y a deux mots clés par article.
Théoriquement la classe "livre" contient le titre , petit texte, nom de l’auteur, ainsi que la classe "couv" pour l’image de couverture.
Si on travail sur un nouveau format d’ouvrage, seule les dimensions changeront.
Nous resterons donc sur deux mot-clés.
Indiquez l’intérêt que vous portez à cette réponse

0

Mai 2013

Merci à tous !!

mots-clés	HTML	Résultat
livremini	`<div class="livre couvmini livremini">`	NON
couvmini	`<div class="couv couvmini livremini">`	NON

mots-clés	HTML	Résultat
livremini	`<div class="livremini">`	Mon souhait
couvmini	`<div class="couvmini">`	Mon souhait