I am new to WordPress, and I started with my own custom theme.
For responsive images in WordPress, I currently use custom html blocks in my theme with picture or img elements that use multiple uploaded images I have custom cropped and compressed to support different resolutions and media sizes (for picture elements with source elements) with x descriptors for srcsets. I have currently disabled WordPress from automatically creating multiple image sizes when uploading an image. It’s a lot of work, but I get exactly what I want. I don’t like using srcset with w descriptors and sizes inside img elements since mobile devices with high device pixel ratios (e.g., 3x, 4x) will always request larger image sizes than what I would like to serve them.
I’ve spent a lot of time online researching solutions on how to implement WordPress responsive images, but haven’t found anything really helpful. Some articles suggest uploading your largest image that you have custom cropped and compressed and adding custom image sizes to WordPress’ functions.php file, which will allow WordPress to generate other image sizes for you. However, I do not want WordPress to automatically make every single different image size when I upload one image file. WordPress’ image block also uses w descriptors and sizes, which I am not in favor of using.
If I have to use WordPress’ image block, is there a way to customize srcset with w descriptors and sizes within the image block itself?
I’m learning JavaScript and React so I can possibly create my own image block via a plugin that supports multiple image uploads. Are multiple image uploads within a custom image block even possible with WordPress?
I would also like to know if you can group individual .jpg images that I have custom cropped and compressed as a single attachment in WordPress’ database when uploading? Is there a hook or are there multiple hooks I can use to accomplish this or is this not possible with WordPress?
Could someone make a suggestion or point me to an article or discussion for a better responsive image solution in WordPress?
Sincerely,
Matt
1 Answer
Unfortunately, I’ve found the images within Gutenberg/block editor a lot left to be desired and the development work with images in 2020 has been primarily focused on adding cropping, rotating images within the block editor.
The limitations of responsive images in the block editor is one of my biggest criticisms of the block editor.
What you’ve described so far is impressive and writing up your findings in more details would probably help others who are trying to figure out the best practices of images within the block editor.
Issue #6177 has a lot of the background and discussion on improving the use of responsive images in the block editor although some of the information may be out of date already.
If I have to use WordPress’ image block, is there a way to customize srcset with w descriptors and sizes within the image block itself?
Unfortunately, it’s not yet possible unless you do some extensive customization where you would write this functionality yourself.
There is an open issue to add/customize the default srcset sizes on Gutenberg’s image block.
Are multiple image uploads within a custom image block even possible with WordPress?
The core WordPress image block is designed to only do one image; for multiple images, use the gallery block.
However, I do not want WordPress to automatically make every single different image size when I upload one image file.
Agreed, there may be some instances when you do not every this is a frustration with and exists within the entire WordPress ecosystem, not just within the block editor. I’ve heard of one solution where you could customize which images sizes are made when you upload image within a custom post type but that’s a bit round-about way to do it.
Lastly, one of the fundamental issues, in my more layman’s opinion, is that the underlying code for a single image block is different than the one used for Gallery which allows you to implement so some of the code underneath cannot be shared. (reference: https://github.com/WordPress/gutenberg/issues/10057#issuecomment-617000905 and https://github.com/WordPress/gutenberg/issues/11436
