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

https://twitter.com/attiks/status/274527819931983873

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

attiks’s picture

Title: Copy of Move picture into core » Enable picture by default for standard install profile
RobW’s picture

This 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.

attiks’s picture

#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.

RobW’s picture

Because 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?

webchick’s picture

Just 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.

attiks’s picture

#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 ;-)

attiks’s picture

Issue summary: View changes

Twitter link added

RainbowArray’s picture

Assigned: attiks » Unassigned
Issue summary: View changes

Since 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.

klonos’s picture

Title: Enable picture by default for standard install profile » Enable picture.module by default for standard install profile.

...clarification ;)

jian he’s picture

Title: Enable picture.module by default for standard install profile. » Enable responsive_image.module by default for standard install profile.

picture.module already renamed to responsive_image.module.

RainbowArray’s picture

#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.

RainbowArray’s picture

Since default responsive image styles are now in core, I think it's worthwhile thinking about turning this on by default now.

Wim Leers’s picture

Version: 8.0.x-dev » 8.1.x-dev
Component: other » responsive_image.module

I think this belongs in 8.1, repeating what I said in #2061377-75: [drupalImage] Optionally apply image style to images uploaded in CKEditor 5:

I talked to @webchick and @mdrummond about this.

Drupal 8 claims to do All The Right Responsive Things, but without this issue, no inline images are ever responsive. Which is kinda sad.

OTOH, #1855412: Enable responsive_image.module by default for standard install profile is also not done yet, so actually, out of the box, Drupal 8 doesn't do any responsive images things at all.

Given that RC1 is in exactly one week, I don't think it's realistic to get all this done by then. Especially because this would benefit from real-world feedback. I think it'd be better to put this patch in a D8 contrib module during 8.0.0, gather real-world feedback, and move it into core in 8.1.0. Then 8.1.0 can say "responsive images support has now matured, it is now enabled by default, and includes support for inline images also".

It's very unfortunate, but from a release manager POV, I think that's the most responsible thing to do.

moshe weitzman’s picture

Well, 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.

attiks’s picture

Version: 8.1.x-dev » 8.0.x-dev

#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.

Wim Leers’s picture

Ok, happy to be wrong!

attiks’s picture

Assigned: Unassigned » attiks

Will write a patch

attiks’s picture

Status: Active » Needs review
FileSize
342 bytes

Attached patch enables responsive_image for the standard profile, tested manually and looks great!

attiks’s picture

New 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.

The last submitted patch, 17: i1855412-17.patch, failed testing.

attiks’s picture

Forgot to update the tests.

The last submitted patch, 18: i1855412-18.patch, failed testing.

Status: Needs review » Needs work

The last submitted patch, 20: i1855412-19.patch, failed testing.

attiks’s picture

Status: Needs work » Needs review
FileSize
4.97 KB
1.55 KB

Removed the RDF tests, since they are no longer relevant for the responsive image.

attiks’s picture

Tried to fix the test, so interdiff against #20

attiks’s picture

Assigned: attiks » Unassigned

unassigning for now

Status: Needs review » Needs work

The last submitted patch, 24: i1855412-21.patch, failed testing.

The last submitted patch, 24: i1855412-21.patch, failed testing.

attiks’s picture

Some 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%...

Jelle_S’s picture

Status: Needs work » Needs review
FileSize
4.68 KB
587 bytes

Fixed test.

The last submitted patch, 17: i1855412-17.patch, failed testing.

The last submitted patch, 18: i1855412-18.patch, failed testing.

Wim Leers’s picture

+++ b/core/modules/rdf/src/Tests/StandardProfileTest.php
@@ -229,7 +229,7 @@ protected function doFrontPageRdfaTests() {
-    $image_uri = ImageStyle::load('medium')->buildUrl($image_file->getFileUri());
+    $image_uri = ImageStyle::load('max_325x325')->buildUrl($image_file->getFileUri());
     $expected_value = array(
       'type' => 'uri',
       'value' => $image_uri,
@@ -260,9 +260,11 @@ protected function doArticleRdfaTests() {

@@ -260,9 +260,11 @@ protected function doArticleRdfaTests() {
 
     // @todo Once the image points to the original instead of the processed
     //   image, move this to testArticleProperties().
+    $image_file = $this->article->get('field_image')->entity;
+    $image_uri = ImageStyle::load('max_325x325')->buildUrl($image_file->getFileUri());
     $expected_value = array(
       'type' => 'uri',
-      'value' => $this->imageUri,
+      'value' => $image_uri,

These are the only changes I do not 100% understand.

The last submitted patch, 20: i1855412-19.patch, failed testing.

attiks’s picture

#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.

Wim Leers’s picture

Thanks! That makes sense.

Now doing manual testing.

Wim Leers’s picture

Title: Enable responsive_image.module by default for standard install profile. » Enable responsive_image.module by default for standard install profile
Status: Needs review » Reviewed & tested by the community

Works as expected:

  • fresh install: responsive images for Articles
  • updated install: no responsive images for Articles

I don't think there's anything left to be done here.

attiks’s picture

Issue tags: +rc target
alexpott’s picture

Assigned: Unassigned » webchick
Issue tags: -rc target +rc deadline

Wrt to the "rc target" tag see https://groups.drupal.org/node/424518. Assigning this to @webchick as it is a product decision.

attiks’s picture

@alexpott thanks for the link, I stand corrected

webchick’s picture

...

What changed since our IRC discussion the other day?

attiks’s picture

Not 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.

Wim Leers’s picture

#40 @moshe in #13:

Well, 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.

webchick’s picture

Version: 8.0.x-dev » 8.1.x-dev
Status: Reviewed & tested by the community » Postponed
Issue tags: -rc deadline

Spoke 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.

RainbowArray’s picture

For what it's worth, I'm completely on board with this plan to do this for 8.1 (assuming we finish the hit list).

Bojhan’s picture

The 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.

DuaelFr’s picture

Assigned: webchick » Unassigned
Status: Postponed » Reviewed & tested by the community
FileSize
4.67 KB

This is just a reroll and an issue reactivation :)

catch’s picture

Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs product manager review

I think we're still missing the hit-list from #43. Bumping back to CNR and tagging for webchick.

Status: Needs review » Needs work

The last submitted patch, 46: i1855412-46.patch, failed testing.

RainbowArray’s picture

The 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.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.0-beta1 was released on March 2, 2016, which means new developments and disruptive changes should now be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Bojhan’s picture

@catch For review to happen, I think we expect a lot more community feedback on what the hit list should be.

webchick’s picture

Really 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.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

yoroy’s picture

FileSize
337.4 KB

It 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.

yoroy’s picture

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.