Tutoriel Rocksolid Custom Elements

Contribution des utilisateurs
guigui
Membre
Messages : 54
Inscription : 22 Mars 2012 11:22
Localisation : Loire-Atlantique / Vendée

Tutoriel Rocksolid Custom Elements

Messagepar guigui » 24 Juil 2015 13:29

Bonjour à tous,

J'utilise beaucoup RockSolid Custom Elements et donc comme j'ai un peu le temps en ce moment je vous fais un petit topo de cette application car certains peuvent être intéressés et ça nourrit un peu le forum !!

Comme son nom l'indique, RockSolid Custom Elements vous permet de créer votre propre contenu en BE sans avoir à utiliser le WYSIWYG ou le HTML pur, mais aussi structuré qu'un module sans en créer un .

Comme je vois que ma phrase sera compliqué à comprendre, prenons une exemple concret :

Je veux créer par exemple une Timeline sur mon site, j'aime bien celui de Codrops ( http://tympanus.net/Blueprints/VerticalTimeline/).

Dans mon BE, avant deux solutions possibles :

Soit directement dans mon élément de contenu de type texte ou HTML :

Code : Tout sélectionner

<ul class="cbp_tmtimeline">
   <li>
      <time class="cbp_tmtime" datetime="2013-04-10 18:30"><span>2013</span> </time>
      <div class="cbp_tmicon cbp_tmicon-phone"></div>
      <div class="cbp_tmlabel">
         <h2>Ricebean black-eyed pea</h2>
         <p>Winter purslane...</p>
      </div>
   </li>
   <li>
      <time class="cbp_tmtime" datetime="2013-04-11T12:04"><span>2014</span> </time>
      <div class="cbp_tmicon cbp_tmicon-screen"></div>
      <div class="cbp_tmlabel">
         <h2>Greens radish arugula</h2>
         <p>Caulie dandelion maize...</p>
      </div>
   </li>
   <li>
      <time class="cbp_tmtime" datetime="2013-04-13 05:36"><span>4/13/13</span> <span>05:36</span></time>
      <div class="cbp_tmicon cbp_tmicon-mail"></div>
      <div class="cbp_tmlabel">
         <h2>Sprout garlic kohlrabi</h2>
         <p>Parsnip lotus root...</p>
      </div>
   </li>
   <li>
      <time class="cbp_tmtime" datetime="2013-04-15 13:15"><span>4/15/13</span> <span>13:15</span></time>
      <div class="cbp_tmicon cbp_tmicon-phone"></div>
      <div class="cbp_tmlabel">
         <h2>Watercress ricebean</h2>
         <p>Peanut gourd nori...</p>
      </div>
   </li>
   <li>
      <time class="cbp_tmtime" datetime="2013-04-16 21:30"><span>4/16/13</span> <span>21:30</span></time>
      <div class="cbp_tmicon cbp_tmicon-earth"></div>
      <div class="cbp_tmlabel">
         <h2>Courgette daikon</h2>
         <p>Parsley amaranth tigernut...</p>
      </div>
   </li>
</ul>


Inconvénient : A chaque fois que je dois rajouter une date, je dois remettre du code HTML (pour les clients de certains: pas top !).

Soit je créer un module, inconvénient: long, respecter une arborescence, pas très utile pour juste un visuel en FE.

La solution vous l'aurez deviné : RockSolid Custom Elements https://contao.org/en/extension-list/view/rocksolid-custom-elements.10030019.en.html

Il suffit de créer deux fichiers dans le dossier Template, un en .php (pour le backend) et un en .html5 (FE) :

Dans mon exemple,

Le fichier timeline.php

c'est une simple création de la palette: j'ai besoin d'insérer une Date, un titre, un texte et en plus une icône (j'utilise pour plus de simplicité RockSolid Icon Picker).

Code : Tout sélectionner

<?php

return array(
   'label' => array(
      'Timeline',
      'Créer votre timeline avec icone',
   ),
   'types' => array('content'),
   'fields' => array(
            'timeline' => array(
         'label' => array('timeline', ''),
         'elementLabel' => '%s. time',
         'inputType' => 'list',
         'fields' => array(
            'icon' => array(
               'label' => array('Icon', ''),
               'inputType' => 'rocksolid_icon_picker',
               'eval' => array('tl_class' => '', 'iconFont' => 'files/mon dossier/fonts/rocksolid-icons.svg'),
            ),
            'headline' => array(
               'label' => array('Titre', ''),
               'inputType' => 'text',
               'eval' => array('tl_class' => 'long'),
            ),
            
            // pour la date je ne veux utiliser que l année
            'date' => array(
               'label' => array('date', ''),
               'filter'      => true,
                  'inputType' => 'select',
                 'options'     => range(1950,date("Y"),1),
                  'eval'         => array('mandatory'=>true, 'includeBlankOption'=>true),
            ),
            'text' => array(
               'label' => array('Text', ''),
               'inputType' => 'textarea',
               'eval' => array('rte' => 'tinyMCE'),
            ),
            
            //un petit plus si besoin, une URL
            'url' => array(
               'label' => array('Lien URL', 'Exemple: {{link_url::sitealias}}, http://example.com'),
               'inputType' => 'url',
               'eval' => array('tl_class' => 'w50'),
            ),
            'linkLabel' => array(
               'label' => array('Text du lien', ''),
               'inputType' => 'text',
               'eval' => array('tl_class' => 'w50'),
            ),
            'newWindow' => array(
               'label' => $GLOBALS['TL_LANG']['MSC']['target'],
               'inputType' => 'checkbox',
               'eval' => array('tl_class' => 'clr'),
            ),
            
            ),
         ),
      ),
   );


Ce qui donne ceci :

Image
et
Image

EDIT: Si vous voulez une date complète en sélectionnant sur le calendrier (datepicker), le code :

Code : Tout sélectionner

'date' => array(
               'label' => array('date', ''),
                   'inputType'  => 'text',
                  'eval' => array('mandatory'=>false, 'maxlength'=>10, 'rgxp'=>'date','datepicker'=>true, 'tl_class'=>'w20 wizard'),
            ),


Pour le fichier timeline.html5

Je reprend la base de Codrops et y insère les <?php echo ?> correspondant à mon BE:

Code : Tout sélectionner

<ul class="cbp_tmtimeline">
<?php foreach ($this->timeline as $index => $timelines): ?>
   <li>
      <time class="cbp_tmtime" datetime="<?php echo $timelines->date ?>"><span><?php echo $timelines->date ?></span> </time>
      <div class="cbp_tmicon" <?php if ($timelines->icon): ?> data-icon="&#x<?php echo $timelines->icon ?>;"<?php endif ?>></div>
      <div class="cbp_tmlabel">
         <?php if ($timelines->headline): ?> //ici si mon "input" est renseigné alors je le met en FE sinon je ne met rien
            <h2><?php echo $timelines->headline ?></h2>
         <?php endif ?>
         <?php if ($timelines->text): ?>
            <p><?php echo $timelines->text ?></p>
         <?php endif ?>
         <?php if ($timelines->url): ?>
         <a href="<?php echo $timelines->url ?>"<?php if ($timelines->newWindow): ?> target="_blank"<?php endif ?>>
         <?php if ($timelines->linkLabel): ?>
         <p><?php echo $timelines->linkLabel ?></p>
         </a>
      <?php else: ?>
         <p>En savoir plus...</p></a>
      <?php endif ?>
         <?php endif ?>
      </div>
   </li>
      <?php endforeach ?>
</ul>


Pour que mon Timeline soit joli, je n'ai plus qu'à insérer le style.css dans contao.

Voilà !!

RockSolid Custom Elements vous permet d'avoir une insertion d'élément de contenu propre comparer au WYSIWYG sans avoir à créer un module.

J'espère que j'ai été claire, sinon vous pouvez regarder le site de RockSolid :http://rocksolidthemes.com/de/contao/plugins/custom-content-elements/dokumentation (en allemand donc utilisez Chrome pour la traduction)

Merci de me dire si cet article vous a intéressé car on pourrait créer un sujet regroupant les différentes possibilités de cette application avec exemples.
Dernière édition par guigui le 27 Juil 2015 23:30, édité 1 fois.

Avatar de l’utilisateur
KlausGrenoble
Membre
Messages : 261
Inscription : 27 Jan 2013 00:11
Localisation : Grenoble

Re: Tutoriel Rocksolid Custom Elements

Messagepar KlausGrenoble » 24 Juil 2015 19:49

Vielen Dank
Das war sehr gut.
Weiter so !
Salutations
Klaus

Avatar de l’utilisateur
MIMATA
Membre
Messages : 449
Inscription : 23 Avr 2008 08:29
Localisation : Mérida - Mexique
Contact :

Re: Tutoriel Rocksolid Custom Elements

Messagepar MIMATA » 24 Juil 2015 22:05

Bonjour

Merci pour ce petit tutoriel simple et clair.
MIMATA - Votre Site Pro : http://www.votresitepro.com - Planète Astronomie : http://www.planete-astronomie.eu (NEW) et http://www.planete-astronomie.com - Forum de Planète Astronomie : http://forum.planete-astronomie.com - Jeu de questions Planète Astronomie : http://astroquiz.planete-astronomie.com - Vidéos de Planète Astronomie : http://videos.planete-astronomie.com

Avatar de l’utilisateur
tom-over
Membre
Messages : 829
Inscription : 23 Mai 2008 10:43
Localisation : Rouen

Re: Tutoriel Rocksolid Custom Elements

Messagepar tom-over » 27 Juil 2015 13:44

Merci pour ce tuto !

ça a l'air simple à mettre en place !

encore merci

Avatar de l’utilisateur
ST WebDesign
Membre
Messages : 289
Inscription : 29 Avr 2009 20:57
Localisation : Vendée
Contact :

Re: Tutoriel Rocksolid Custom Elements

Messagepar ST WebDesign » 21 Oct 2015 16:12

Verry Good !! Merci :D
www.igweb.fr

guigui
Membre
Messages : 54
Inscription : 22 Mars 2012 11:22
Localisation : Loire-Atlantique / Vendée

Re: Tutoriel Rocksolid Custom Elements

Messagepar guigui » 22 Oct 2015 10:04

Si ce tuto vous plaît ça me va !!

Petite subtilité que j'ai découvert :

En effet, ce tuto a été réalisé en rapport à ma version Contao : 3.3.2 !!

Donc si vous utilisez la dernière version, aujourd'hui = 3.5.4, quelques lignes de codes changent !

Exemple:

Pour sélectionner des images :

En 3.3.2

Code : Tout sélectionner

'fields' => array(
            'image' => array(
               'label' => array('Image', 'Sélectionnez une image.'),
               'inputType' => 'fileTree',
               'eval' => array(
                  'fieldType' => 'radio',
                  'filesOnly' => true,
                  'extensions' => 'jpg,jpeg,png,gif,svg',
               ),
            ),


En 3.5.4

Code : Tout sélectionner

'fields' => array(
            'image' => array(
               'label' => array(''Image', 'Sélectionnez une image.'),
               'inputType' => 'fileTree',
               'eval' => array(
                  'fieldType' => 'radio',
                  'filesOnly' => true,
                  'extensions' => \Config::get('validImageTypes'),
               ),
            ),

Avatar de l’utilisateur
ST WebDesign
Membre
Messages : 289
Inscription : 29 Avr 2009 20:57
Localisation : Vendée
Contact :

Re: Tutoriel Rocksolid Custom Elements

Messagepar ST WebDesign » 25 Fév 2016 16:33

Bien utile ton tuto : http://www.syhome.fr/qui-sommes-nous.html
Merci :-)
www.igweb.fr

guigui
Membre
Messages : 54
Inscription : 22 Mars 2012 11:22
Localisation : Loire-Atlantique / Vendée

Re: Tutoriel Rocksolid Custom Elements

Messagepar guigui » 26 Fév 2016 12:30

Ravi que le tuto serve !! (surtout pour une entreprise vendéenne !!)

Un autre code : Un tableau de prix sur services ou produits (exemple pris sur http://demo.rocksolidthemes.com/contao/tao/pricing-tables)

le Php :

Code : Tout sélectionner

<?php

return array(
   'label' => array(
      'Table des prix',
      'Tableau concernant différents prix',
   ),
   'types' => array('content'),
   'standardFields' => array('cssID', 'headline'),
   'fields' => array(
      'currencySymbol' => array(
         'label' => array('Monnaie', 'Exemple: €, $, £'),
         'inputType' => 'text',
      ),
      'plans' => array(
         'label' => array('Services', ''),
         'elementLabel' => 'Service %s',
         'inputType' => 'list',
         'fields' => array(
            'headline' => array(
               'label' => array('Titre', ''),
               'inputType' => 'text',
               'eval' => array('tl_class' => 'w50'),
            ),
            'isHighlighted' => array(
               'label' => array('En vedette', 'Colonne principale mis en évidence.'),
               'inputType' => 'checkbox',
               'eval' => array('tl_class' => 'w50 m12'),
            ),
            'price' => array(
               'label' => array('Prix', ''),
               'inputType' => 'text',
               'eval' => array('tl_class' => 'w50'),
            ),
            'priceInfo' => array(
               'label' => array('Information sur le prix (annuel ou mensuel par exemple)', ''),
               'inputType' => 'text',
               'eval' => array('tl_class' => 'w50'),
            ),
            'features' => array(
               'label' => array('Caractéristiques du produit', 'Utilisez pour chaque fonctionnalité sur sa propre ligne'),
               'inputType' => 'textarea',
               'eval' => array('tl_class' => 'clr'),
            ),
            'linkUrl' => array(
               'label' => array('lien-URL', 'Exemple: {{link_url::sitealias}} (Alias, ID ou tout autre Inserttag), http://example.com'),
               'inputType' => 'url',
               'eval' => array('tl_class' => 'w50'),
            ),
            'linkLabel' => array(
               'label' => array('Titre du lien', ''),
               'inputType' => 'text',
               'eval' => array('tl_class' => 'w50'),
            ),
         ),
      ),
   ),
);


Le fichier html5 :

Code : Tout sélectionner

<div class="pricing-table -columns- //ou votre propre class css <?php echo count($this->plans) ?> <?php echo $this->class ?>"<?php echo $this->cssID ?>>

   <?php if ($this->headline): ?>
      <<?php echo $this->hl ?>>
         <?php echo $this->headline ?>
      </<?php echo $this->hl ?>>
   <?php endif ?>

   <?php foreach ($this->plans as $index => $plan): ?>

      <section class="pricing-table-plan //ou votre propre class css <?php if ($plan->isHighlighted): ?> -highlighted<?php endif ?>">

         <?php if ($plan->headline): ?>
            <h1><?php echo $plan->headline ?></h1>
         <?php endif ?>

         <?php if ($plan->price || $plan->price === '0'): ?>
            <p>
               <b><?php echo $this->currencySymbol ?></b>
               <?php echo $plan->price ?>
               <i><?php echo $plan->priceInfo ?></i>
            </p>
         <?php endif ?>

         <?php if ($plan->features): ?>
            <ul>
               <li><?php echo str_replace("\n", "</li>\n<li>", trim($plan->features)) ?></li>
            </ul>
         <?php endif ?>

         <?php if ($plan->linkLabel): ?>
            <a href="<?php echo $plan->linkUrl ?>"><?php echo $plan->linkLabel ?></a>
         <?php endif ?>

      </section>

   <?php endforeach ?>

</div>


Après c'est du css !

Bonne continuation


Revenir vers « Tutoriels utilisateurs »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités