I know that an SVG image is scalable (as its name states), so doesn't really need to be processed to be resized, as said in #3109170: Image style not applied.
I also know that some toolkits still process those image files (simply change default size in metadata, I guess): #3076311: Use image style when configured toolkit supports SVG.

But still, with the standard GD toolkit, there may be cases where we display a styled image field and don't know if the value will be an SVG, JPG,... In that case, it would be nice to be able to take the dimensions of the image style defined in the formatter settings to display the SVG image, instead of having to specify the SVG dimensions manually (what if image style dimensions change afterwards,...).

This can be done easily with HTML width and height attributes.

Issue fork svg_image-3126330

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

GaëlG created an issue. See original summary.

gaëlg’s picture

Status: Needs work » Needs review
StatusFileSize
new2.22 KB

Here's a patch.

gaëlg’s picture

StatusFileSize
new864 bytes
new2.22 KB

Whoops, I forgot a little fix.

Watergate made their first commit to this issue’s fork.

watergate’s picture

Version: 8.x-1.x-dev » 3.x-dev

The patch provided in #3126330-3: Apply image style dimensions with HTML attributes didn't apply anymore to the latest version, so I've updated the code and created a merge request.

gaëlg’s picture

Status: Needs review » Reviewed & tested by the community

I tested and confirm that the merge request successfully adds width and height HTML attributes to img tags with an SVG rendered using the default image formatter with an image style applied.

clemorphy’s picture

Same as GaëlG.
MR from #5 tested and confirmed to work.
Waiting for this to be available in the next stable release.
Meanwhile is it possible to have a patch?

watergate’s picture

@clemorphy, thanks for testing (and GaëlG, but you wrote the initial code). You can download a plain diff from the merge request. See the plain diff link under the issue fork list at the top of this page (left beside the green "MR !25 mergeable"). For additional information, see https://www.drupal.org/docs/develop/git/using-gitlab-to-contribute-to-dr...

saurabhpandit26’s picture

Re-rolling the patch for latest version.

gaëlg’s picture

I made a new branch which also contains the fix from #3257729: Formatters shouldn't repeat core code, because I needed both fixes:
https://git.drupalcode.org/issue/svg_image-3126330/-/commits/3257729-312...

The code for this issue changes quite a lot when #3257729: Formatters shouldn't repeat core code is applied.

On this branch, I also added support for responsive images. I guess my branch could become the one for an up-to-date merge request if #3257729: Formatters shouldn't repeat core code lands before this one.

I manually tested locally and it seems to work well on my use case but I did not carefully tested all the possible usages.

mably’s picture

Status: Reviewed & tested by the community » Fixed
mably’s picture

Looks like I have merged it too quickly.

Styling doesn't seem to work on my side.

          $dimensions = [
            'width' => $item->width,
            'height' => $item->height,
          ];

width and height seem to be always NULL here...

Aren't we supposed to extract the size from the SVG file itself as it is done in the widget?

@gaëlg an idea?

mably’s picture

Status: Fixed » Needs work
mably’s picture

@gaëlg this code seems to work, could we switch to it?

    if (empty($attributes['width']) && empty($attributes['height']) && isset($imageStyle)) {
        // Determine the dimensions of the styled image.
        $dimensions = svg_image_get_image_file_dimensions($file);
        $imageStyle->transformDimensions($dimensions, $file->getFileUri());
        $attributes['width'] = $dimensions['width'];
        $attributes['height'] = $dimensions['height'];
    }

Or may be the MR code is trying to do something different that I am missing?

Without any feedback in the coming hours, I will merge MR 40 to rollback MR 25.

gaëlg’s picture

Status: Needs work » Needs review

MR40 looks good to me. If it works, it should be committed.

  • mably committed 0951b328 on 3.x
    Issue #3126330 by @mably: Apply image style dimensions with HTML...
mably’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

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