MG 2.0 Apply a css class to the media gallery thumbnail

[Nuno]

Hi

I need to apply a css class to the media gallery thumbnail in src/addons/XFMG/Listener.php line 186

<img class='xfmgThumbnail-image' src='{$outputUrl}' alt='{$title}' />

to

<img class='xfmgThumbnail-image MYCLASS' src='{$outputUrl}' alt='{$title}' />

How can I do this?

Thanks

 

[Nuno]

Hello

Is it possible to extend XFMG Listener?

I would like to add a css class to the output of the image tag from line 186 located at src/addons/XFMG/Listener.php.

<img class='xfmgThumbnail-image' src='{$outputUrl}' alt='{$title}' />

to:

<img class='xfmgThumbnail-image MYCLASS' src='{$outputUrl}' alt='{$title}' />

but I can't extend the Listener?

<?php

namespace MY\Addon\src\addons\XFMG;

class Listener extends XFCP_Listener
{
    public static function templaterSetup(\XF\Container $container, \XF\Template\Templater &$templater)
    {
        echo "hello world";
    }
}

I tested with namespace MY\Addon\src\addons\XFMG and namespace MY\Addon\XFMG without success.

Thanks

 

[Chris D]

Ok, so let's talk about this here, rather than the suggestion thread.

What is the class you need to add and why? We'll need some context before we can consider making changes here.

 

[Nuno]

Ok ..

This is related to the other thread ... what I want is to add a css class to this line (186) in XFMG\Listener.php:

<img class='xfmgThumbnail-image MYCLASS' src='{$outputUrl}' alt='{$title}' />

In XF1.5 this was in a template and now in XF2 it's coded.

Thanks for you help!

 

[Chris D]

Yep, I get that it's related to that.

What I'm asking is, what is the class you need to add and why do you need to add it?

It's very difficult to justify fairly significant changes without some idea as to why the change needs to be made. It's worth noting that the approach here is not dissimilar from other templater functions used throughout XF and XFRM too.

So, what is the MYCLASS actually going to be used for?

 

[Nuno]

Hi

My board is travel related and users post a huge amount of photos in posts and gallery.

In XF 1.5 I applied the lazyload either to posts and gallery to minimize mobile download impact.

In XF2 I already applied lazyload to posts using template modifications and would like to do the same to the gallery.

The lazyload script is this:

GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without...

github.com

The class is "lazyload".

Thanks!

 

[Chris D]

It's worth noting that your lazy load library does appear to support custom class names, so that could be something for you to explore:

GitHub - aFarkas/lazysizes: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without...

github.com

But aside from that, as I mentioned before, the pattern we're using here isn't exactly uncommon. There are a lot of templater functions which return HTML and that's not exactly something we necessarily want to convert entirely to rendered templates in a lot of the simpler cases (such as this one) or cases where we don't necessarily want the HTML structure to be modified.

However, coming in XF 2.1 is something which will allow you to use class extensions to change the templater function, which should help.

It's something we've been considering for a while and added earlier today, so you will first be able to do it in the next XFMG 2.1 release.

You will just need to extend the XFMG\Template\TemplaterSetup class and modify the return value of the fnThumbnail method in there.

As a side note, I'm not sure if your lazy load library is intelligent enough to find and work on a child image, but if it does then there is a solution you could implement straight away.

What I mean is, if the HTML had this structure:

<div class="xfmgThumbnail lazyload">
    <img class='xfmgThumbnail-image' src='some/url' alt='some title' />
    <span class='xfmgThumbnail-icon'></span>
</div>

Would it pick up the lazyload class on the div element, and then find the child img element and lazy load that?

If so, then the XFMG thumbnail templater function does support passing in a custom class name, e.g:

{{ xfmg_thumbnail($item, 'xfmgThumbnail--smallest') }}

Would change to:

{{ xfmg_thumbnail($item, 'xfmgThumbnail--smallest lazyload') }}

This:

{{ xfmg_thumbnail($album) }}

Would change to:

{{ xfmg_thumbnail($album, 'lazyload') }}

And so on.

Hopefully that helps, but not sure we'll be making any changes here in the near future. I'll leave your suggestion thread open though.

 

[Nuno]

HI

Forget to add the data-src="original image" and src="base64 encoded image".

<img class='xfmgThumbnail-image lazyload' data-src='some/url' src="" alt='some title' />

Is this possible?

 

[Chris D]

For that you'd need to wait until XF 2.1 Beta 6 and apply the changes using the class extension approach.