Removing width attribute from img tag - Python
Hi,
Is it possible to remove the width attribute?
When I do this
cloudinary.CloudinaryImage("akshay_b8wb1x.png").image(gravity="center", opacity=100, radius="max", width=200, x=0, y=0, zoom=0.75, crop="thumb")
I get an output as
<img src="http://Image_url/akshay_b8wb1x.png" width="200"/>
How can I remove width attribute from it? Thanks. |
-
Hi ,
All you need to do to remove the width tag is simply remove the width parameter from the call. So the call would look like this:
cloudinary.CloudinaryImage("akshay_b8wb1x.png").image(gravity="center", opacity=100, radius="max", x=0, y=0, zoom=0.75, crop="thumb")
and the tag would be:
Hope this helps, please let me know if you have any further questions.
Thanks,
Ido -
Hi Again,
If you change the crop mode from "thumb" to "fit" then the correct img tag will be created, i.e the below call will generate the correct tag without the HTML "width" parameter:
cloudinary.CloudinaryImage("akshay_b8wb1x.png").image(gravity="center", opacity=100, radius="max", width=200 ,x=0, y=0, zoom=0.75, crop="fit").
Ordinarily, when specifying either width or height in the call should not create the HTML tag as well. This is indeed a bug that the tag is created with some crop modes and not others, and we have raised that with our SDK team to look into. -
Hi again
Another way you can currently work around the HTML img tag is by using the "regular expression" library.
So you can import "re", and then use the call below:
import re re.sub(r'\bwidth="[^"]+"', '', cloudinary.CloudinaryImage("akshay_b8wb1x.png").image(gravity="center", opacity=100, radius="max", width=200, x=0, y=0, zoom=0.75, crop="thumb"))
Hope this helps.
-
Hi again,
You could use the below call to remove the height tag as well:
re.sub(r'\bwidth="[^"]+"|\bheight="[^"]+"', '', cloudinary.CloudinaryImage("akshay_b8wb1x.png").image(gravity="center", opacity=100, radius="max", width=200,height=200, x=0, y=0, zoom=0.75, crop="thumb"))
Hope this helps
-
Hey,
Thank you for reaching out.
This was not a bug as I originally thought, but rather the designed behavior.
When using the "CloudinaryImage" method, the width HTML tag would be added whenever there is a crop method that has its dimensions known upon creation, like the "thumb" crop mode. So when using "thumb" crop and applying "width" to be 200 px we know that the image won't be larger than 200px. So in order to prevent text jumping when the browser allocates space to page elements
So when using "thumb" crop and applying "width" to be 200 px we know that the image would be 200px. So in order to prevent text jumping when the browser allocates space to page elements, we also add the width HTML tag.
Following this thread, we have clarified our documentation regarding this point as can be seen in the link below: http://cloudinary.com/documentation/image_transformations#embedding_images_in_web_pages
Post is closed for comments.
Comments
10 comments