1

I'm not good in php, more a css/sass html specialist. I had an module (latest articles) and I needed to add the intro image. With Joomla 3 I did it like this:

<div class="nieuwsfotos" style="background-image: url(<?php $images = json_decode($item->images); ?><?php echo htmlspecialchars($images->image_intro); ?>)" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" /> </div>

This made it possible to add the image in front of the headline. But this does not work for Joomla 4.

Anybody knows how to code this?

1 Answer 1

2

You can get the equivalent of what you had in Joomla 3 by going into System / Templates then clicking on Cassiopeia (or whatever site template you're using) Details and Files, and then creating a template override of the module mod_articles_latest.

Once you've created the override, in the Editor tab edit the module file default.php which is found under /templates/cassiopeia / html / mod_articles_latest / default.php.

Place your <div> code around the <a> element in that file, ie replace:

<a href="<?php echo $item->link; ?>" itemprop="url">
    <span itemprop="name">
        <?php echo $item->title; ?>
    </span>
</a>

with

<div class="nieuwsfotos" style="background-image: url(<?php $images = json_decode($item->images); ?><?php echo htmlspecialchars($images->image_intro); ?>)" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>" />
    <a href="<?php echo $item->link; ?>" itemprop="url">
        <span itemprop="name">
            <?php echo $item->title; ?>
        </span>
    </a>
</div>

If you need help with template overrides then there are plenty of tutorials online, eg https://magazine.joomla.org/all-issues/july-2022/joomla-override-management, https://docs.joomla.org/J3.x:Layout_Overrides_in_Joomla https://docs.joomla.org/Understanding_Output_Overrides (although some of these are a bit outdated).

2
  • I needed to do a bit more to make ik work, but it does work now: <div class="nieuwsblokitems"> <?php $article_images = json_decode($item->images); $article_image = ''; $article_image_alt = ''; if(isset($article_images->image_intro) && !empty($article_images->image_intro)) { $article_image = $article_images->image_intro; $article_image_alt = $article_images->image_intro_alt; }?> <div class="nieuwsfoto"> <a href="<?php echo $item->link; ?>"><span class="nieuwsfotos" style="background-image: url(<?php echo $article_image;?>" /></span></a> </div>
    – MrMarcie
    Commented Jul 17, 2023 at 21:51
  • Looks good. Glad you got it sorted. Commented Jul 18, 2023 at 7:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.