Problem/Motivation

We've stumbled upon this issue when working on exposing responsive images in the graphql module. Src attributes of the img tags output by image styles are (and should be) absolute

* @return string
*   The absolute URL where a style image can be downloaded, suitable for use
*   in an img tag. Requesting the URL will cause the image to be created.

Source: https://github.com/drupal/drupal/blob/8.4.x/core/modules/image/src/Image...

However, the responsive image module strips out the protocol and domain part and uses just the relative parts making it impossible to embed an image in an external site (including a decoupled frontend).

Proposed resolution

Make the responsive image return absolute urls.

User interface changes

None

API changes

None

Data model changes

None

Comments

blazey created an issue. See original summary.

blazey’s picture

Assigned: blazey » Unassigned
Status: Active » Needs review
StatusFileSize
new1.99 KB
new2.64 KB

Attaching the patch and the test.

blazey’s picture

Issue summary: View changes
blazey’s picture

Issue summary: View changes

The last submitted patch, 2: 2914323-2-test-only.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

Status: Needs review » Needs work

The last submitted patch, 2: 2914323-2.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

blazey’s picture

Status: Needs work » Needs review
StatusFileSize
new2.02 KB
new2.67 KB

The test lacked the @group annotation.

blazey’s picture

Hiding irrelevant files.

The last submitted patch, 7: 2914323-7-test-only.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

Status: Needs review » Needs work

The last submitted patch, 7: 2914323-7.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

blazey’s picture

Status: Needs work » Needs review
StatusFileSize
new5.97 KB

Adjusted ResponsiveImageFieldDisplayTest's expectations accordingly.

Status: Needs review » Needs work

The last submitted patch, 11: 2914323-11.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

blazey’s picture

Status: Needs work » Needs review
StatusFileSize
new3.96 KB

Removed the ResponsiveImageAbsolutePathTest. It's redundant now.

leksat’s picture

Status: Needs review » Reviewed & tested by the community

So the problem we have: how to use responsive image in decoupled installations?

We need absolute URLs, but in #1494670: References to CSS, JS, and similar files should be root-relative URLs: avoids mixed content warnings & fewer bytes to send it was decided that relative URLs are better. (And I really doubt that this can be changed.)

Currently, the only ways to get absolute URLs in responsive images are:
- parse resulting HTML (and attributes)
- reimplement responsive image logic
Both options don't sound good.

The alternatives would be:
1. Create a setting in the image module for enabling absolute URLs.
2. Make responsive image result in some structured array, so that other modules can alter URLs.

I personally would go with the second option. And my first thought was to use render arrays. But the "srcset" attribute can contain multiple URLs in a single string which is not good for altering again.
So maybe we can use render arrays, but the "srcset" attribute can be an array. And somewhere in preprocess or pre-render function we can convert it back to the string value.

Actually, only the first option makes sense.

Marking this RTBC to attract maintainers attention because I think this issue is not an easy one.

blazey’s picture

Title: Responsive images use relative paths instead of absolute » It's impossible to serve responsive images via an API
alexpott’s picture

Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs subsystem maintainer review

Just rtbc-ing something to make maintainers have to look at even though the comment accepts that this solution is in conflict with already committed issues is unfortunate. The correct status for such an issue is "needs review". In my mind we need a generic solution for files, regular image fields as well as responsive. In fact the problem goes further than just these types of fields. What about body text with relative links in?

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.

darvanen’s picture

Status: Needs review » Postponed (maintainer needs more info)
Issue tags: +Bug Smash Initiative

I have been able to retrieve absolute URLs using graphql 4.x and am therefore of the opinion that this is a "can't reproduce" issue now.

I'm marking this Postponed (maintainer needs more info) for 3 months to allow for anyone to submit steps to reproduce. If that time frame passes with no input this issue can be closed.

As an aside, if anyone needs help with image style urls in graphql, the #graphql channel in Drupal Slack is usually pretty responsive.

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.

mjmorley’s picture

StatusFileSize
new4.97 KB

I have been trying to retrieve absolute URLs so that we can serve images from the Frontify DAM (https://www.drupal.org/project/frontify) using responsive image stylings.

The function `_responsive_image_image_style_url` I figured could be turned into a hook, and then this hook is invoked whenever we wish to get urls for the purpose of responsive images. Then in a custom module you can make sure the implementation of this hook from the responsive_image module isn't invoked, and only your custom modules hook is invoked, this way allowing us to use whatever source we wish.

I have added a patch here to accomplish this, although I feel like there may be ways to improve it.

mjmorley’s picture

StatusFileSize
new3.43 KB

Please ignore the last patch, I have removed the new api.php file for now as it was not working for me.

mjmorley’s picture

StatusFileSize
new3.49 KB

I have now wrapped the `moduleHandler->invokeAll` call in an `array_filter` this means we will use the first non empty result of a hook implementation, in the event we wish to use the default responsive_image_image_style_url hook if a certain condition is not met in the custom hook implementations.

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.

mstrelan’s picture

Status: Postponed (maintainer needs more info) » Needs review

Change to NR since we have a patch

smustgrave’s picture

Status: Needs review » Needs work
Issue tags: +Needs tests

Think we will need test coverage for this.

Have not reviewed or tested.

gauravvvv’s picture

StatusFileSize
new3.68 KB

Leaving it to NW as tests still needs to be added. Patch #30, no longer applies so not adding interdiff.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.