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.
Problem/Motivation
To add a new twig function for rendering image with a style
Steps to reproduce
NA
Proposed resolution
Add new twig function for rendering image with style.
Remaining tasks
Add test coverage
Review
Commit
User interface changes
NA
API changes
NA
Data model changes
NA
Release notes snippet
NA
Comment | File | Size | Author |
---|---|---|---|
#62 | 2361299-62.patch | 2.21 KB | smustgrave |
| |||
#62 | interdiff-55-62.txt | 747 bytes | smustgrave |
#55 | twig_image_style-2361299-55.patch | 2.17 KB | jcnventura |
#55 | interdiff_54.55.txt | 955 bytes | jcnventura |
Comments
Comment #1
wilei CreditAttribution: wilei commented+1 for this one.
I can come up with some cases when this feature is needed. At least when working with custom entities when views and/or fields may not be available, this feature would be very nice.
Comment #2
star-szrIt's going to be a bit more complicated than some of the other Twig extensions we have but shouldn't be too bad, I think you'd end up with something like this in a Twig extension (rough pseudo code):
This should also be doable in preprocess, so I'm not sure about this: "the task can only be accomplished through the use of contrib modules in conjunction with views."
Comment #3
dmdewey CreditAttribution: dmdewey commentedremoved "and the task can only be accomplished through the use of contrib modules in conjunction with views"
Comment #4
star-szrComment #5
dawehnerIts not really clear for me why we don't just expose image_style_url, as it is. It would be great to document that in the issue summary.
Comment #6
star-szrBecause the function doesn't exist in D8.
image_style_url()
Comment #7
dawehnerUps :) Well, maybe its also enough to wrap
in some nice little helper function?
Comment #8
dawehnerThis issue as marked as feature request, but at the same time it blocks #2168231: Twig Functions needed in templates.
Does this mean this issue is also a bug?
Comment #9
mortendk CreditAttribution: mortendk as a volunteer commentedany progress on this or did i miss something ?
it would be pretty amazing if we could do something like this inside of a template
Comment #10
JeroenTWill work on this tomorrow. If anyone beats me to it, feel free to unassign me.
Comment #11
harshil.maradiya CreditAttribution: harshil.maradiya commentedI would like to work on this but before this i want to discus my approach
Please correct me if i am wrong
Regards
Harshil Maradiya
Comment #12
JeroenTFirst attempt on creating the twig filter.
Patch attached.
Comment #13
mortendk CreditAttribution: mortendk as a volunteer commentedcreated a image.html.twig template
unfortunately it dosnt render the image
cause this is the return path to the image
http://styles/medium/http/drupal8.dev/sites/default/files/styles/large/public/field/image/coffee.jpg?itok=nJshh3GG&itok=03bZfNJF
guess something needs to get done to that path (styles/medium/http/)?
Comment #14
JeroenTCreated a new patch that a size filter like this:
I haven't addressed the bug in #13.
The following code passes an absolute url in the twig filter but \Drupal\image\Entity\ImageStyle::buildUrl() expects an uri. Not sure how to solve this.
Comment #15
JeroenTComment #16
mortendk CreditAttribution: mortendk as a volunteer commented@JeroenT i tested it out lemme know if i do something stupid ;)
use the image.html.twig template wonder if im doing something wrong ?
Comment #17
andriyun CreditAttribution: andriyun commentedManual testing done. So I remove proper tag
Comment #18
oakulm CreditAttribution: oakulm commentedOk some thoughts after DC Baltics sprint about this issue. My idea is that to use these filters you should send original image to template and in the template decide what preset to use (instead of in the field setting). Am I correct?
The main issue is (I think) the fact that attributes.src returns absolute path to file. What I set out to do and failed was to find a method that finds file object from filename or absolute url (or what ever is the method in D8) and parses file path to schema:// format. Does anyone know does this exist? If it does than I think this problem is trivial to fix.
Comment #19
oakulm CreditAttribution: oakulm commentedThese parameters are not strings at the moment if used with {{ attributes.src|style('example') }}
Comment #20
oakulm CreditAttribution: oakulm commentedOk this patch works with:
Don't really know if this is the right direction to take?
Comment #21
oakulm CreditAttribution: oakulm commentedComment #23
Anonymous (not verified) CreditAttribution: Anonymous at XIO commentedI think the mechanic of fetching the file based on the filename is flawed. What would happen when two images have the same name, but are different?
This comment is no longer relevant?
This is not a string, but a Drupal\image\Entity\ImageStyle object.
This is not a string but a \Drupal\Core\Template\AttributeString object.
This would be a string or nothing at all.
The basename() function could return myfile.png?foo=bar, which would make that query fail?
Actually, what happens when you have to different images with the same filename? I don't think this would work as expected?
Comment #24
tuutti CreditAttribution: tuutti commentedI spoke with @lauriii little bit about this and one possible way to implement this would be by adding 'original_uri' (or something similar) render array item and populate it with file uri.
Comment #25
lauriiiComment #28
pwolanin CreditAttribution: pwolanin at Acquia commentedfeatures need to go to 8.1 now
Comment #30
Virang CreditAttribution: Virang commentedCan we override this TwigExtension.php with custom module? as above mentioned path for patch is core/lib/Drupal/Core/Template/TwigExtension.php.
Please suggest me I just started learning Drupal 8.
Comment #31
morbidick CreditAttribution: morbidick commentedI just tried patch #14 and modified it for the current version 8.1.2. For now I only could test the size filter which works fine.
A custom module or to get the filter in to core would be awesome.
Comment #32
morbidick CreditAttribution: morbidick commentedComment #34
pounardI have no particular opinion about this patch except the fact that entity_load() procedural call is done inside a service, you should probably add the entity.manager service injection instead.
Comment #35
kamalMaroc CreditAttribution: kamalMaroc as a volunteer commentedTo get image by style, first you need to create an extension of twig, that can load image by your parameters (large, thumbnail ...etc) :
1- In your custom module create file "Image.php" in "/modules/custom/your_module/src/TwigExtension
2- In root folder create file service "/modules/custom/your_module/your_module.services.yml
3- Delete a cache
4- Finally you can use extension in twig file like this :
Good Luck.
Comment #36
ichionid CreditAttribution: ichionid as a volunteer commented"/modules/custom/your_module/your_module.services.yml.php" @kamalMaroc this should not have a php ending. Pretty nice and detailed guide :-)
Comment #37
harry_nc CreditAttribution: harry_nc commented1- In your custom module create file "Image.php" in "/modules/custom/your_module/src/TwigExtension
- Images.php**
With that and #36, works a treat thanks man!
Comment #38
featherbelly@kamalMaroc This works great!
#35 + #36 + #37
Comment #39
Rene BakxIf you want a installable solution, I am willing to add the code of Kamel or improved version to the Themers Little Helper project.
There is a similar twig function in TFD7, and I do think having a plain file to image style mapper can come in handy sometimes.
The only thing I would probably change is signature of the method, instead of relying on the fid.value, I would prefer to just pass the entire field to twig function and let the function figure out if it got a FID, File entity or renderable array)
<img src="{{ image_style(content.field_image,'large') }}">
Comment #41
basvanderheijden CreditAttribution: basvanderheijden as a volunteer commentedI've re-created the patch for 8.3.5
Comment #42
gaurav.kapoor CreditAttribution: gaurav.kapoor at OpenSense Labs commentedComment #44
leisurman CreditAttribution: leisurman commented@kamalMaroc Thank you!
#35 + #36 + #37
This does work for a regular image upload field. But it does not work if the field is a entity reference media field.
Comment #49
gagarine CreditAttribution: gagarine commentedThis features is still in consideration?
Comment #54
jcnventura CreditAttribution: jcnventura at 1xINTERNET commentedRe-roll of #41 for Drupal 9.4.x.
Comment #55
jcnventura CreditAttribution: jcnventura at 1xINTERNET commentedCode in #41 required a bit more than a re-roll, since entity_load no longer exists in Drupal 9.
Comment #58
smustgrave CreditAttribution: smustgrave at Mobomo commentedFor issue summary update.
Comment #59
NivethaSubramaniyan CreditAttribution: NivethaSubramaniyan as a volunteer and at Srijan | A Material+ Company for Drupal India Association commentedAdded patch for 10.1
Comment #60
Ankit.Gupta CreditAttribution: Ankit.Gupta at Dotsquares Ltd. commentedComment #61
jcnventura CreditAttribution: jcnventura at 1xINTERNET commented@NivethaSubramaniyan: When re-rolling, please don't make coding standard changes 50 lines away from the code you're changing..
Comment #62
smustgrave CreditAttribution: smustgrave at Mobomo commented@Ankit.Gupta you should test your patch for failing CI before uploading. The script is in core/scripts.
Comment #63
smustgrave CreditAttribution: smustgrave at Mobomo commentedSelf review
This will need test coverage.