search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.51k stars 4.2k forks source link

Enhancement: images handling #6177

Open azaozz opened 6 years ago

azaozz commented 6 years ago

This is a "mini-proposal" on how to handle images in the editor and the front-end (follow-up from #4914).

Currently:

To fix this in the editor:

To fix this for the front-end:

Implementing all of the above will ensure all images are always "retina ready" both in the editor and on the site. It will also improve handling on the front-end and optimize image loading there.

This will also affect other enhancements, mostly #4914. Also, as described in #6131 the themes will be able to add more precise sizes attributes for the different images.

chrisvanpatten commented 5 years ago

@joemcgill Can you clarify this:

Save a more appropriate width to img elements in post content (best practice, but also relevant for calculating a default sizes attribute for responsive images).

What makes a "more appropriate" width? Just trying to understand the parameters of that particular item as I'm not sure I do now :)

mor10 commented 5 years ago

To the intrinsic size / jank question, this is now relevant:

https://www.chromestatus.com/feature/4704436815396864 https://codepen.io/eeeps/pen/qLKwEZ

yratof commented 5 years ago

Disappointing thread to read; as I can't see any progress that has been made. The solution at the moment, is to mearly upload the images at the exact size needed and either double up the size or ignore retina — is there any progress that will make it's way into wordpress? At the moment, I don't want to give clients the ability to have a 30mb page because they're unable to resize efficiently and I'm unable to force the images to correlate to the design and performance

azaozz commented 5 years ago

@yratof yeah, agree the progress here has been slower than intended. However, after a lot of discussions here (in the Gutenberg repo) and in Slack, we've decided there is no point adding marginal fixes that "somewhat" improve one thing or another. The scope of this was reduced many times.

Best way forward is to take a hard look at how WP handles media and in particular images, and fix and improve all the underlying problems. Please see Matias' comment above. If you (or anybody else) wants to get involved into that work, I'm hopping we can "formally" launch it as soon as WP 5.1 is ready/released. Until then please think about what would you want to get fixed/improved, and how images in WP should "work", preferably with some code examples :)

hutber commented 5 years ago

Just to say how much I would love this.... Currently my blog is 350mb on the home page..... Its just fucking nuts

MarkRH commented 5 years ago

Is this the appropriate thread to ask if the Gutenberg Gallery Block can have a image size selector added so the images can be scaled down medium sized images instead of scaled down full-size images?

bikubi commented 5 years ago

Today I found myself doing this: 

// onDomReady
document.querySelectorAll('.wp-block-gallery.columns-2 figure img')
  .forEach(x => {
    x.setAttribute('sizes', '(max-width: 781px) 50vw, 344px');
  });

...which one could parametrize with $content_width and .columns-N. And roll a plugin. I hope it won't come to that :) ...and I'll remember to disable this once it lands in core.

EDIT: JavaScript code worked once, accidentally, I guess. You'd have to inject the sizes attribute at PHP level, somewhere, ideally between Gutenberg markup and the_content filter. Ugh.

EDIT2: So I implemented the PHP solution with DOMDocument & Xpath. Seems to work & I will use it in production. Obviously very error-prone, would not recommend.

yratof commented 5 years ago

Just to say how much I would love this.... Currently my blog is 350mb on the home page..... Its just fucking nuts

As a temporary measure, I'd manually scale your images to a much smaller size, compress them, then limit your blog to like 4 posts or something. Because you're going to kills someones data when they view your blog lol

mor10 commented 5 years ago

FYI intrinsicsize is now a thing: https://github.com/WICG/intrinsicsize-attribute

rsepierre commented 5 years ago

/update/image-block is a "work in progress" :) Please test.

  • Always insert the large image size, or full if large doesn't exist.

How about : always insert all image sizes options from get_intermediate_image_sizes(); ? What is the added value to preventing access to certain images sizes ?

add a filter to be able to enable some image sizes, or enable typing your custom image size to use. for now my choices are "thumbnail, medium, fullsize" which is a RIDICULOUS choice for a production feature shipped to 30% of internets websites (wordpress).

users are all loading 5mb image sizes instead of 500ko.

I'm not even sure if it's possible for me to filter the block to add lazysizes ?

ararename commented 5 years ago

Hi. I am no expert on Wordpress but i thought: 'at least a simple gallery feature is at hand'.

Well... Is there a set point in time when the size pulldown (to show 'small' = 'thumbnails' images on the page and link to the bigger image (''large')? I mean, i'm talking about 5.2.2 and it is June 2019. What are the alternatives besides paid plugins?

I am really sick of disabling Gutenberg. The fourth site i try, the first that held WITH Gutenberg (up to now, but not for long and it's gone and the columns will be ACFs). This is, i don't know, i am relatively new to WP (at least the more in depth kind of it) and this is not making anyone happy.

ararename commented 5 years ago

Ok, for me https://github.com/klihelp/Kli-Gutenberg-Gallery works. Thanks for that !!

yratof commented 5 years ago

There shouldn't be a need to add a plugin to handle images after gutenberg @ararename :(

ararename commented 5 years ago

Well, then why is this thread here? And it's about a setting for the gallery, not about images.

rsepierre commented 5 years ago

There shouldn't be a need to add a plugin to handle images after gutenberg @ararename :(

Yes but image block, gallery block, media-text block are all bad in how they handle image size. I don't get how they got to production. How can you fail at taking image sizes into account in 2017-2019 when entirely rebuilding from scratch the most used features of the most used CMS in the world ? When the classic editor was just about ready to handle every image size just fine.

This is aweful. I'm torn appart having to choose between making my own responsive image/gallery/media-text block while not being able to benefit from any native wordpress blocks future updates or sticking with the failing ones hoping gutenberg will get better while customers downloads 4k images on their mobile or 500px images on their 4k monitor

ararename commented 5 years ago

That is what i thought when i discovered it: why does something in this state get into a 'productive' version distributed by the thousands? As a result: Gutenberg gets disabled by thousands and thousands as a last chance to get stuff done in time (well, not in time). If i hadn't found the plugin 'Kli-Gutenberg-Gallery-master' useful and working i'd have had to invest days just for something that the core should deliver but does not. This is alpha state, not production.

keithdevon commented 5 years ago

Hi all! 👋

Is there progress being made on this? Has the conversation moved away from this ticket?

I'd like to follow along and get involved if I can to help move this forward. 😄

ararename commented 5 years ago

Hey Keith, i might be able to get back to you about this some time next week. Believe it or not, i cannot reach the backend of the wordpress install i had that trouble with and i don't have the time to install a complete local version from my backups.

From what i remember using 'simplest-gallery' PLUS 'fancybox-for-wordpress' plugins together AND setting the image width of the images in question (the thumbs, for which i created a custom images size in functions.php) to a 100% width and the height to auto (this overwrites inline html width-/height-attributes, if any) satisfied my needs. Let me know if this already helped you. Will be away until at least Tuesday, though.

makakaorg commented 5 years ago

any progress?

danielkusper commented 4 years ago

Is this being worked on? Or tracked somewhere else?

bbertucc commented 4 years ago

@mtias @azaozz - Is it time to start adding image size selectors to every block that uses images? Image sizes haven't been totally addressed with 5.0 or 5.1 and the image block already has a selector.

Maybe the Cover Block can get a selector next (#19223)?

We built a multisite to Tulane University faculty. Full-size images of cover blocks are our largest resource suck.

ShareTextures commented 4 years ago

Is there any update about it ? I want to serve gallery images as a thumbnail. Default gallery block using full size of images and scale it using CSS.

ShareTextures commented 4 years ago

@ararename> Ok, for me https://github.com/klihelp/Kli-Gutenberg-Gallery works. Thanks for that !!

Can you explain how to use it? How did it work for you? Did you change all old post galleries with another gallery plugin shortcode? or plugin automatically doing it itself?

I actually installed the plugin and didn't manage it

ararename commented 4 years ago

@ShareTextures It was a new Installation, i do not remember if it was important to keep an order when installing the plugins, but this is what i have installed:

And after uploading images into the gallery it just worked. Actually i had forgotten about any shortcodes Klip - Gutenberg Gallery uses and i am not using any.

I had nearly forgotten after the topic was closed but i had this text ready then: I am not into the topic as such but i said to be posting my 'solution' for a image gallery fed by a Gutenberg gallery block (that is, for the frontend, the backend has full size but that did was of no concern as i know for sure the editors do have enought bandwidth and the job was not paid in a way that could make me investigate more than necessary - anyway, i suppose some time will come when Wordpress 5 works as it had been expected when 5.0 came out).

First, if i remember this right, the 'images as thumbnails in the gallery element'-problem went away after some upgrade from 5.1. to 5.2..

For a working gallery i had to have installed

I will not go and test what went wrong with which one missing, it felt like guessing anyway, but with any one of these missing something broke.

And somewhere along the way i had to do .fancyboxforwp img {width: 100% !important; height: auto !important;}

And i had to put the lines (the part where $(".fancybox").fancybox is initialized) 133 to 157 (approx) in comments to not have some Js-error in the browser.

Yes, this sounds insane. But i checked back an it still works (fe, not backend, as already said). Hope you will succeed somehow, cheers Frank

ararename commented 4 years ago

One more thought: I have set, in my functions.php: add_image_size('thumbnail', 152, 152, true); So i explicitely had set a size for thumbnails, maybe this also affects the overall outcome. And i have been using Regenerate thumbnails Plugin quite a few times, maybe this also affects the overall outcome. Just guessing wildly and checking connected stuff...

ShareTextures commented 4 years ago

@ararename Thanks for fast reply. My website already have 500+ post. So it will not work for me :( I will wait to next update of Wordpress Gutenberg.

ShareTextures commented 4 years ago

@azaozz Is there any update about it? All I want to know how to use the thumbnail link of images in my gallery instead of full images.

changeling commented 4 years ago

What's the status of this, particularly vis-a-vis Responsive Cover Blocks in Gutenberg. Those are becoming a bit of a performance headache for me.

jorgefilipecosta commented 4 years ago

Responsive Cover Images

In order to propose a path for responsive cover images, I have been trying to understand how CSS image-set works https://developer.mozilla.org/en-US/docs/Web/CSS/image-set and making some tests.

The first two sections introduce image-set and src-set/sizes as mechanisms for responsive images. The last section concludes and discusses the path forward for responsive cover images.

Image-set

Image-set property seems very different from the srcset attribute. Image-set does not support setting multiple image sizes; it supports setting multiple image resolutions ( dpi's/density). It seems that the different image sizes automatically generated by WordPress all have a 72DPI. Image-set property makes the browser download the best image depending on some conditions. Some examples of conditions are:

The viewport size does not seem to affect which image is chosen by the image-set.

Src-set & sizes

Srcset allows us to provide a list of different image sizes (resolutions are also supported although rarely used), and the sizes attribute provides a media query like syntax to choose the size the image is displayed. When the browser knows the width of the image, it downloads the closest size from the srcset.

WordPress uses the following sizes attribute "(max-width: $width px) 100vw, $width px" where $width is the image file width, that means if viewport is smaller than $width use the viewport size as the image size if the viewport is larger than $width use $width as the image width.

The WordPress srcset and sizes attribute pairs ensure that on a screen whose width is x amount of pixels, we don't download images whose width is greater than x.

The path forward

The cover block adds images as CSS background, so at first, the image-set property seems a good fit to allow the browser to choose one image file from a set of available files depending on the device. But when we say "Responsive Cover Image", I think we mean if the device viewport is small, we should download a small image if the device viewport is big we should download an image with a bigger size.

Image-set does not seem to allow this behavior; it enables one to download an image with a higher dpi if the pixel density of the device is hight (e.g., retina display) and an image with low dpi if the pixel density of the screen is small.

A mobile phone and a computer screen may have the same pixel density, so it seems using image-set, both devices will download the same image (provided network speed and other variables are the same). We don't desire this behavior, I think we want to download a "smaller" image on the mobile phone.

Another challenge to image-set use is that it seems all the image files we generate on WordPress have the same amount of DPI.

After this exploration, it seems the image-set is not a good fit for responsive cover images. The path forward seems to be making cover image use an image element with the normal src-set & sizes attributes set by WordPress and then with CSS make that image look like a background (as we do for videos). There are some challenges in that path, too, mainly with the parallax. I'm not sure if it is possible with a normal image element, but it seems we should give it a try.

If I missed something, or you have additional information that may be useful, please leave a comment.

jasmussen commented 4 years ago

Great thoughts, @jorgefilipecosta. I have created #19909 just now, which aims to explore how any block can receive responsive edits. Can you have a look to see if your idea of responsive cover images could leverage that interface?

strarsis commented 4 years ago

If FLIF or JPEG-XR could be widely enough supported already... 🐱 It is possible to combine image-set with normal media queries using some loops, this would result in large amounts of CSS. Sure, gzip would probably squish it, but it is also complexity like all the overridden media queries stacked in the Developer Tools. For now I use an <img with srcset and sizes and position it absolutely behind the content. Using this approach I don't have to handle the hidpi/retina part and just provide some rules for the sizes. - But this would have to be adjusted separately to the stylesheet.

Currently the cover image is placed as CSS background image in its full, original size, no resizing, no server-side compression or optimizations whatsoever. This is very bad for the load times for UX, when a separate, scaled-down variant has to be uploaded and used for the cover block instead.

yethibault commented 4 years ago

Is there already an update for this? I just added a gallery to my site and now my page size is a whopping 25MB because the gallery doesn't load thumbnails but the full images.

paaljoachim commented 4 years ago

Hello @azaozz and others. Can we get a status update for this issue?

It seems there is a lot of things going on in this issue. It is important to break it part into smaller issues that are easier to handle.

Thanks.

spokospace commented 4 years ago

Is there any way to fix the gallery problem? I mean linking to the media file? Currently some of my images have valid links to full width, but most of them linking to large format (1024x).

paaljoachim commented 4 years ago

Hey @CNK001

See if you are able to locate an issue that is related. I did a search for media label issues: https://github.com/WordPress/gutenberg/labels/%5BFeature%5D%20Media If your not able to locate one then open a new issue.

kspilarski commented 4 years ago

I just had a support request for a user needing more advanced image handling.

ararename commented 4 years ago

After one of the last Wordpress Autoupdates my solution went down the drain like ... Backend and frontend comletely fucked up. I have to start anew.

Did anyone find a solution to the problem that galleries do not show thumbnails but full size images? I would be so thankful because this is getting on my nerves for more than a year now - and I'm kind of pis... to have to investigate deeply into this topic again. Any help really appreciated, thank you and: have a nice day :-)

paaljoachim commented 4 years ago

Hey @ararename

Gallery is being reworked to use inner blocks. For more information check out this Pull Request. https://github.com/WordPress/gutenberg/pull/25940

ararename commented 4 years ago

@paaljoachim Thank you for the quick reply! Gonna check :-)

padams commented 4 years ago

@ararename you can use the PhotoPress plug-in in the meantime. It has a core gallery transform.

ararename commented 3 years ago

Thanks @padams for another option. I thought i will get to it today but it will take me some days to return to this topic. Will report back how it went.

paaljoachim commented 3 years ago

This issue is very huge and hopefully actionable issues have been created. Should this issue now be closed?

landwire commented 3 years ago

Could you actually reference all the actionable issues here as a last comment?

gantangpedia commented 3 years ago

After one of the last Wordpress Autoupdates my solution went down the drain like ... Backend and frontend comletely fucked up. I have to start anew.

Did anyone find a solution to the problem that galleries do not show thumbnails but full size images? I would be so thankful because this is getting on my nerves for more than a year now - and I'm kind of pis... to have to investigate deeply into this topic again. Any help really appreciated, thank you and: have a nice day :-)

I've just found out that the issue is with the select form. You can't choose thumbnail because it's the top option, and the form keep showing that as selected no matter which size you click. As a workaround just add new custom size ( add_image_size ) and register it ( image_size_names_choose ) so that you can use the new size instead.

skorasaurus commented 3 years ago

Could you actually reference all the actionable issues here as a last comment?

After going through this issue, I summarized the issue(s) that remain at https://gist.github.com/skorasaurus/a01249d4302226bf12c80dd979322303

I brought up the issue in today's core-media meeting and it's proposed the first step is https://core.trac.wordpress.org/ticket/45407

heyflo commented 1 year ago

This is one of the biggest problem. The sizes doesn't match any real size except for the biggest, even the "mobile" size at 100vw is quite random as it is almost never true. And this leads to big performance issues as we're loading the biggest image everytime. A potential fix, at least for developers, would be to give us access to the sizes attribute somewhere on each image. This attribute requires to be extra precise with its values as it gives an hint to the browser onto which image to pick in the srcset.

Drupal builds its responsive images with responsive image styles where you pick a collection of image sizes you need from the ones you've registered (on WP it would be the equivalent of the add_image_size()), that collection would be used to fill the srcset and then you have a textarea for the sizes attributes.

For instance I am adding 9 image sizes with add_image_size() for my entire website. Now imagine we have a section in the "Settings > Medias" dedicated to building responsive images styles :