Custom HTML/Components

yoshino_digital

We have a pretty large grid on one of the pages with zoom-boxes.

The boxes always load imgages in a high resolution, eventhough less than half of it is needed at least in 3 of 4 display breakpoints.

Furtheron the grid is not working with lazy loading of wp-rocket.

There seems be no way to make the images use a srcsets.

So finally I'd like to replace zoomboxes with custom HTML, which is a pain in the ass due to the editor settings which rewoves/replaces elements - not sure if that's some kind of restriction of inline editing in general or based on the settings.

In addition the grid seems to do some respositioning by JS making it even harder to get things done.

Our customer wants to keep the gridded layout, so we need something using srcsets. Probably the best way would be adding custom HTML, because IMO there's missing one image size around 400 px to make the sourceset eficient. We already added that.

Is there any way to control the visual editor or add a custom component for grid-boxes?

In addition can we do anything to get lazyload to work with the grid?

Thanks in advance

Pablo

Hi,

Unfortunately, the only way to add sourceset for certain images which does not have this feature require theme files customization, which we do not support.

But, to help you, I provide you the path and name of the file which is responsible of that behavior.

It's in the functions folder, the file's name is theme-shortcodes.php

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

yoshino_digital

Thanks for responding.

I already knew that path, not sure if it is the best idea to change the code - i'd prefer using custom markup and keep the intended behaviour for future content.

Anyways, in case I will end up there, do you have another hint how to get the id for the image?

It's not passed by the function params but would be needed to calculate the srcset.

Thanks in advance.

Pablo

You could get the id using a js script which will take the src of that image and it will replace it with sourceset, but I'm not sure if thats gonna work.

It's just a spontaneity idea.

We suggest, to try to catch it somehow with the php and customizing the theme files - it will be the best way.

Remember to use the Child Theme to prevent loss of modifications while updating the theme.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

yoshino_digital

Thanks again for replying.

JS is probably not the way, especially when working in data that aleady exists.

I'll go the child theme way then - was trying to avoid that cause I don't have an overview of the way things are done in there and it seems there's pretty many things included in the build process.

I'll get back with more questions when I got stuck.

Thnks so far!