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

Some image sizes not working #37

Closed
chadmorrow opened this issue Oct 24, 2017 · 7 comments
Closed

Some image sizes not working #37

chadmorrow opened this issue Oct 24, 2017 · 7 comments
Labels
enhancement An enhancement is a change that is not a feature. question

Comments

@chadmorrow
Copy link

First of all, thank you for this repo, it is by far the best html renderer for React Native that I've tried.

The problem I'm having is that not all images are being sized correctly. I'm using the Dimensions.get('window').width trick but some images are rendered at full size and spill off the screen. I'm not sure exactly what the cause is but it seems to only apply to images who have their sizes specified in this format: sizes: "(max-width: 100px) 100vw, 603px"

I'm building a rss feed reader using the Feedly API so I've been noting which feeds give me problems with their images and they all have that sizing format in common. Some examples of the feeds that do this:

https://postsecret.com/
https://waitbutwhy.com/
http://www.poorlydrawnlines.com/

Here's a screencap of the debug output when the screen is rendered:
imagerenderdebugoutput

And the html I'm rendering look like this:

<p>
  <img sizes="(max-width: 700px) 100vw, 700px" src="http://www.poorlydrawnlines.com/wp-content/uploads/2017/10/poltergeist.png"
    alt="" width="700" srcset="http://www.poorlydrawnlines.com/wp-content/uploads/2017/10/poltergeist.png 700w, http://www.poorlydrawnlines.com/wp-content/uploads/2017/10/poltergeist-300x264.png 300w"
    class="wp-image-6468" height="615">
</p>

I'm sure I didn't do a great job explaining all this but I'm happy to provide any additional information needed to figure this out.
@chadmorrow
Copy link
Author

I don't know if this is a related issue but all youtube embedded videos also spill off the screen.

Oh and I'm currently using 3.5.0-rc.3 of react-native-render-html

@Exilz
Copy link
Contributor

Exilz commented Oct 26, 2017

Hi @chadmorrow, thanks for the kind words !

As documented in the README :

Please note that if you set width AND height through any mean of styling, imagesMaxWidth will be ignored.

In your example with the ghost comic, you do have height and width, so imagesMaxWidth isn't doing anything.

It resizes properly as long as I remove them

I'm not sure what's the best in your situation, because I guess you can't make sure these attributes aren't in your HTML. Well, you could use alterChildren to remove them but it feels like hacking. I really think height and width should override anything if they're supplied.
Please tell me if you have some ideas to resolve this.

Regarding your other issue, at the moment, there is no behavior regarding <iframe> to make sure it's not rendered off-screen, it depends on height and width attributes, or defaults to 200x200, which is kinda terrible I guess.

It would be nice to add a fallback depending on the width of the screen instead of a static value.

@Exilz Exilz added enhancement An enhancement is a change that is not a feature. question labels Oct 26, 2017
@chadmorrow
Copy link
Author

Oh, the iframe issue might just be a misunderstanding on my part. I thought I had read on a different issue that had been closed that there was support added for iframes similar to images but now I don't see where I would have read that.

Thanks for looking into the issue with the images. I can't quite figure out why the height and width attributes are always set to 1 on some of these problem images and it doesn't seem to matter what I try to override them to, they always render full size. I'll keep working on it though and let you know if I figure anything out. Thank you again for taking the time to look into this!

@Exilz
Copy link
Contributor

Exilz commented Oct 26, 2017

When I request the image of your example it's actually a 1x1 image, so your issue must come from your feed.

I'll think about improving the iframe renderer and keep you posted.

@Exilz
Copy link
Contributor

Exilz commented Oct 27, 2017

I improved the iframe renderer in 3.5.0. It's not perfect, but at least, iframes cannot be rendered with a width superior to your device's viewport. That's a little better, but for advanced usage you'll need to write your own renderer.

Feel free to re open another issue if your image rendering problem actually comes from this plugin.

@Exilz Exilz closed this as completed Oct 27, 2017
@Stevevelt
Copy link

The image size issue is still a problem for me as well. It seems like this did not get resolved

@gvsakhil
Copy link

gvsakhil commented Jan 9, 2020 •
edited

@Stevevelt
Try this

<HTML html={textToRender} {...htmlConfig} ignoredStyles={['height', 'width']} imagesMaxWidth={Dimensions.get('window').width} style={{ width: '100%' }} />

Try adding ignoredStyles

@mmkthecoolest mmkthecoolest mentioned this issue Oct 30, 2023
Closed
15 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement An enhancement is a change that is not a feature. question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Stevevelt @Exilz @chadmorrow @gvsakhil