Is there a way to target images in a directory based on names?

I am redesigning a site that is built using WordPress. I have updated the theme, added customization, etc - but, there are tons of pages for each publication volume which have a cover image, all of which have no class or id added. I'm not sure how they were imported from the static old static version of the site, and I have no way on contacting the previous developers.

The images all begin with "Vol-" in the image name, so is there a way to target these images in order to added a class and resize them? I'd like to apply a class to these specifically instead of going through literally hundreds of pages to do so. Is this possible with jQuery?

One caveat, if it matters: they are contained within a table, with a figure image beside it.

Example: http://jmpee.org/whitepapers/current-issue-2/

Solutions

You can target such image with selector "Attribute SRC begins with Vol-": img[src^="Vol-"]. The styling can be done in pure CSS, e.g.

img[src^="Vol-"] {
    width:100px;
    height:100px;
    border:solid 1px blue
}

Demo: http://jsfiddle.net/KCnEg/

If you prefer to use jQuery, same selector can be used as jQuery selector. Note that if actual attribute does not begin with "Vol-", for example it's something like <img src="http://mysite/folder/vol-15.png" /> you can target selector "Attribute SRC contains Vol-": img[src*="Vol-"]

Tags: Jquery / Css / Wordpress

Similar questions

Adding Woocommerce Brands names to cart item product names
I use the Woocommerce Brands plugin and I would like to add the Brand to each product when it is in the cart, like it displays variations. So Product Name, and then Size: XXX Colour: XXX Brand: XXX I have tried a few ways of doing it but I can't seem to get it to work.
Add a line break to Woocommerce cart item names and order item names
Context This question is a follow-up on the previous question titled Add a line break in Woocommerce Product Titles To me the code in this topic (seen here below) works like a charm, when adding it to my child astra theme. I have a question to upgrade this code a bit, hoping some smart developers out there might help me. So i change the products na...
Is there a way to avoid using add_image_size? Best way to manage images
Currently if you have a theme that use add_image_size for let say 6 different image size you will have 6 different thumbnail created that will maybe never be used. With the current version of WordPress what is the best way to make a theme that use 6 or more image size. What about the wp_get_attachment_image function, if you use an array instead of ...
Is there a way to dynamically reveal a DIV similar to the way that Lazy Load delays the loading of images
How can I hide a DIV until it's scrolled to? I want to speed up the loading of several large background images, because these are not IMG elements, Lazy Load isn't really an option. Other things I have considered include separating my page into three sections and using an infinite scroll plugin and replacing the background images with IMGs lower in...
Is there any way to register custom background images like header images?
I wonder if there exists a quick way to register custom background images as simple as we do with the custom headers. Google fetched me nothing but this, couldn't get anything meaningful out of it. Is anyone doing this? Thoughts?
best way of adding blog to existing website - Can you apply layout from the root directory to blog in sub-directory?
I am building a website using Bootstrap Frameworks for a friend and they would like a blog that they can easily update. I don't like wordpress that much but appreciate it is easy for website owners to update themselves etc and am thinking of adding a wordpress or Ghost blog to the bootstrap website I am building. Some Problem I would like the style...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.