Dimensions for an image inside HTML code not respected

Anvil Q&A
1

Hello Friends:

Inside a RichText component in restricted_html mode, I have its content attribute populated with ABOUT-page information in HTML. Incidentally, that RichText component is nested inside a ContentPanel (should that eventually matter). Except for one image, it all textual information.

I generated the HTML for it using this WYSIWYG HTML editor, and when I paste it into /home/nmvega/about.html and render it with a local browser, the Width and Height dimensions set for the image are respected.

However, they are not respected (totally ignored in fact) when that same HTML is used inside a launched Anvil App (which wraps more around that HTML).

I don’t know how to adjust the dimensions in that context and am hoping community friends can help me.

Here is a simplified clone-image of my problem:

https://anvil.works/build#clone:NGL2GYVOMIDVQVHD=6ZJCVWVJSAZTO7A7DDYCMK3O

Thank you for your help!

2

Looks like this is specific to the Rich Text component. Using a straight (unrestricted) HTML component the image is displayed according to the correct width and height.

If the use of Rich Text is needed, hopefully someone else can help with the image width/height. I don’t use that component for anything that complicated.

I will note that Rich Text uses a restricted version of HTML so that you can allow users to type in HTML and you can safely display that HTML to other users, preventing XSS/XSRF attacks. If the HTML is something that you’re putting in, and general users cannot, then you don’t need the restricted HTML. You can just use something like:

        html = HtmlTemplate()
        html.html = about_page_html.about_html
        self.add_component(html)

Not really an answer, sorry, but a possible alternative depending on your use case.

1 Like
3

It’s most certainly an answer. Thank you.

Correct. So I’ll try your solution (implement an HTML page) tomorrow. Thank you for this code snippet. :smiling_face:

4

@jshaffstall This alternative approach worked perfectly. Thank you for suggesting it and providing the (just about) plug & play snippet.

5

I can’t take credit for that snippet, just passing along the wisdom that @stucork gave to me some time back. I’d previously been doing the same thing in a more complicated way.

1 Like
6

@jshaffstall @stucork Thank you both.