Accueil Documentation Developper avec C5 Programmer des attributs de pages

Contrôler des éléments de thèmes avec les attributs de page

Voici comment injecter directement des types de pages et leurs attributs perso depuis le paquet de votre thème.

A quoi cela sert-il ?

Il se peut, selon votre thème que vous vouliez contrôler certains éléments depuis les attributs, comme une charte colorimétrique, un fond de page ou tout autre élément.
Le plus simple pour ce faire est donc de laisser le choix à vos administrateurs/éditeurs de choisir ces paramètres sur les pages désirées afin de supplanter les paramètres par défauts de votre thème.

De plus il est parfois nécessaire d'ajouter certains types de pages sans avoir à demander aux utilisateurs d'alller activer ceux-ci dans le gestionnaire de thème. Ci que se fait généralement dans Tableau de bord -> Pages et Thèmes puis en cliquant sur le bouton Inspecter de votre thème et pour finir en cliquant sur Activer les fichiers.

Le but étant de laisser le choix aux administrateurs de modifier l'apparence ou tout autre élément de l'interface graphique de son site, et simplifier l'intégration des outils nécessaires. Ici les types de pages et attributs personnalisés.

Injection du type de page et d'un attribut lié

Dans cet exemple nous allons installer un type de page ma_page (le fichier doit exister dans votre thème) et un attribut de type image qui lui est lié.

Vous noterez que par défaut les types de page ont les attributs suivants:

Meta Title (id=1)
Exclude From Nav(id=2)
Meta Description(id=3)
Meta Keywords(id=4)

Ajouter un type de page

Nous voulons ici les ajouter à tous nos types de pages ainsi qu'injecter nos attributs personnalisés.
Nous allons donc ajouter les éléments nécessaires dans le contrôleur.

Dans le contrôleur de votre paquet nous chargons les modèles nécessaires.

// installation de la  page type
$theme = CollectionType::getByHandle('mapage');
if(!$theme || !intval($theme->getCollectionTypeID())){
     $theme = CollectionType::add(array('ctHandle'=>'mapage','ctName'=>t('Ma Page Type')),$pkg);
}

Maintenant nous ajoutons les attributs personnalisés du type de page mapage (toujours dans le contrôleur):

//creation de la collection
$eaku = AttributeKeyCategory::getByHandle('collection');
$eaku->setAllowAttributeSets(AttributeKeyCategory::ASET_ALLOW_SINGLE);
$themeSet = $eaku->addSet('mes_attribs',t('Categories Atributes'),$pkg);
 
// installation de l'attribut dans la collection
$ak1=CollectionAttributeKey::add($image_file,array('akHandle'=>'image_mapage','akName'=>t('Image de ma page'),'akIsSearchable'=>false),$pkg)->setAttributeSet($themeSet);

Notez que pour une meilleur organisation nous avons créé une nouvelle collection d'attribut nommé mes_attribs afin de maintenir tout cela ordonné, ensuite nous avons créer un attribut Image de ma page.

Maintenant nous devons assigner notre attribut à notre type de page.

$pageType = CollectionType::getByHandle('mapage');
$ak= CollectionAttributeKey::getByHandle('image_mapage');
$pageType->assignCollectionAttribute($ak);

Faite de même pour chaque combinaison attribut/type de page, et les attributs seront automatiquement affichés par défaut lors de l'édition des propriétés vos pages types.

Injection d'attribut non assignés

Le principe reste le même pour injecter des attributs, quels qu'ils soient. Nous allons voir comment installer différents types d'attributs directement depuis le contrôlleur du paquet de votre thème par exemple.

Le principe reste le même, la fonction d'installation de votre contrôlleur commence toujours par:

public function install() {
	$pkg = parent::install();

Ici nous ne nous soucions, pour des raisons de simplicité, que de l'installation d'attributs. Il est biensûre possible d'assigner celui-ci dans une collection et/ou un type de page comme vu ci-dessus.

Nous ne chargeons donc que le modèle nécessaire:

Loader::model('collection_attributes');

Installer un attribut booléen

Voyons comment installer un attribut type Checkbox n'ayant que deux états, coché ou non.

$attrBoolAttrKey=CollectionAttributeKey::getByHandle('mon_attribut_checkbox');
	if( !$attrBoolAttrKey || !intval($sattrBoolAttrKey->getAttributeKeyID()) ) {
		$attrBoolAttrKey = CollectionAttributeKey::add('mon_attribut_checkbox', t('Nom de mon attribut check box affiché'), false, null, 'BOOLEAN');
	}

Cela se pase en dex étapes:

Déclarer l'identifiant unique (hadle) de l'aattribut
Configurer l'attribut en lui même.

Notez qu'ici nous vérifions avec un condition if que l'atribut n'existe pas déjà.

Installer une attribut de type liste de sélection

$maListeAttrKey=CollectionAttributeKey::getByHandle('mon_attribut_liste');
	if( !$maListeAttrKey || !intval($maListeAttrKey->getAttributeKeyID()) ) {
		$maListeAttrKey = CollectionAttributeKey::add('mon_attribut_liste', t('Nom de mon attribut liste affiché'), false, null, 'SELECT');
		//fill the value inside the background attribute
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'valeur1', 0, 0);
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'valeur2', 0, 0);
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'valeur3', 0, 0);
		...
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'valeurn-1', 0, 0);
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'valeurn', 0, 0);
	}

Les étapes sont les mêmes que précedemment, seul la configuration des valeurs de l'attribut changent, ainsi que la déclaration de son type.

Nous pourrions également utiliser la méthode suivante:

$data['ctHandle'] = 'nom_du_paquet';
$data['ctName'] = t('Mon paquet');
$eve = CollectionType::add($data, $pkg);
 
$ak = CollectionAttributeKey::getByHandle('mon_attribut_liste');
		if(!is_object($ak)) {
			$cab = CollectionAttributeKey::add('SELECT',array('akHandle' => 'mon_attribut_liste', 'akName' => t('Nom de mon attribut liste affiché'), 'akIsSearchable' => true), $pkg);
			$opt = new SelectAttributeTypeOption(0, t('valeur1'), 1);
			$opt->saveOrCreate($cab);
			$opt = new SelectAttributeTypeOption(0, t('valeur1'), 2);
			$opt->saveOrCreate($cab);
			$opt = new SelectAttributeTypeOption(0, t("valeur3"), 3);
			$opt->saveOrCreate($cab);
			$eve->assignCollectionAttribute($cab);
		}

Installer un attribut de type image

$monImageAttrKey = CollectionAttributeKey::add('IMAGE_FILE', array('akHandle' => 'mon_attribut_image', 'akName' => t('Nom de mon attribut image affiché'), 'akIsSearchable' => true), $pkg);

Ici nous installons l'atribut en une ligne, sans vérifiaction d'existance préalable, par exemple.

Résumé

Cela nous donnerait une fonction du type:

public function install() {
	$pkg = parent::install();
	//installation de l'attribut booleen
	$attrBoolAttrKey=CollectionAttributeKey::getByHandle('mon_attribut_checkbox');
	if( !$attrBoolAttrKey || !intval($sattrBoolAttrKey->getAttributeKeyID()) ) {
		$attrBoolAttrKey = CollectionAttributeKey::add('mon_attribut_checkbox', t('Nom de mon attribut check box affiché'), false, null, 'BOOLEAN');
	}
	//installation de la liste
	$maListeAttrKey=CollectionAttributeKey::getByHandle('mon_attribut_liste');
	if( !$maListeAttrKey || !intval($maListeAttrKey->getAttributeKeyID()) ) {
		$maListeAttrKey = CollectionAttributeKey::add('mon_attribut_liste', t('Nom de mon attribut liste affiché'), false, null, 'SELECT');
		//fill the value inside the background attribute
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'valeur1', 0, 0);
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'valeur2', 0, 0);
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'valeur3', 0, 0);
		...
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'valeurn-1', 0, 0);
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'valeurn', 0, 0);
	}
	// installation du theme
		PageTheme::add('mon_theme', $pkg);
	}

Nous installons ici les attributs, puis le thème. C'est la configuration la plus simple qui a été choisie pour cet exemple, faisant abstraction des assignations spécifiques ou des collections d'attributs.

Les autres type d'attributs étant moins utilisés pour le contrôle de page de thème, qui est notre sujet ici, sont également facielement installables.

Installer un attribut type notation

$monSondageAttrKey = CollectionAttributeKey::add('RATING',array('akHandle' => 'mon_attribut_rating', 'akName' => t('Nom de mon attribut notation affiché'), 'akIsSearchable' => true), $pkg);

Etc ...

Utiliser les attributs sur un thème

Pour le moment les attributs sont effectivements installés, et paramétrables, mais n'ont aucune incidence sur votre thème.

Exemple simple d'utilisation d'attribut sur un thème

Nous considéront ici que l'attribut de type liste de l'exemple précedent sera utilisé pour changer les styles css du site. de ce fit nous considérons que plusieurs feuilles de styls CSS sont préalablement définies.

Prenoms par exemple trois types de colorimétries, rouge, bleue et verte.
Nous avons créé notre thème avec sont style par défaut puis réécrit les styles qui nous intéresses dans trois autre feuilles:

/mon_paquet/themes/mon_theme/main.css
/mon_paquet/themes/mon_theme/typographie.css
/mon_paquet/themes/mon_theme/css/styles_rouge.css
/mon_paquet/themes/mon_theme/css/styles_bleu.css
/mon_paquet/themes/mon_theme/css/styles_vert.css

Et nous avons uniquement réécrit les styles que nous voulons modifier par rapport à typographie.css et main.css dans les trois autres feuilles.

Définir le style css en fonction d'un attribut de page

Pour simplifier les choses nous allons mettre notre code dans le fichier

/mon_paquet/themes/mon_theme/elements/header.php

dans lequel nos feuilles de styles sont appellées:

<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />

La vairable colorimétrie changera ici en fonction de la valeur de l'attribut paramétré dans les propriétés des pages.

Nous considérons que notre attribut à été injecté par le contrôlleur selon le code suivant (pour reprendre l'exemple précédent)

$maListeAttrKey=CollectionAttributeKey::getByHandle('mon_attribut_liste');
	if( !$maListeAttrKey || !intval($maListeAttrKey->getAttributeKeyID()) ) {
		$maListeAttrKey = CollectionAttributeKey::add('mon_attribut_liste', t('Nom de mon attribut liste affiché'), false, null, 'SELECT');
		//fill the value inside the background attribute
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'bleu', 0, 0);
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'vert', 0, 0);
		$maListeAttributeTypeOption = SelectAttributeTypeOption::add( $maListeAttrKey, 'rouge', 0, 0);
	}

Afin d'utiliser celui-ci nous allons récupérer la vaaleur de notre attribut et définir le comportement a adpoter en fonction de celle-ci.

Le fichier header.php commencera donc avec le code:

<?php  defined('C5_EXECUTE') or die("Access Denied.");
// paramétrage des couleurs
// récupération de la valeur de l'attribut
$mon_attribut = $c->getCollectionAttributeValue('mon_attribut_liste');
// définition par défaut si l'attribut n'est pas paramétré
if ($mon_attribut=="") { $couleur_choisie="vide"; } else { $couleur_choisie = htmlentities($mon_attribut, ENT_QUOTES); }
// sélecteur en fonction de la valeur de l'attribut 
switch ($couleur_choisie)
	{
	case ($couleur_choisie == "bleu"):
		$colorimetrie="styles_bleu";
		break;
	case ($couleur_choisie == "vert"):
		$colorimetrie = 'styles_vert';
		break;
	case ($couleur_choisie == "rouge"):
		$colorimetrie = 'styles_rouge';
		break;
	case ($couleur_choisie == "vide"):
		$colorimetrie = "vide";
		break;
	default:
		$colorimetrie="";
		break;
}
// définition par défaut si rien n'est choisi
if ($couleur_choisie == "") { $colorimetrie="vide"; };
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nous savons maintenant qu'en fonction de la valeur de l'attribut notre variable $colorimetrie prendra comme valeur le nom de notre feuille de styles.

Ces feuilles sont luent par le navigateur dans leur ordre d'appel, ce qui nous permet de charger la feuille par défaut à chaque fois et ne réécrire que les règles consernées lors de l'appl de notre feuille variable.

Si vous réécrivez des styles de typographie ceux-ci n'apparaitrons que sur le site, pas dans l'édietur de contenu. Celui-ci ne chageant que typography.css

Nous ajoutons donc notre feuille de stle variable:

<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
// nous ne chargeaons la feuille que si l'attribut est défini sur une couleur
<?php if ($colorimetrie != "" || $colorimetrie != "vide") { ?>
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('css/'.$colorimetrie.'.css')?>" />
<?php } ?>

Conclusion

Votre site web changera de couleur, ou d'apparence selons les styles définis, siplement grâce à un choix d'attribut. vous n'avez pas besoins d'écrire 4 thèmes différents.

On peut aller bien plus loins en contrôlant autre chose que des CSS ou en fractionnant les styls à réécrire, etc ..

C'est une des méthodes utilisées pour le thème Modulo