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-"]