Add a Class Directly to an Image

you can add class to image your example is ok. this is a question?

Using the Elementor page builder interface, is there a way to add a class directly to an image tag, not just the <section> or the <div> column tag?

Yes and no. When using an image element you can only add a class to the top most parent container. Then to target that image via css you would write your css like .my-class img { /* do css stuff */ }.

This is very powerful because with CSS you can target siblings and children but you cannot target parents. If the class was applied to the image, you wouldn’t be able to style any components that image is wrapped inside of.

If you really need to apply a class to an image there are 2 more ways I can think of.

1) Use a text element of which you can add an image and then use the text editor vs the visual editor to manually add class="my-class" to the img tag.

2) You can use Javascript to add a class, for example you can add an html element at the bottom of your page and put the following between script tags:

(function($){
  $('.your-elementor-class img').addClass('.the-class-you-want');
})(jQuery);

*keep in mind you still need to give the image element a class in Elementor to be able to target it that is where the “.your-elementor-class” comes from.

• This reply was modified 8 years, 1 month ago by pingram.

@pingram3541 – These are great solutions. Unfortunately, neither will work for me. I need to add a class directly into the img tag.

All images in my site are set to be fluid, to expand to the width of their container / column. To make images not be fluid, a class of no-fluid can be added to the img tag to make the image no longer be fluid.

My solution was to redo the image so that it is wide. The logo in the image will appear smaller (intended size) instead of too big (fluid size).

Thank you for your extremely thoughtful answer!

• This reply was modified 8 years, 1 month ago by Adam.
• This reply was modified 8 years, 1 month ago by Adam.

Ok I think you can still achieve that without too much toruble.

Try giving the Elementor image elements a class of “no-fluid” anyway and yet that likely won’t do anything but it still sets the stage for what we can do next.

Open your theme’s style.css file or you can use the WordPress customizer to add custom css and add the following:

.no-fluid img {
  width: auto;
  max-width: 100%;
}

With this we are forcing the image to automatically size by it’s own dimensions vs 100% width of the container and then we add a max-width rule to allow it to scale down if the container gets smaller than the image’s inherent width.

Depending on your theme/plugins installed, you may have to elevate these rules if they are still not working.

.no-fluid img {
  width: auto !important;
  max-width: 100% !important;
}

So first we are checking to see if whoever coded your theme also accounted for children of a parent with a class of .no-fluid.

Then if that doesn’t work we need some custom css and add a rule that targets all images within a parent container that has a class of .no-fluid.

And lastly, if we need to be forceful we specify !important.

note: These rules should not interfere with the existing .no-fluid class, we are simply creating an additional rule to catch all children img tag elements as well.

Let us know if this works out.