Megamenu thumbnail and WebP images

Hello, sorry if I posted this in the wrong category.

So we have this code inside /public/application/blocks/page_list/templates/navigation/view.php

<?php
if ( is_object( $thumbnail ) ) { ?>
<div class="ccm-block-page-list-page-entry-thumbnail">
  <?php
  $img = Core::make( 'html/image', [ 'f' => $thumbnail ] );
  $tag = $img->getTag();
  $tag->addClass( 'img-fluid' );
  echo $tag;
  ?>
</div>
<?php } ?>

Our developer modified it so that it will also pull alt text into the megamenu thumbnails.

<?php if (is_object($thumbnail)) { ?>
<div class="thumbnail">
  <?php
  $img = Core::make( 'html/image', [ 'f' => $thumbnail ] );
  $tag = $img->getTag();
  $tag->addClass( 'img-fluid' );
  $altText = $thumbnail->getTitle();
  if ( $altText ) {
    $tag->alt( h( $altText ) );
  }
  echo $tag;
  ?>
</div>
<?php } ?>

And it outputs this HTML on the front end. The scripts runs through an array and spits out a different thumbnail for each section.

<div class="thumbnail">
  <img src="/path/to/image/thumb.jpg" alt="Alt Text Here" width="400" height="225" class="img-fluid">		                 
</div>

But what I need is for it to generate something like this. (.wepb served as the main image, with legacy fallback support using HTML5)

<picture>
  <source srcset="/path/to/image/thumb.webp" type="image/webp">
  <source srcset="/path/to/image/thumb.jpg" type="image/jpeg"> 
  <img src="/path/to/image/thumb.jpg" width="400" height="225" alt="Alt Text Here" class="img-fluid">
</picture>

I’m not sure if this is even possible at all using this PHP setup. I’m wondering if anyone else has encountered a situation like this that demanded the use of webp images and fallback support. I had hoped that the thumbnail part was a bit less dynamic.

There are two problems here:

  1. I don’t think the html/image helper you are using there will allow you to generate a picture Tag as you need it. - You can easily get around this by building the html markup yourself.
  2. Webp is not (yet) supported by the concrete CMS thumbnailer. The image gets turned into a jpg or png if you use it. - If you want to output the webp Image from your c5 File Manager you’ll need to use the original un- resized version.

Something like this should work, assuming you have the FileVersion Object of the original Image:

<?php if (is_object($f)):
$ih = Core::make( 'helper/image');
$thumb = $ih->getThumbnail($f,400,225);
 ?>
<picture>
  <source srcset="<?=$f->getRelativePath()?>" type="image/webp">
  <source srcset="<?=$thumb->src?>" type="image/jpeg"> 
  <img src="<?=$thumb->src?>" width="400" height="225" alt="<?=$f->getTitle()?>" class="img-fluid">
</picture>
<?php endif;?>

Actually, to get a picture tag, you just need to tell the helper like so:

$img = Core::make( 'html/image', [ 'f' => $thumbnail ], 'options' => ['usePictureTag' => true]);

Have a look in concrete\src\Html\Image.php at the __construct method for other options.

Keep in mind that for the picture tag to be generated properly, your theme has to define image sizes for different screen sizes. That should be defined in the theme’s page_theme file, using the method getThemeResponsiveImageMap().

As for WebP @haeflimi is right, Concrete doesn’t support it yet.

Thanks for the replies guys.

I know Concrete doesn’t support webp, and that’s why we’re using the " Lemonbrain Webp" extension so that we can auto generate WEBP images on the server for each instance of the Image block, but for most of the time (for HTML blocks) I’ll need to export a webp image locally and simply upload it to the same folder where the jpg image exists.

This being said, since I’ll have two images that both have a unique URL i.e. “/application/files/1234/5678/”, how is the <?=$f->getRelativePath()?> going to know what path to use for the webp version?

I hate to say it but it is beginning to sound like I won’t be able to get this code to work in navigation megamenu without having some serious development customization done again. I am not sure I want to risk breaking the website myself.

Where do I find this?

@MikeKennedy that’s the exact file to look for, on your server, in the “concrete” folder then the “src” folder then the Html folder and finally the file Image.php

(Not suggesting you should do this, just pointing out another way to tackle the problem)

I recently used my Universal Content Puller tools to configure a megamenu system.

Each megamenu was designed as a page in the sitemap, so the Main area of the page was the content of the megamenu for that page. Hence nice and easy to edit the menu. Just edit the respective page Main area and it gets used in the megamenu panel for that page. It could use layouts, containers, image blocks, page lists, further autonavs…

The page was then given a Universal Content Puller attribute specifying to pull the Main area of the page. It could similarly have been configured to pull a stack.

The final part of the system was an autonav that checked each page in the nav for the UCP attribute and, where present, displayed the attribute value on a full width banner(the pulled content, the main area of the page with the menu design for that page). Where the attribute was not present, it expanded a dropdown of further pages as usual for an autonav.

This autonav part was the only custom code as it was a theme specific autonav with a theme specific way of showing the dropdown area for the megamenu.

A useful extra was that the mobile nav simply navigated to the page providing the megamenu entry, so mobile could use the same rich menu content, just with one further navigation to get there.

1 Like