Tweet
Bonjour tout le monde,
Pour la prochaine édition du Joomla Community Magazine, je voulais montrer comment utiliser le nouveau Custom Field de type SubForm introduit dans Joomla4.
J'ai créé trois champs :
1. Titre
2. Durée
3. Media
et je crée l'Alternate Layout suivant qui transforme ce champ répétable... en carousel.
Rien à installer et aucun script à ajouter : c'est 100% natif
Vos suggestions d'améliorations sont les bienvenues, certes pour le toilettage, mais aussi et surtout pour pouvoir ajouter l'ID de l'article à l'identifiant de la <div> du carrousel (afin de pouvoir les faire fonctionner aussi en vue blog).
Code HTML:
<?php /* this is an Alternate Layout of /components/com_fields/layouts/field/render.php */ /* for an explanation of Alternate Layout for Custom Fields, see https://magazine.joomla.org/all-issues/may-2021/explore-the-core-play-with-custom-fields-to-enrich-your-content-or-your-design */ defined('_JEXEC') or die; if (!array_key_exists('field', $displayData)) { return; } $field = $displayData['field']; /*$label = Text::_($field->label);*/ // commented bc not needed for Alternated Layout $value = $field->value; $rawvalue = $field->rawvalue; // added for Alternated Layout $showLabel = $field->params->get('showlabel'); $labelClass = $field->params->get('label_render_class'); $renderClass = $field->params->get('render_class'); if ($value == '') { return; } ?> <?php $app = JFactory::getApplication(); $view = $app->input->getCMD('view', ''); // "view" would output "article" or "category" for example // $id = $app->input->getCMD('id', ''); // "id" gives the id of the category if blog view, the id of the article if article view if ($view != "article") { return; } // if the view is not an article view (but a blog view or whatever) then nothing will be displayed ?> <?php // TO DO - customize "carouselWithCustomFields" with the ID of the article so that it would also work on a blog view where we need a unique id for each carousel ?> <?php // https://docs.joomla.org/J4.x:Using_Bootstrap_Components_in_Joomla_4 \Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel ', '#carouselWithCustomFields', ['interval' => 3000, 'pause' => 'false']); // selector is necessary for the potentials Options to work ?> <?php $items = json_decode($rawvalue, true); ?> <div id="carouselWithCustomFields" class="carousel slide carousel-fade" data-bs-ride="carousel"> <div class="carousel-indicators"> <?php $first=true; $i=0; ?> <?php foreach($items as $item): ?> <button <?php if ($first) {echo "class="active""; $first=false;} ?> type="button" data-bs-target="#carouselWithCustomFields" data-bs-slide-to="<?php echo $i; ?>" aria-current="true" aria-label="<?php echo $item['field1']; ?>"></button> <?php $i=$i+1; ?> <?php endforeach; ?> </div> <div class="carousel-inner"> <?php $first=true; ?> <?php foreach($items as $item): ?> <div class="carousel-item <?php if ($first) {echo "active"; $first=false;} ?>" data-bs-interval="<?php echo 1000*$item['field2']; ?>"> <img class="d-block w-100" src="<?php echo $item['field3']['imagefile']; ?>" /> <div class="carousel-caption d-none d-md-block"> <h5><?php echo $item['field1']; ?></h5> </div> </div> <?php endforeach; ?> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselWithCustomFields" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselWithCustomFields" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <?php $myCarouselCss = <<<MYCSS /* example of CSS for bootstrap.carousel - adding a background to the carousel-caption - see https://ui.glass/generator/ for glassmorphism CSS */ .carousel-caption { bottom: 40%; /* otherwise with our background too close from Indicators with the default 1.25rem */ left: 25%; /* to make it narrower than with the default 15% */ right: 25%; /* to make it narrower than with the default 15% */ backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); background-color: rgba(0,0,0,0.5); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.125); } /* by default the custom fields appear in a Unordered List. To make the carousel start on the left and hide the bullet point we use a negative margin */ li.field-entry.mycarousel { margin-left: -2rem; } MYCSS; use Joomla\CMS\Factory; $doc = Factory::getDocument(); $doc->addStyleDeclaration($myCarouselCss); ?> <?php // Everything after the "return" will be ignored ?> <?php return ?> <?php // this would render the value of the Custom Field ?> <span class="field-value <?php echo $renderClass; ?>"><?php echo $value; ?></span> <?php // this would render the rawvalue of the Custom Field ?> <span class="field-value <?php echo $renderClass; ?>"><?php echo $rawvalue; ?></span> <?php // this would render the json as numbered list ?> <?php $items = json_decode($rawvalue, true); ?> <?php foreach($items as $item): ?> <ul> <li><?php echo $item['field1']; ?></li> <li><?php echo $item['field2']; ?></li> <li><?php echo $item['field3']['imagefile']; ?></li> </ul> <?php endforeach; ?>
).
Commentaire