• Skip to primary navigation
  • Skip to main content
  • Skip to footer
  • Home
  • About
  • My Blogs
    • Photoblog
    • Knots
    • WP.com tips
kristarella.com

kristarella.com

Happiness Engineer at Automattic, lover of knitting, crochet, sci-fi and more

  • Presentations
  • Plugins
    • Exifography
  • Contact
You are here: Home / Tutorials / IDs and classes in Exifography output

IDs and classes in Exifography output

26 October 2012 by kristarella

I just released Exifography 1.1.3, which includes the ability to add unique IDs and classes to the HTML output of your EXIF data.

EXIF block ID

In order to add the image ID to the EXIF container HTML use %s where you want the ID to appear. E.g., <ul class="exif" id="%s">

The output for that ID is wp-image-ID, since WordPress automatically adds the same as a class to the images it inserts into posts you can fairly easily associate the EXIF block with its image, which will be useful for javascript effects and that sort of thing.

If you happen to be using that ID as an ID for something else on the same page you could include it as a class instead: <ul class="exif %s">.

EXIF item classes

You can also add a unique class to each exif item to style them separately.

E.g., <li class="%s">

The class that is applied is the same as the keys used in the shortcode. So, in order to style the timestamp differently to all the other items, for example, you would use .created_timestamp {text-transform:uppercase; color:blue;}.

Share this:

  • Share on Facebook (Opens in new window) Facebook
  • Share on X (Opens in new window) X

Like this:

Like Loading…

Related

Filed Under: Tutorials

Footer

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Categories

%d