Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Follow up for #1775530-74: Move picture into core
Problem/Motivation
@moshe weitzman: "Do we have issues open for actually using this by default? I would think we want to ship with picture enabled in standard install and picture formatter on the image fields in Article content type and on User entity (i.e. user picture)."
Proposed resolution
Create 2 picture mappings:
- "Content" for images from Article
- "User picture" for the user profile pictures
Remaining tasks
- Check the breakpoints defined by Bartik
- Decide which breakpoints are needed in each picture mapping
- Change standard install profile
- Add css to Bartik
User interface changes
None, expect they will have responsive images.
Feedback
Comment | File | Size | Author |
---|---|---|---|
#55 | responsive-image-ui.png | 337.4 KB | yoroy |
#46 | i1855412-46.patch | 4.67 KB | DuaelFr |
#29 | interdiff-21-29.txt | 587 bytes | Jelle_S |
#29 | i1855412-29.patch | 4.68 KB | Jelle_S |
#20 | i1855412-19.patch | 3.3 KB | attiks |
Comments
Comment #1
attiks CreditAttribution: attiks commentedComment #2
RobW CreditAttribution: RobW commentedThis is probably obvious, but picture shouldn't be enabled for all images, just those that would benefit from major breakpoint source choice. People using picturefill and other responsive image libraries in the wild have mentioned that switching sources between a 100x100px 2kb image and a 60x60px 1.5kb image is more overhead than it's worth, so user pictures, logos, etc, are probably not good candidates for the new formatter.
Comment #3
attiks CreditAttribution: attiks commented#2 You're right, it will depend on the sizes specified for the user images, if they are all small, we can 'resize' them using css only. For Article we probably can use picture, but we might need to have a look at the image styles.
Comment #4
RobW CreditAttribution: RobW commentedBecause image sizes are so site specific would it be worth writing a function to run on the manage display page that checks if breakpoint module is enabled, and if a field is using an image formatter with an image style that outputs dimensions greater than some arbitrary value (maybe 500) sets a message suggesting the picture formatter?
Comment #5
webchickJust throwing this out there, but should this entire module be rolled into Image module? It's pretty confusing atm to have both a Picture and an Image module, and it seems like this module expands on the functionality already available in image module.
Just a thought. We can always enable picture as part of standard profile first, before answering that question, but that's another way of solving it since Image module is already turned on by default.
Comment #6
attiks CreditAttribution: attiks commented#4Since the breakpoint module is enabled by toolbar as well, I assume it will be enabled on most sites, meaning almost everybody will see the message. If we add this we also need a way to hide the message otherwise it's shown every time. For the moment, no idea is this will help the users, I think it's easier to enable it by default.
#5Maybe merging is an option, but let's first try to decide if it needs to be enabled by default and if so how we're going to implement the breakpoints and picture mappings. You're right is is confusing for the moment, and it is worse on a Dutch install since the display formatter label (image and picture) are both translated the same ;-)
Comment #6.0
attiks CreditAttribution: attiks commentedTwitter link added
Comment #7
RainbowArraySince it's been a year since this was last discussed, and since this is tagged as an issue with the breakpoints module, do we want to revisit turning this on? FYI, there's another issue to rename Picture to the Responsive Images module, which may clear up some of the confusion: #2124377: Rename "Picture" module to "Responsive Image" module.
Comment #8
klonos...clarification ;)
Comment #9
jian he CreditAttribution: jian he commentedpicture.module already renamed to responsive_image.module.
Comment #10
RainbowArray#2513604: Create default responsive image styles adds default responsive image styles. I also checked Bartik, and it already has CSS for responsive images.
So if we get the default styles in, I think it's worth considering turning on the Responsive Image module in the standard profile.
Comment #11
RainbowArraySince default responsive image styles are now in core, I think it's worthwhile thinking about turning this on by default now.
Comment #12
Wim LeersI think this belongs in 8.1, repeating what I said in #2061377-75: [drupalImage] Optionally apply image style to images uploaded in CKEditor 5:
Comment #13
moshe weitzman CreditAttribution: moshe weitzman at Acquia commentedWell, we support all of Drupal 8. This issue is about the Article content type swapping out some supported code for other supported code. The fact that something is in standard profile increases release management risk only slightly, and the benefit is more than slight IMO.
Comment #14
attiks CreditAttribution: attiks at Attiks commented#11 Yes, did the thinking already ;-)
#12I understand the reasoning in the other issue, but this is about enabling a module for the standard profile, making it easier for site builders to use responsive images, promoting best practices and making site faster to load. Postponing this till 8.1 is harming Drupal more. Regarding the use of inline images, site builders should avoid them as much as possible, the y should aim for structured content.
Comment #15
Wim LeersOk, happy to be wrong!
Comment #16
attiks CreditAttribution: attiks at Attiks commentedWill write a patch
Comment #17
attiks CreditAttribution: attiks at Attiks commentedAttached patch enables responsive_image for the standard profile, tested manually and looks great!
Comment #18
attiks CreditAttribution: attiks at Attiks commentedNew patch changing the formatters on default and teaser for Article.
The responsive image config is kept in optional so it can be removed by the site admin.
Comment #20
attiks CreditAttribution: attiks at Attiks commentedForgot to update the tests.
Comment #23
attiks CreditAttribution: attiks at Attiks commentedRemoved the RDF tests, since they are no longer relevant for the responsive image.
Comment #24
attiks CreditAttribution: attiks at Attiks commentedTried to fix the test, so interdiff against #20
Comment #25
attiks CreditAttribution: attiks at Attiks commentedunassigning for now
Comment #28
attiks CreditAttribution: attiks at Attiks commentedSome examples of Drupal 8 speed insight by google, those were the first ones I found, if I offend somebody I apologize in advance.
1/ https://developers.google.com/speed/pagespeed/insights/?url=www.amazeela...
Mobile 4/100, serving 5MB too much
Desktop: 11/100, serving 4.4MB too much
2/ https://developers.google.com/speed/pagespeed/insights/?url=www.drupal.com which has less images
Mobile 61/100, serving 224K too much
Desktop 47/100, serving 1MB too much
As a reference (D7 + picture module): https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%...
Comment #29
Jelle_SFixed test.
Comment #32
Wim LeersThese are the only changes I do not 100% understand.
Comment #34
attiks CreditAttribution: attiks at Attiks commented#33 The rdf is attached to the fallback img tag, only thing we did is update the image styles used by the fallback, the second part needed more lines, because previously it was using the original image.
Comment #35
Wim LeersThanks! That makes sense.
Now doing manual testing.
Comment #36
Wim LeersWorks as expected:
I don't think there's anything left to be done here.
Comment #37
attiks CreditAttribution: attiks at Attiks commentedComment #38
alexpottWrt to the "rc target" tag see https://groups.drupal.org/node/424518. Assigning this to @webchick as it is a product decision.
Comment #39
attiks CreditAttribution: attiks at Attiks commented@alexpott thanks for the link, I stand corrected
Comment #40
webchick...
What changed since our IRC discussion the other day?
Comment #41
attiks CreditAttribution: attiks at Attiks commentedNot much, except #2061377: [drupalImage] Optionally apply image style to images uploaded in CKEditor 5 is almost done, just wanted to make sure you noticed it, as said in IRC feel free to remove the tags. for me the benefits outweigh the potential problems, see examples at #28, if it's not enabled by default people will not use it.
Comment #42
Wim Leers#40 @moshe in #13:
Comment #43
webchickSpoke about this with @xjm, @Wim Leers, @effulgentsia and @Dries today.
We're all definitely on board with getting this in front of as many users as possible, as quickly as possible. The front-end performance benefits are quite large (and as @attiks notes, even some of the most D8-knowledgeable people are getting this wrong right now), as well as the huge shot in the arm for the mobile capabilities of D8.
However, the concern with this request is:
a) it comes very late in the game (we have about 4 days left, including a weekend, to review/commit all outstanding patches that are going to make it into 8.0.0)
b) unlike some of the other patches in that list, this change could be made in 8.1.x (and be an awesome functionality/performance enhancement) and not forced to be deferred until D9 if it isn't done
c) we really, really, really, really, really, really, really, really, really, really, really do not want to introduce any patches at this point that could destabilize the release in any way. In a funny catch-22; because this module isn't in front of every user by default, that means there's been very little testing of it outside the maintainers/committers. So suddenly putting it in front of users has the risk of creating more urgent problems to solve and then be limited in our ability to solve them because it's a default option now.
d) there are still some big outstanding issues such as #2061377: [drupalImage] Optionally apply image style to images uploaded in CKEditor 5 (which is making great progress, yay) that would make me nervous to enable this by default, given the module doesn't yet work to user expectations (which is that if you say D8 supports responsive images out of the box, it works consistently for all images, regardless of their origin).
e) I also have a further concern that the site builder UI is not a site builder UI; it still requires in-depth knowledge of various HTML5 details in order to even understand what to do. It's worth pointing out that this concern, however, wasn't shared with Dries, who pointed out we have lots of sub-optimal site builder UIs and people still manage. ;)
Based on all of these factors, however, we felt a lot more confident pushing this to 8.1.x than trying to get it in in the next 4 days. It's still accurate to say that Drupal 8 ships with responsive image support out of the box (just as it's accurate to say that Drupal 8 ships with multilingual support out of the box); the fact that you have to configure your content types to use it is a fact of life regardless if it's enabled by default in Standard or not right now.
That said, I'd love to work with you guys sometime during RC/post-release to come up with a definitive "hit-list" of issues to resolve before we can do this, and aim to commit this patch early in the 8.1.x cycle, as it's undisputedly a huge win.
Comment #44
RainbowArrayFor what it's worth, I'm completely on board with this plan to do this for 8.1 (assuming we finish the hit list).
Comment #45
Bojhan CreditAttribution: Bojhan as a volunteer and commentedThe challenge for e) is that we don't really want to introduce the legacy of another site building tool that is architected after complex hard to understand models. Its a reflection of in my eyes the poor state that this is in with browsers and the spec. I hope we can find an ingenious way around it.
Comment #46
DuaelFrThis is just a reroll and an issue reactivation :)
Comment #47
catchI think we're still missing the hit-list from #43. Bumping back to CNR and tagging for webchick.
Comment #49
RainbowArrayThe big one if we want to do this is #2061377: [drupalImage] Optionally apply image style to images uploaded in CKEditor 5. I'd still love to get that into 8.1, but I could definitely use some help.
Comment #51
Bojhan CreditAttribution: Bojhan as a volunteer and commented@catch For review to happen, I think we expect a lot more community feedback on what the hit list should be.
Comment #52
webchickReally sorry, this one definitely fell off my radar. :\
My suggestion for a next step would be to come join one of the semi-weekly UX meetings and provide a walkthrough of the current functionality so a bunch of UX-minded individuals can help ascertain a must-have/should-have/could-have list.
Comment #55
yoroy CreditAttribution: yoroy at Roy Scholten commentedIt makes sense to enable and use *the functionality* of responsive images in the default install profile, but this UI, it's not very great :)
Do people know about other authoring tools or apps that provide a user interface for configuring these things? Would be good to get some inspiration if possible.
Comment #56
yoroy CreditAttribution: yoroy at Roy Scholten commented