Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Featured image doesn't display height in edit view if it's an .svg file #5477

Closed
neilorangepeel opened this issue Mar 7, 2018 · 10 comments
Closed

Featured image doesn't display height in edit view if it's an .svg file #5477

neilorangepeel opened this issue Mar 7, 2018 · 10 comments
Labels
[Feature] Document Settings Document settings experience [Feature] Media Anything that impacts the experience of managing media Good First Issue An issue that's suitable for someone looking to contribute for the first time [Type] Bug An existing feature does not function as intended
Milestone
Gutenberg 13.7

Comments

@neilorangepeel
Copy link

Issue Overview

If you enable .svg uploads and set one as a featured image the image container collapses and it doesn't know the correct height.

Tested on version 2.3.0

Steps to Reproduce (for bugs)

  1. Enable svg uploads
  2. Upload .svg image
  3. Set as featured image

Expected Behavior

Display image at full height within featured image section.

Current Behavior

Displays image at full height but container height is 0. Image is overflowing.

Screenshots / Video

screen shot 2018-03-07 at 14 42 42
@jeffpaul jeffpaul added [Type] Enhancement A suggestion for improvement. [Feature] Media Anything that impacts the experience of managing media labels Mar 8, 2018
@jorgefilipecosta jorgefilipecosta self-assigned this Mar 9, 2018
@jorgefilipecosta jorgefilipecosta added the [Type] Bug An existing feature does not function as intended label Mar 9, 2018
@Kluny
Copy link
Contributor

Kluny commented Mar 12, 2018

@jorgefilipecosta, I'm interested in working on this if you haven't started already.

@jorgefilipecosta jorgefilipecosta removed their assignment Mar 12, 2018
@jorgefilipecosta
Copy link
Member

jorgefilipecosta commented Mar 12, 2018 •
edited
Loading

Sure @Kluny feel free to work on it. Thank you for your interest 👍

@Kluny Kluny mentioned this issue Mar 12, 2018
Closed
3 tasks
@Kluny
Copy link
Contributor

Kluny commented Mar 12, 2018

@jorgefilipecosta, I've pushed a fix for this. Will you review it for me?

@jorgefilipecosta
Copy link
Member

Hi @Kluny thank you for submitting the PR, another contributor already reviewed it :)

@designsimply designsimply removed the [Type] Enhancement A suggestion for improvement. label Jul 11, 2018
@designsimply designsimply added the [Feature] Document Settings Document settings experience label Aug 20, 2018
@designsimply designsimply mentioned this issue Aug 20, 2018
Closed
@earnjam earnjam added this to the WordPress 5.0.1 milestone Nov 11, 2018
@designsimply designsimply mentioned this issue Dec 21, 2018
Closed
@gbwashleybrown
Copy link

gbwashleybrown commented Feb 13, 2019 •
edited
Loading

Hi,

Currently using WP Version 5.0.3 and this is still an issue.

What version is this likely to be corrected within?

@adamziel
Copy link
Contributor

It seems like there is a related discontinued PR here: #5577

Reviving it would likely fix this issue.

@noisysocks noisysocks added the Good First Issue An issue that's suitable for someone looking to contribute for the first time label Aug 25, 2020
@smwcollege
Copy link

smwcollege commented Feb 25, 2021 •
edited
Loading

I'm not able to replicate this on my site in WP version 5.6.0. Here is a rather complex SVG set as a featured image:
image

I wonder if this is an issue with the file not having a set viewbox, because the SVGs I tested all had viewboxes set.

@rafaelgallani
Copy link
Contributor

rafaelgallani commented Feb 25, 2021 •
edited
Loading

I'll try to reproduce it...
If I'm able to do it, then I'll work on it using #5577 as a reference.

@aaronrobertshaw
Copy link
Contributor

I was able to replicate this issue using a clean install of WP 5.8 and the latest Gutenberg version.

It didn't appear to be directly related to the presence or not of a viewbox, width or height attribute in the SVG markup.

The post's feature image gets rendered within a ResponsiveWrapper. That relies on the image's height and width being able to be determined. In the PostFeaturedImage component, it isn't able to reliably collect a natural height or width for an SVG. This leads the ResponsiveWrapper assigning an undefined value to the paddingBottom style.

One very rough option could be for the responsive wrapper to check for an undefined value and in that case set padding bottom to something like 100%. It worked for me quickly hacking around.

Before After
Screen Shot 2021-08-26 at 2 38 16 pm Screen Shot 2021-08-26 at 3 33 12 pm

I'm not sure what the consequences of such a change would be. Unfortunately, I don't have the bandwidth at the moment to continue working on this. Happy to assist or review a PR for anyone else that picks this up.

@Mamaduka Mamaduka mentioned this issue May 20, 2022
Closed
@Thelmachido
Copy link

Thelmachido commented Jul 29, 2022 •
edited
Loading

I tested this on the most recent Gutenberg version 13.7.3, on the Twenty Twenty-Two theme.

I wasn't able to replicate the issue as shown in the screenshots below:

On this image, I add the SVG featured image.

Untitled 2

The featured image section is looking as expected, the image isn't overflowing as before.

Untitled

Closing this issue for now.

@Mamaduka Mamaduka mentioned this issue Feb 22, 2023
Closed
tomdevisser added a commit to tomdevisser/gutenberg that referenced this issue Feb 22, 2023
@tomdevisser
ResponsiveWrapper: Fixed rendering SVGs as a featured image.
9448c8f 
The feature image gets rendered within a ResponsiveWrapper. That relies on the image's height and width being able to be determined. In the PostFeaturedImage component, it isn't able to do that for an SVG. This leads the ResponsiveWrapper assigning an undefined value to the paddingBottom style.

As suggested, I added a check for an undefined value and in that case set padding bottom to 100%.

Props aaronrobertshaw, Mamaduka.
Fixes WordPress#48184, WordPress#5477.
@tomdevisser tomdevisser mentioned this issue Feb 22, 2023
Closed
@ciampo ciampo mentioned this issue Feb 28, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Feature] Document Settings Document settings experience [Feature] Media Anything that impacts the experience of managing media Good First Issue An issue that's suitable for someone looking to contribute for the first time [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 13.7
Development

No branches or pull requests