Add custom CSS classes to Add Media uploads?

If you’re getting HTML output in your post, it’s only a string of what class(5)=””(3)name(x) …. say 15 – 20 characters to add a class by typing it in…

If you know how to style a class in the CSS then you’re most likely capable of writing 20 characters onto the HTML in your post…

Then you also have CSS selectors…

To add that functionality would be to add additional overhead for very little return…

You can effectively style all the elements in the post without any additional classes…

Brief example…
.postclass ul {} – First list that exists inside the post
.postclass ul ul {} – Child list inside the post
.postclass ul+ul {} – Second list..

Now bear in mind when using selectors if you were to use the above and style the second list different then the first, the third, forth, and additional lists would also be styled like the second, so you’d just do…
.postclass ul, .postclass ul+ul+ul { css stuff }
.postclass ul+ul { second list specific css }

All i’m saying is, there’s no need for additional classes when CSS can selectively grab any element you need to style already… 😉

I see what you’re saying now, sounds like a neat idea…

I know this is not ideal, but you can be really selective with the CSS…

.entry a[href^="http://"] {
  css stuff..
}

.entry a[href*="wp-content/uploads/"][href$=".jpg"],
.entry a[href*="wp-content/uploads/"][href$=".gif"],
.entry a[href*="wp-content/uploads/"][href$=".png"] {
  css stuff..
}

There’s also the option of using jQuery selectors to do similar to the above except adding a class on page load…

Just offering alternatives… 😉

Although i would agree if these were added automatically it would be a much cleaner solution…

I’ll have a dig and see if i can find which file handles the code insertion for you…

Had a nice look but couldn’t immediately see anything related..

I’m pretty sure the JS handles it via an onclick event (ie when you click Add to Post), but JS really isn’t within the scope of my knowledge..

CSS is straight-forward enough though… 🙂

RE: CSS selectors above..
[attribute] – has this attribute
[attribute$=""] – has this attribute and ends with
[attribute^=""] – has this attribute and starts with
[attribute*=""] – has this attribute and contains

So above i looked for an “a” element with a [href] attribute containing wp-content/uploads and ending with an image extension… that is a child element of the entry class..

Ok a little more a break down…

Let’s say we had 5 links, in a list, like so…

<ul class="example">
	<li><a href="http://wordpress.org/support/topic/290029?replies=10">This thread</a></li>
	<li><a href="http://www.google.com">Google</a></li>
	<li><a href="http://www.wordpress.org">Wordpress</a></li>
	<li><a href="http://www.t31os.co.uk">My site</a></li>
	<li><a href="http://www.ranoutofideas.com">Some example link</a></li>
</ul>

And now imagine we’d like to style the google link in that list…

First we’d target the list, because it has a class… so..
ul.example
then the list elements, so now..
ul.example li
Next find the link elements….
ul.example li a

Right now that targets all link elements.. so out comes the first selector.

ul.example li a[href]

So far that just selects any <a> with a “href” attribute (so pretty much any <a> element… ok let’s get more selective…
ul.example li a[href^=""]
A link that “starts with…
ul.example li a[href^="http://"]
Still not much help, nearly all links start with http:// …
ul.example li a[href^="http://www.google"]

It now matches any link element that has a HREF attribute that starts with.. http://www.google

Hopefully the previous post makes a little more sense now… 😉