[Resolved] Resize block image

[Author]

Posts

[rudolphv]

I seem to have run into a problem, which I describe first: when I dynamically link an images in a new Toolset Content template for my Models dbs I can set the desired size (my defaults are 100x100, 200x200, 400x400 and 800x800 pixels max) but when I save and preview the image it shows at the 800x800 max size, independent of the selection I made. When I go back in the edit mode I cannot see the box to choose from the 4 default sizes anymore.
I did see there was a similar issue that was solved in the Toolset Blocks 1.5 release. I installed this but no change.
On my existing templates I get all kind of error messages but that might have to do with the fact that I just before the problem installed WP Stateless and moved my 20k+ images from the default Media Library directory to Google Cloud. After deleting all existing databases, media library AND relevant attachment entries is wp-posts/ wp-postmeta files I reinstalled my databases with WPAllimport and all looked good, the Web library has the correct links to the cloud image locations and WP has created the 4 image sizes. Elementor published the different formats w/o any problem. But as existing Toolset Content causes error messages I decided to rebuild them ( just started to set up the site, no harm done) and I ran into the above issue…… Is it the software or a dopey user ???

I add screenshots from the image resize issue on the new template , and screenshots from error messages/email for existing templates.
The email from WP suggest recovery mode: I saw a conflict between Toolset Views ( which one of the earlier error messages asked me to reinstall) so disabled it, and reinstalled Toolset Blocks (1.4.2) again. That made the site accessible in the normal way. Afterwards I upgraded to 1.5

[Jamal]

From what I could gather so far, I am not sure if the plugin is not compatible with Toolset, or if the plugin's settings are not correct.

I built a copy of your website and worked on it locally. First, I deactivated the theme and all the plugins(including WP Stateless), and I created a new custom post type to test with. The issue was not reproduced. I was able to select the registered sizes or a custom size for the image without issues.

Then, I realized that you have activated the "Ephemeral" mode in WP Stateless. According to the label, it will use the local uploads folder temporarily. This means that the Toolset Blocks will not find the image in the uploads folder and will not be able to resize it for the preview in the blocks editor, which triggers the error I shared in the chat. hidden link

The WP Stateless plugin has a CDN mode which will serve the image from Google servers but will keep the images in the uploads folder too. This way, Toolset Blocks will find the image to resize.
The WP Stateless plugin has also a compatibility mode for dynamic images, in Library->Stateless Settings->Compatibility(tab). I assume that this mode will make it sync dynamically created images(especially for custom sizes) to Google servers. You will need to check with the plugin's authors if that's what is meant to do.

It also has a "Sync" tab that offers some syncing actions, maybe that's useful too. You will need to check with the plugin's authors this too.

It also offers a link in images in Media->Library to "Regenerate and Sync with GCS". Check this screenshot hidden link
But, I suspect that this will work only for the registered sizes. These sizes hidden link

Honestly, I am not sure about all these assumptions, but I could not test them from my local copy, maybe because of a configuration for Google services. Check this notice I am getting hidden link
Please reach out to the plugin's authors and ask for assistance too. Maybe they will provide information that will help us figure this out.

You may also want to test the possible settings of the plugin in your server, remember, that you will need to upload new images in order to test because the existing images will always return the URL from google servers.

Let us know what you will get and we'll do our best to help.

[rudolphv]

Hi Jamal, thanks for the detailed reply. I will dive into it in the coming days, I am away from home a lot right now. Loads to test, but I agree a play with the WPStateless settings makes sense. I was surprised it worked straight out of "the box".
One comment: I moved to WPStateless and Google Cloud because 20k+ images in the ridgetopresources.com/public_html/wp-content/uploads directory proved unworkable. host file manager and even FTP could not work w more than 10 k images and the access to the plugin directories in this /uploads directory would be blocked. So any solution that places image files also in /uploads folder would be unworkable for me, they have to be only on the Google Cloud drive.
In worst worst case I can do what I had to do in WIX: standardize all images in 800 by 800 squares (batch job to resize and fill missing background areas in with background colour of the web page). That way I can call all images direct from database as URL to Google Cloud. But had hoped to avoid this. I Will come back on it ASAP, thanks Ruud

[Jamal]

Thank you Ruud for your feedback. Let me know what you will get. I also recommend that you ask the WP Stateless team about their opinion on this case(dynamic generation of resized images, especially for custom sizes, not the registered sizes).

I would also like to add, that you can use the default Image block from WordPress with the Toolset dynamic option to pull the image. The block has a setting to pull the image dynamically, added by Toolset, choose what image. And the block offers an easy resizing method using CSS to 25% 50% 75% and 100%.

I'll set this ticket as waiting for your reply, which should keep it open for 2 weeks. If it gets closed before you get the chance to test this, please create a new ticket, refer to this one, and ask to assign it to me.

[rudolphv]

Hi Jamal, Just a short reply, I did not have time to do all tests I had in mind yet but am working on two solutions:

- Different plugin for Cloud upload. WPStateless does not seem to be maintained any longer and has no active support team. So I chucked them and installed Media Cloud. First cleaned out Cloud bucket and all wp-post/wp-postmeta references to the images. And then imported a limited dataset for the Objects database. Media Cloud does the job but I did notice it still does what WPStaless did: create different copies of the same image on Google Cloud. See Media Cloud Double Entries screenshot. I thought it happened because I sometimes call the same image in different databases, But in this case it happened after only importing the Objects database. So that I need to sort with their (hopefully functioning ) support team. But with Media Cloud the dynamic generation of resizing images still does not work, see other screenshots. Even if you use CSS size settings the effect does not show up on the live page.

- I could forget about WordPress image size setting (set all to 0 0) and upload every image in two sizes max 800 and max 200 pixels. This way I can use 800 for pages with few bigger images (and control size if necessary by column width etc. ) and use 200 for archive pages w loads of images. Your suggestion of WordPress image block with % reduction works to show correct format but would slow down the site by downloading multiple images in 800 if say the archive page only uses 150 or 200-pixel images (but many!).

So at least it seems it is not a WP Stateless issue only, but it might still be caused by some setting on my site.

I will do more tests, but might go for the second option as it will work for me and I have the scripts for resizing/renaming etc.

Cheers (and yell when you want to play with this configuration, I am planning to change it again to test option 2)

Ruud

[rudolphv]

Hi Jamal, I had another play and a hard think about using images in the Cloud software, there seem to be more issues involved than I want to deal with. So I went back to the WordPress basics; storage of 3 image sizes (original plus 400 pixels plus 200 pixels) stored in year/month folders in the /uploads/ folder. I have to spread out the upload to these folders a bit to keep them under 10.000 images (FTP /server limit) but it seems a much more standard and therefore stable and straightforward way to manage the site. I am an engineer, sometimes you want to do things complicated for the hell of it 🙂
Big thanks for your help, I am learning a lot every day. I could not build the site's functionality w/o Toolset and its great support. Thanks !!!