Skip to main content

Removing width attribute from img tag - Python

Akshay Raj Gollahalli

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.
 
0

Comments

10 comments

Date Votes
  • Ido
    Edited

    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:

    <img src="http://res.cloudinary.com/gollahalli/image/upload/c_thumb,g_center,o_100,r_max,x_0,y_0,z_0.75/akshay_b8wb1x.png"/>

    Hope this helps, please let me know if you have any further questions.

    Thanks,
    Ido

    0
  • Akshay Raj Gollahalli
    Edited

    If I do that, the image should be of equal dimensions to get a rounded figure, in my case it is not. I have tried your way but the output is elliptical. Any more suggestions?

    0
  • 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.

    0
  • Akshay Raj Gollahalli

    Hi,

     

    I have tried that, but I get an oval image. Any more suggestions?

    0
  • Ido

    Hi

    The "c_thumb" flag creates an image which is 200X200. However, because of the current outstanding bug that adds the "width" attribute to the img tag while still using the crop mode, there is no current solution for this at the moment.

    Once this is changed, I will let you know.

    0
  • Ido

    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.

    0
  • Akshay Raj Gollahalli

    Hi Again, 

    Yes this looks like a good solution, any idea on how to ignore the height attribute as well? if I ignore only width I get ovel image. I am trying to crop the image to 200 by 200.

    0
  • Ido

    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

    0
  • Akshay Raj Gollahalli

    Hey,

    Any update on this bug?

    0
  • Ido
    Edited

    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

    0

Post is closed for comments.

Didn't find what you were looking for?

New post