Tutoriels sur Joomla et la création de site

Après avoir téléchargé et installé votre thème géré par Gantry, vous pouvez le personnaliser pour apporter des modifications allant au-delà de ses paramètres et des options de particule inclus.

Par exemple, vous pouvez ajouter un champ de texte en backend qui vous permettra de facilement modifier le texte dans une zone spécifique de la page. Vous pouvez également ajouter des champs et des fonctionnalités aux particules de base de Gantry5, ainsi qu’à tout ce qui est inclus dans le thème lui-même.

La clé pour surcharger les fichiers est le dossier /custom à l’intérieur du dossier de thème principal. Ce dossier est l'endroit où vous pouvez placer les substitutions et les fichiers supplémentaires que vous aimeriez ajouter au thème sans risque de casser ou de perdre ces données lors d'une mise à jour de thème.

Nous recommandons de comparer les fichiers mis à jour sur votre version personnalisée après avoir effectué une mise à jour afin de voir si des changements qui ont été apportés seraient bénéfiques à utiliser dans votre remplacement.

Personnalisation des fichiers du thème

Dans cet exemple, nous allons ajouter un champ à la section de réglage Settings dans le panneau administratif de mise en page Layout qui vous permettra d'utiliser l'image picker pour créer une image d'arrière-plan d'une section particulière du site. Ce changement nécessite deux fichiers à copier dans le répertoire /custom et à modifier. Dans ce cas, nous utilisons le template gratuit Hydrogen pour notre exemple.

Sur la photo ci-dessus voici la section Showcase du site, qui comprend la particule Sample Content, inclus dans le theme Hydrogen. La particule elle-même ne définit l'image de fond nulle part dans son fichier twig, et dans ce cas, nous voulons créer cette capacité pour chaque section indépendemment de ses particules ou positions.

Dans Hydrogen la première chose que nous devons faire est d’ajouter le sélecteur d’Image aux options pour chaque section. Cela permettra à l’utilisateur de définir l’image d’arrière-plan de la section.

Pour ce faire, vous devrez créer une substitution de section.yaml situé dans /media/gantry5/engines/nucleus/admin/blueprints/layout/. Pour créer la surcharge, vous devez copier ce fichier et le coller dans /TEMPLATE_DIR/custom/admin/blueprints/layout/.

Voici à quoi ressemble le fichier avant nos changements :

 name: Section
 description: Layout section.
 type: section
 
 form:
   fields:
     boxed:
       type: select.selectize
       label: Layout
       description: Select the Layout container behavior. 'Inherit' refers to Page Settings.
       isset: true
       selectize:
         allowEmptyOption: true
       options:
         '': Inherit
         0: Fullwidth (Boxed Content)
         2: Fullwidth (Flushed Content)
         1: Boxed
         3: Remove Container
 
     class:
       type: input.selectize
       label: CSS Classes
       description: Enter CSS class names.
       default:
 
     extra:
       type: collection.keyvalue
       label: Tag Attributes
       description: Extra Tag attributes.
       key_placeholder: Key (data-*, style, ...)
       value_placeholder: Value
       exclude: ['id', 'class']

Pour ajouter l’option d’arrière-plan, il nous suffit de créer un champ input.imagepicker. Vous pouvez voir notre copie du fichier modifiée ci-dessous.

 name: Section
 description: Layout section.
 type: section
 
 form:
   fields:
     boxed:
       type: select.selectize
       label: Layout
       description: Select the Layout container behavior. 'Inherit' refers to Page Settings.
       isset: true
       selectize:
         allowEmptyOption: true
       options:
         '': Inherit
         0: Fullwidth (Boxed Content)
         2: Fullwidth (Flushed Content)
         1: Boxed
         3: Remove Container
 
     class:
       type: input.selectize
       label: CSS Classes
       description: Enter CSS class names.
       default:
 
     extra:
       type: collection.keyvalue
       label: Tag Attributes
       description: Extra Tag attributes.
       key_placeholder: Key (data-*, style, ...)
       value_placeholder: Value
       exclude: ['id', 'class']
 
     background:
       type: input.imagepicker
       label: Background

Voici le fichier section.html.twig avant nos modifications:

 {% set tag_type = segment.subtype|default('section') %}
 {% set attr_id = segment.attributes.id ?: 'g-' ~ segment.id %}
 {% set attr_class = segment.attributes.class %}
 {% set attr_extra = '' %}
 {% set boxed = segment.attributes.boxed %}
 {% if boxed is not null %}
     {% set boxed = boxed|trim == '' ? gantry.config.page.body.layout.sections : boxed %}
 {% endif %}
 
 {% if segment.attributes.extra %}
     {% for attributes in segment.attributes.extra %}
         {% for key, value in attributes %}
         {% set attr_extra = attr_extra ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
         {% endfor %}
     {% endfor %}
 {% endif %}
 
 {% set html %}
     {% if segment.children %}
         {% for segment in segments %}
             {% include '@nucleus/layout/' ~ segment.type ~ '.html.twig' with { 'segments':segment.children } %}
         {% endfor %}