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.

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

add option to set image heigth and with to null #97

Closed
The-Redhat opened this issue May 27, 2019 · 14 comments
Closed

add option to set image heigth and with to null #97

The-Redhat opened this issue May 27, 2019 · 14 comments
Labels
bug Something isn't working high-priority
Milestone

Comments

@The-Redhat
Copy link
Contributor

The-Redhat commented May 27, 2019

With the new ImageProperties it isn't possible to set width & height to null. Because the given height an width of the html is often optimized for large displays, empty areas are showing up.

In my opinion the version 0.10.1 should be marked as breaking, because it introduces some visual changes.

@The-Redhat
Copy link
Contributor Author

For example when the html uses srcset the height and width attributes aren't ment to be used on phones. The height is often set to 1920x1080 which leads to whitespace in flutter_html.

@Sub6Resources Sub6Resources added bug Something isn't working high-priority labels Jun 10, 2019
@Sub6Resources Sub6Resources added this to the Next Version milestone Jun 10, 2019
@Sub6Resources
Copy link
Owner

Yeah, there are a couple issues with the new way we handle images. I'll take a look at it and add a way to set width and height to null.

@andreyeurope
Copy link

@The-Redhat Could you explain the issue in detail? I don't get what you mean by set image heigth and width to null. If you don't set the ImageProperties width and height, or have width and height attributes in html, the width and height from the Image widget will be set to null.

@The-Redhat
Copy link
Contributor Author

The-Redhat commented Jun 20, 2019

@andreyeurope When you have width and height attributes in your html the Image Widgres is set to these attributes. But for example when you have a srcset the height an width attributes doesn't represent the actual height an width of the picture. This leads to empty spaces. In this example the library should ignore the specified height and width attributes.

@andreyeurope
Copy link

Do you have an example with screenshots?

@The-Redhat
Copy link
Contributor Author

The-Redhat commented Jun 21, 2019

Sure, but I'm currently on vacation. I can post an example with screenshot in two days.

@andreyeurope
Copy link

Ok, cool. Looking forward to it. Enjoy your holiday.

@The-Redhat
Copy link
Contributor Author

Nevermind found one on my phone:

<img class="alignnone wp-image-2210 size-full" src="https://pelikan-sz.de/wp-content/uploads/2019/04/clevershuttle-screenshot.jpg" alt="Screenshots der App von CleverShuttle" width="1920" height="1026" srcset="https://pelikan-sz.de/wp-content/uploads/2019/04/clevershuttle-screenshot.jpg 1920w, https://pelikan-sz.de/wp-content/uploads/2019/04/clevershuttle-screenshot-300x160.jpg 300w, https://pelikan-sz.de/wp-content/uploads/2019/04/clevershuttle-screenshot-768x410.jpg 768w, https://pelikan-sz.de/wp-content/uploads/2019/04/clevershuttle-screenshot-1024x547.jpg 1024w, https://pelikan-sz.de/wp-content/uploads/2019/04/clevershuttle-screenshot-650x347.jpg 650w" sizes="(max-width: 1920px) 100vw, 1920px" />

IMG_20190621_092049

@andreyeurope
Copy link

I gave it a thought over the weekend, and I was thinking to add a flag (or two) to ignore the width and height values found in the HTML img element.
@Sub6Resources Did you think about a solution for this edge case?

@The-Redhat
Copy link
Contributor Author

The-Redhat commented Jun 24, 2019

An other option would be to set the default for height width to below zero and filter out values below zero when creating the Image Widget. This would simplify it and makes it a non-breaking change Otherwise you have a lot of flags.

@Sub6Resources
Copy link
Owner

@andreyeurope I think @The-Redhat's suggestion of using negative values for width/height in the ImageProperties object will be the best way to go so we can keep the change non-breaking.

@sooxt98
Copy link

sooxt98 commented Sep 10, 2019

Thanks , I'll try it later

@sooxt98
Copy link

sooxt98 commented Sep 13, 2019

@Sub6Resources this need a documentation for this, If not beginners need to look into the code

@Sub6Resources
Copy link
Owner

@sooxiaotong Yup, the documentation does need to be improved both for this and all the other properties as well. I've opened a new issue for documentation: #159.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working high-priority
Projects
None yet
Development

No branches or pull requests

4 participants