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
| Comment | File | Size | Author |
|---|---|---|---|
| #34 | 2914323-34.patch | 3.68 KB | gauravvvv |
| #30 | responsive-image-2914323-30.patch | 3.49 KB | mjmorley |
| #29 | responsive-image-2914323-29.patch | 3.43 KB | mjmorley |
| #28 | responsive-image-2914323-28.patch | 4.97 KB | mjmorley |
| #13 | 2914323-13.patch | 3.96 KB | blazey |
Comments
Comment #2
blazey commentedAttaching the patch and the test.
Comment #3
blazey commentedComment #4
blazey commentedComment #7
blazey commentedThe test lacked the
@groupannotation.Comment #8
blazey commentedHiding irrelevant files.
Comment #11
blazey commentedAdjusted
ResponsiveImageFieldDisplayTest's expectations accordingly.Comment #13
blazey commentedRemoved the
ResponsiveImageAbsolutePathTest. It's redundant now.Comment #14
leksat commentedSo 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.
Comment #15
blazey commentedComment #16
alexpottJust 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?
Comment #25
darvanenI 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.
Comment #28
mjmorley commentedI 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.
Comment #29
mjmorley commentedPlease ignore the last patch, I have removed the new api.php file for now as it was not working for me.
Comment #30
mjmorley commentedI 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.
Comment #32
mstrelan commentedChange to NR since we have a patch
Comment #33
smustgrave commentedThink we will need test coverage for this.
Have not reviewed or tested.
Comment #34
gauravvvv commentedLeaving it to NW as tests still needs to be added. Patch #30, no longer applies so not adding interdiff.