[Closed] Images generated by view using size='custom'

[Author]

Posts

[umbertoZ]

Hi, I've added images to my view using size='custom' attribute:

[types field='fotos' title='%%TITLE%%' alt='%%ALT%%' size='custom' width='500' height='500' resize='crop'][/types]

It created the cropped images in the Media Library. Then I decided to use add_image_size( ) function to create that size:

add_image_size( 'card-thumb', 500, 500, true );

And I've added to my view this shortcode:
[types field='fotos' title='%%TITLE%%' alt='%%ALT%%' size='card-thumb' resize='proportional'][/types]

My problem now is that all the size='custom' images are still in my Media Library. How can I bulk delete all of them?

cheers

[Christopher Amirian]

Hi there,

First thing first, make sure that you install the Generate Thumbnails plugin to make sure that all the sizes are generated correctly:

https://wordpress.org/plugins/regenerate-thumbnails/

Bulk removing media is not a feature in Toolset. I did a Google search and found the articles below that might be of help:

hidden link

And

hidden link

Thank you.

[umbertoZ]

Hi Christopher, I tried the plugins but they didn't work for me, finally I could look for the images via FTP and I could remove them, but now I've another issue.

I'm using EWWW Image Optimizer to compress and serve jpgP images. It works fine, but it doesn't work with View pagination AJAX. When I load another page it loads JPG images. It also happens with the gallery block with lightbox. When I click on the thumbnail it opens the original JPG image in the lightbox. How can I work with webP images everywhere?

cheers

[Christopher Amirian]

Hi there,

The second issue is something that is not what we can do anything about. You need to contact the image optimizer and ask how they handle Ajax stuff.

Toolset uses standard WordPress Ajax functionality and nothing extraordinary.

Thank you.

[umbertoZ]

Hi Christopher, I wrote to EWWW Image Optimizer support, they answered this:

I will note, that the reason EWWW IO only touches the first slide is that the others are loaded via admin-ajax.php, which fails our is_admin() test. But, we may be able to integrate directly with them if they have a hook that can be used for the wpv_get_view_query_results AJAX action. That would be much better than trying to do the URL replacement via JS.

If you can check with the Toolset devs about any AJAX filters available, that would be great!

I passed them the jQuery hook:

jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
});

But they answered:

While we might be able to use that, it would be much more preferable to hook into the PHP code that generates the AJAX responses, otherwise we'll hit the same "race conditions" you are and get random JPGs loading as well.

Is there any AJAX filters available?

cheers

[Christopher Amirian]

Hi there,

I asked the second-tier about that as I am not aware of such a filter.

I checked the documentation below:

https://toolset.com/documentation/programmer-reference/views-filters/

The only thing that I found is this but I am not sure if it is something that can be used by the plugin developers and it is more of a toolset user feature:

https://toolset.com/documentation/programmer-reference/adding-custom-javascript-code-to-views-that-use-ajax/

I will get back to you with the answer of the second tier.

Thanks.

[Christopher Amirian]

Hi there,

The Hook below:

https://toolset.com/documentation/programmer-reference/views-filters/#wpv_filter_query

Is triggered both when Ajax is called or with the view laod. So it has a potential to be used for the problem in question.

Thank you.

[Nigel]

Hi Umberto

I did some testing locally as I'm not familiar with how the EWWW IO plugin works, but based on my tests it appears to work correctly with a View paginated via ajax.

First, having installed the EWWWIO plugin I let it optimise all the images. In the upload folder I can see that for each img size EWWW generates a webp file with the same name as the original, appended with .webp.

So the thumbnail version of my file dogs1-150x150.jpg has a corresponding dogs1-150x150.jpg.webp file generated. Likewise all the other images and sizes.

In the EWWWIO settings, it seems that the way it works is to update the rewrite rules in .htaccess so that any request for the original .jpg image will instead return the webp version, though you wouldn't know it from the requested name. So the web page requests dogs1-150x150.jpg, and the server returns dogs1-150x150.jpg.webp.

I set up a View to query some posts, where it outputs a custom image field from each post. The View includes pagination via ajax, initially showing just one page, then paginating to the second etc.

You can see in the screenshot the network requests and what was returned.

The initial page requested dogs1-150x150.jpg, but as the screenshot shows, it is actually the webp version returned by the server.

I then paginated (via ajax) to the second page, which similarly requests cats1-150x150.jpg, but where the server actually returns the webp version (thanks to the rewrite rules in .htaccess).

If you use the browser tools to inspect the page markup, it looks like it is using the original .jpg files (because that is what is being requested), but what's actually being returned is the webp version of the image.

So, it appears to be working exactly as expected.