[Astuce] Image : différence de structure entre un article seul ou un article en Blog

[SuperVespa]

Bonjour à tous,

Je commence à migrer mes sites Joomla 3 en version 4 et je découvre une différence plutôt incohérente dans la structure des articles. Je tente de m'expliquer de manière simple ...

L'affichage d'un article unique est structuré d'une manière logique, comme suit :

<div item-page>
<div page-header>TITRE</div>
<figure item-image>IMAGE</figure>
<div com-content-article>CONTENUS</div>
<span pagination>PAGINATION</span>
</div>

Cela me permet de modifier l'ordre d'affichage avec Flex, par exemple en faisant passer l'image avant le titre de l'article (tout dépend de mon template et de ma mise en page).

Là où je trouve Joomla 4 incohérent, c'est lors de l'affichage des articles sous forme de Blog.

<div blog-item>
<figure item-image>IMAGE</figure>
<div item-content>
<div page-header>TITRE</div><p intro></p> ...
</div>
</div>

Dans ce cas, l'image <figure> est en dehors du conteneur <div item-content> et je ne peux donc plus la faire passer après le titre avec Flex. Pour cela, je dois créer une substitution HTML et modifier manuellement l'ordre dans le composant d'affichage.

Mais je trouve cela (trop) invasif ... Je me demande vraiment pourquoi l'image ne se trouve pas dans le même conteneur <div item-content> (à mon sens, ce serait plus logique).

Qui peut m'en dire plus à ce sujet ???
Merci par avance ...

[Colnem30]

Salut

Constates-tu la même inversion sous le template Cassiopea?

[woluweb]

Je sais pas si j'ai la réponse ultime à ça, mais une des raisons c'est qu'il y a plus que "avant/après" le titre.

Regardons https://www.whatt.eu/fr/blogs-podcasts
J'ai juste mis la classe "image-right image-alternate" au menu item... et du coup ça alterne les images, une fois à gauche, une fois droite

[SuperVespa]

Constates-tu la même inversion sous le template Cassiopea?

Salut Colnem30,

Changer de template ne modifie pas l'ordre d'affichage des éléments des articles (item ou blog).

[SuperVespa]

J'ai juste mis la classe "image-right image-alternate" au menu item... et du coup ça alterne les images, une fois à gauche, une fois droite

Salut woluweb,

Selon ton template & les feuilles de style CSS, on peut effectivement changer l'affichage de l'image, à droite ou à gauche. Mais cela ne change pas l'ordre d'affichage des éléments dans le code HTML ...

1. Dans un article unique : <figure item-image>IMAGE</figure> se trouve après le titre et avant le contenu. Mais les 3 éléments sont ensemble, au même niveau dans une DIV commune (on peut donc les réordonner différemment avec Flex).

<div item-page>
<div page-header>TITRE</div>
<figure item-image>IMAGE</figure>
<div com-content-article>CONTENUS</div>
<span pagination>PAGINATION</span>
</div>


2. Dans un article en Blog : <figure item-image>IMAGE</figure> se trouve avant le titre et le contenu. Mais surtout, l'image n'est pas dans la même DIV que le titre et les contenus.

<div blog-item>
<figure item-image>IMAGE</figure>
<div item-content>
<div page-header>TITRE</div><p intro></p> ...
</div>
</div>

Avec Flex, je ne peux donc pas placer l'image entre le titre et les contenus !

C'est ce que je trouve incohérent avec Joomla 4 ...

[woluweb]

je disais pas que ça changeait l'ordre
tu demandais pourquoi, je notais que ça n'empêchait pas de changer certaines dispositions.

(Une autre raison est peut-être l'accessibilité si "content" est censé viser le texte et pas l'illustration ?)

Maintenant, de fait ça ne permet pas de permuter n'importe comment, comme tu le souhaites

[SuperVespa]

Salut !

Pour tous ceux qui trouvent également que la différence de placement des images entre les articles seuls ou en blog est vraiment stupide dans Joomla 4 (désolé, je n'arrive pas à comprendre cette logique), voici une solution pour replacer les images après le titre (en vue «Blog»).

1. Aller dans Système > Templates du site
2. Ouvrir votre template
3. Créer une substitution : com_content > category > blog_item.php
4. Couper la ligne 35 : <?php echo LayoutHelper::render('joomla.content.intro_image', $this->item); ?>
5. Coller en dessous de la ligne 42 (qui affiche le titre de l'article)

Extrait du code : cela donne le résultat suivant (voir la ligne déplacée en rouge) :

/**
* @package Joomla.Site
* @subpackage com_content
*
* (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Language\Associations;
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Uri\Uri;
use Joomla\Component\Content\Administrator\Extension\C ontentComponent;
use Joomla\Component\Content\Site\Helper\RouteHelper;

// Create a shortcut for params.
$params = $this->item->params;
$canEdit = $this->item->params->get('access-edit');
$info = $params->get('info_block_position', 0);

// Check if associations are implemented. If they are, define the parameter.
$assocParam = (Associations::isEnabled() && $params->get('show_associations'));

$currentDate = Factory::getDate()->format('Y-m-d H:i:s');
$isUnpublished = ($this->item->state == ContentComponent::CONDITION_UNPUBLISHED || $this->item->publish_up > $currentDate)
|| ($this->item->publish_down < $currentDate && $this->item->publish_down !== null);

?>

<div class="item-content">
<?php if ($isUnpublished) : ?>
<div class="system-unpublished">
<?php endif; ?>

<?php echo LayoutHelper::render('joomla.content.blog_style_de fault_item_title', $this->item); ?>

<?php echo LayoutHelper::render('joomla.content.intro_image', $this->item); ?>

<?php if ($canEdit) : ?>
<?php echo LayoutHelper::render('joomla.content.icons', ['params' => $params, 'item' => $this->item]); ?>
<?php endif; ?>

.... (suite) ...