1

First, this topic is similar to these existing threads:

Adding a class to all the images within a <div> using javascript & vice versa

How to add a class to all images except specific ones with JS

Situation:

I am using a responsive image plugin called Responsify WP, where you can exclude images from being responsive by adding the rwp-not-responsive class to the image.

I'd like to ignore all images used in another plugin due to conflicts, and ideally do this with js that checks the image file name for a pattern, convention, such as how Retina images named @2x are called by retina.js.

I'd like it to be a vanilla and light, universal as possible.

Craig
  • 11
  • 1

1 Answers1

0

You should be able to use document.querySelectorAll() to target any images you don't want affected, and then add the rwp-not-responsive class with element.classList.add

For instance, I'll add an unwanted-border class to all images (the first block of JavaScript below), pretend this is your responsive image plugin.

Then, in the second JavaScript block I'll add the rwp-not-responsive class to all images that:

  1. Have class="people"
  2. Have attr="some-attr"
  3. Have a src that contains blur anywhere in it.

You can use just about any complex selector in querySelectorAll that you want, such as the CSS Contains attribute selector: [attribute*="@2x"] should grab any image with @2x in the src URL.

// Your Responsive Script, affects all images
images = document.querySelectorAll('img');
for( i = 0, n = images.length; i < n; ++ i ){
  images[i].classList.add('unwanted-border');
}

// Code to add rwp-not-responsive class
skipImages = document.querySelectorAll('.people, [attr="some-attr"], [src*="blur"]');
for( i = 0, n = skipImages.length; i < n; ++ i ){
  skipImages[i].classList.add('rwp-not-responsive');
}
img.unwanted-border:not(.rwp-not-responsive) {
  border: 10px solid #fff;
  border-radius: 3px;
  box-shadow: 0 10px 20px -8px #000;
}
<img src="https://picsum.photos/200/300/" />
<img class="people" src="https://picsum.photos/200/300/" />
<img attr="some-attr" src="https://picsum.photos/200/300/" />
<img src="https://picsum.photos/200/300/?blur" />
Xhynk
  • 13,513
  • 8
  • 32
  • 69
  • Thanks so much!! I am not a programmer, but maybe I can hack together kind of a sidecar JS to accomplish this . . . – Craig Jun 17 '18 at 13:22
  • Someone should make a WP plugin to add classes in this way to files following a customizable naming convention, as I bet there are a lot of plugins which use classes in this way or other uses. Adding the option to add multiple classes or different naming conventions could be really useful.maybe not just to images even. – Craig Jun 17 '18 at 13:28
  • Well for the time being all you have to do use is the `skipImages` code I gave you and the following `for()` loop, just replace the `querySelectorAll()` with the selectors you want removed, such as `[src*="@2x"]`. Just make sure this JS is loaded after the other scripts that add classes/attributes that you want unaffected – Xhynk Jun 17 '18 at 22:16