Problem/Motivation

The core module "Responsive Image" allows to use the "Responsive Image" formatter to display images with a <picture> HTML tag. If SVG Image is enabled on an image field which uses this formatter, the SVG images never gets rendered.

Proposed resolution

Override the responsive image formatter to display SVG images the same way they are handled by the image formatter.

CommentFileSizeAuthor
#2 svg_image_responsive_support-2981263-2.patch9.16 KBduaelfr

Comments

DuaelFr created an issue. See original summary.

duaelfr’s picture

duaelfr
he/him
Primary language French
Location Montpellier, France
commented
Status: Active » Needs review
StatusFileSize
new svg_image_responsive_support-2981263-2.patch9.16 KB

Here is a quick try.

dimr’s picture

dimr commented
Status: Needs review » Reviewed & tested by the community

It works for me, thanks!

imyaro’s picture

imyaro commented
Status: Reviewed & tested by the community » Needs work

Hello,
Thanks for your contribution.
I have few little points to fix:

  • Your responsive formatter collects height and width for SVG images. Probably we don't need this attributes?
  • We don't have the SvgImage specific settings in the formatter settings summary.

after the fixes I will gladly accept the patch

duaelfr’s picture

duaelfr
he/him
Primary language French
Location Montpellier, France
commented

@zvse Hi! Thanks for the review.
I've done the exact same things I found in \Drupal\svg_image\Plugin\Field\FieldFormatter\SvgImageFormatter(). There is a width/height collection and no formatter settings summary. Should we fix both?

norman.lol’s picture

norman.lol
he/him
Primary language German
Location Berlin
commented

Confirming #2. Thank you! And thanks for this module. Keep up the good work!

markdc’s picture

markdc
Location Selters
commented

Thanks for the patch. It works!

tijsdeboeck’s picture

tijsdeboeck
Location Antwerp 🇧🇪 🇪🇺 🌎
commented

Patch #2 still works.
Would be nice to get this in a release.

hkirsman’s picture

hkirsman commented

It works, tx!

rar9’s picture

rar9 commented

When will this be added to D8 so we dont need to patch?

duaelfr’s picture

duaelfr
he/him
Primary language French
Location Montpellier, France
commented
Status: Needs work » Needs review

Hi @zvse!
Would you please answer #5 so we know how to move this issue forward?
We might need to address your demands in a follow-up.
Thanks!

Daniel_N67536’s picture

Daniel_N67536 commented
Status: Needs review » Reviewed & tested by the community

  • zvse committed 099c0eb on 8.x-1.x authored by DuaelFr 
    Issue #2981263 by DuaelFr, leymannx, zvse, dimr, markdc, tijsdeboeck,...
imyaro’s picture

imyaro commented
Status: Reviewed & tested by the community » Fixed

Commited to dev branch.
Thanks everyone

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

martijn de wit’s picture

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented

Just a little note when you are updating to a newer version. (and wondering why things don't work anymore)
From up 8.x-1.12 you need to enable the SVG Image Responsive module that comes with this module :)

neurer’s picture

neurer commented

Hint: Went from 1.10 to 1.13. After enabling the new svg_image_responsive.module logs gave me "Unable to generate the derived image located at (...)" for all responsive SVGs. drush cache:rebuild fixed that for me.

nikolabintev’s picture

nikolabintev commented

Hi everyone,

I see that the patch has been committed in 8.x-1.x, but it seems that there some aspects of the patch that are missing in the branch. For instance,
SvgResponsiveImageFormatter::class is not set on svg_image_field_formatter_info_alter

A sample of the patch:

/**
@@ -21,6 +22,9 @@ function svg_image_field_widget_info_alter(array &$info) {
  */
 function svg_image_field_formatter_info_alter(array &$info) {
   $info['image']['class'] = SvgImageFormatter::class;
+  if (!empty($info['responsive_image'])) {
+    $info['responsive_image']['class'] = SvgResponsiveImageFormatter::class;
+  }
 }

and here is what is currently on 8.x-1.x branch: https://git.drupalcode.org/project/svg_image/-/blob/8.x-1.x/svg_image.mo...

martijn de wit’s picture

martijn de wit
Primary language Dutch
Location 🇳🇱 The Netherlands
commented

@nikolabintev good catch. Because this issue is closed, it does not appears on everyones list anymore.
Best way to handle this thing is to open a new issue and link to this one.