Docs

[strobley]

Hi Themeco,

I’m trying to automatically add a class to images.

Whilst its possible to add to <img tag code, it does not seem easy to a class to featured images and woocommerce products for example. Something I thought would be v.easy, turns out to be in realms of NASA!

I’ve followed the post here: http://stackoverflow.com/questions/20473004/how-to-add-automatic-class-in-image-for-wordpress-post

Which works with the default WordPress themes, twentyfifteen, twentysixteeen – however when using with X I get a DOM Null exception error. I understand X offers more features so think its probably a problem the code I’ve found, not X.

I then released you guys automatically add the x-image class to all images, so wanted to ask if the developers could point in the direction of the code theme which adds this class.

It found the follows filters which I think are needed:

the_content
post_thumbnail_html
the_excerpt
get_avatar
widget_text
get_image_tag

But I cannot find the functions which add the x-image class. I wish only to use the X functions purely as a reference point to understand how I may be able to automatically add my own classes.

Many thanks.

[Friech]

Hi There,

Thanks for writing in! Which images you want to have the additional class? Do you need it to all images? You can use the jQuery below instead.

(function($) {
   $("img").addClass("additional-class");
})(jQuery);

You can add this under Custom > JavaScript in the Customizer.

Thanks.

[strobley]

Thanks very much Friech, I had looked at the Javascript option. The problems are:

1. There is no fallback for non JS.
2. It is dependant on the Javascript being called the correct sequence. none deferred and the impact of things like browser re-size.

Generally the recommended best practice seems to be keep the ‘delivery’ of assets server side, in this case the PHP.

I would really appreciate being pointed in the direction of the X functions that add the class x-image as a point of reference to help me create functions around the mystical world of WordPress images!

Many thanks 🙂

[Rad]

Hi there,

That can’t be done automatically. Images are implemented in many different ways, and we can’t cover any of it since most of the theme are part of the core. But in terms ox x-image then it should be in this file \wp-content\plugins\cornerstone\includes\shortcodes\image.php

But it has nothing to do with the filters you provided, I suggest you check WordPress Codex about those filters and see if you can modify classes through them.

Thanks!

[Author]

Posts