164 Posts
redback
9 years ago
6
Topic

Hello Sebloders,

i have the goal to add classes to the the img tag. The purpose is to use Lazy Load and i don't want that all picture a managed by lazy load. To achieve this i need to set the class "lazy" to the img tag. If i set a class in the Mark-Up, it will be added just to the div. I using the standard templates of seblod. I know i can write the markup by my own, but is there a way to save the work?

Best 

Chris

Get a VIP membership
9 years ago
1
Level 1

Hi redback,

the way I see, is to add a field "Beforerender" in your view, and add the class manually with something like : 

$image = $fields['image_field']->html;
$fields['image_field']->html = str_replace( '<img', '<img class="lazy"', $image );

The property to modify on the image field depend on what is apply on this field (link, typo), so to be sure, make a dump of the field before.


Best regards.

Lionel

164 Posts
redback
9 years ago
0
Level 2

Hello Lionel,

your are absolutely right. I haven't thought about this way. 

Thanks for your help.

Best

Redback

233 Posts
pepperstreet
9 years ago
2
Level 1

Hello redback,

which lazy-load product do you use? A specific Joomla plugin? I assume it is based on the well-known jQuery LazyLoad by Mika Tuupola. Most plugins make use of it.

AFAIK, you can target any specific class with it. You don't have to stick with the direct IMG class. You should be able to target the IMG with the default MarkUp setting + your custom class. I think you can simply alter the selector in your script (or respective plugin parameter, if it has one)  

Good luck and best regards,
Maik

164 Posts
redback
9 years ago
1
Level 2

Hello Maik,

i m using LLFJ Plugin. There is a option to select a class within the img tag.

Its a good idea as well just to modify the plugin, that the selector works in my way.

Thanks for your input.

Best Chris

233 Posts
pepperstreet
9 years ago
0
Level 3

LLFJ... I see. Just had a quick look into the description. Seems to be limited in that particular product. 

I remember, JoomlaBamboo's free JB Library also includes the LazyLoad script. I think it has a parameter that allows the input of any custom class/containers, even multiple selectors separated by comma. 

164 Posts
redback
9 years ago
0
Level 1

The easiest solution was, to call the img file via Typo HTML Plugin and add the "lazy" class there.

Here are some orders for the  Typo HTML Plugin:

  • *value*
  • *text*
  • $cck->getValue('my_first_field');
  • $cck->getValue('my_second_field');
  • $cck->getImage_title('myfield')
  • $cck->getThumb1('myfield')
  • $cck->getImage_alt('myfield')

Best Redback

Get a Book for SEBLOD