I received a request to make Thesography display EXIF upon hover over an image instead of just displaying as more text in the post. While I won’t include that kind of function in the plugin at this time (because I’m not sure how best to do it while maintaining a good amount of flexibility), I can show you how to implement it to suit your posting style.

EXIF via the title attribute

A very simple (though arguably non-semantic) way of doing this could be to display a tooltip via the title attribute.

EXIF displayed in a tooltip by Thesography

When you insert your image into your WordPress post you can insert the Thesography shortcode into the title attribute via the HTML view.

<img src="http://www.example.com/wp-content/uploads/2009/10/lily.jpg" alt="lily" title="[exif id="18" show="all"]" width="800" height="529" class="aligncenter size-full wp-image-18" />

For this to work you must not have any HTML in the Thesography HTML display options. You should change the HTML options from the default to something like the following screenshot.

Thesography HTML options for tooltip display

Fancy EXIF display with javascript

The first step to making a javascript EXIF display is to use CSS to style the EXIF block the way you want it.

Default Thesography style: list with a class of "exif"

The CSS makes it look cool

EXIF displayed by Thesography with custom CSS

Using the following CSS (in your theme’s CSS file or custom.css when using the Thesis theme), along with a black 85% opacity background image, you can get a slightly transparent black sidebar over the left of your page.

You don’t have to use this particular CSS; it’s an example of the sort of thing you can do without having to recode your EXIF HTML. The javascript will apply to a range of different styles.

N.B. IE6 does not support position:fixed;, the list will appear below the image (where it was before) instead of overlayed on the page.

ul.exif {
	position:fixed;
	left:-2em;
	top:0;
	z-index:100;
	height:100%;
	width:16em;
	padding:10em 2em 2em;
	background:url(images/black-85.png) repeat;
	color:#fff;
	list-style-position:inside;
}

The javascript makes it act cool

To start, we need to add display:none; to the CSS so that ul.exif is hidden when the page loads.

The following PHP code can go in functions.php in the main directory of your theme, or in custom_functions.php if you’re using Thesis. If your theme doesn’t have a functions.php you can make one by creating a new file with that name (in a plain text editor, not MS Word or a rich text editor); add <?php at the start and paste this code after that.

if ( !is_admin() ) {
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
	wp_enqueue_script('jquery');
}

function exif_popout() {
	if (is_single()) {
?>
<script type="text/javascript">
	$(function() {

		var hovered = 0;

		var maybeFadeOut = function() {
			if (hovered == 0) {
				$("ul.exif").fadeOut();
			}
		};

		var hoverOn = function() {
			$(this).parent().next("ul.exif").fadeIn();
			hovered++;
		};
		var hoverOff = function() {
			hovered--;
			setTimeout(maybeFadeOut, 0);
		};

		$(".post img").hover(hoverOn, hoverOff);
		$("ul.exif").hover(hoverOn, hoverOff);
	});
</script>
<?php
	}
}
add_action('wp_head','exif_popout');

The first chunk of code is from Digging into WordPress and it loads the latest (at time of writing) jQuery library, hosted by Google. Using externally hosted libraries can be good because you have easy access to the latest files and because they can load asynchronously (i.e., while something from your server is loading, this can load too because it’s on another server, things from your server only load one at a time).

The second chunk of code inserts javascript into the head of our HTML WordPress page.

exif_popout() step by step

If you need more info about basic PHP syntax try the Tizag PHP tutorial. On Tizag.com you can also find HTML and CSS tutorials.

The function exif_popout() is designed to load only on single post pages (if (is_single()) determines that). It is also designed to be useful when there are multiple images on the page, each with their own EXIF that comes right after the image in the post.

$(function() { ... }); instructs jQuery to run our function when the webpage has completed loading.

var hovered = 0; is a variable that acts as a counter getting increased or decreased as we move our mouse over and off the image or the EXIF block. It helps determine how the movement of the mouse indicates whether the EXIF should be visible or not.

maybeFadeOut is a function that when called says, if hovered is equal to zero all EXIF blocks should be hidden (with a fade out effect).

hoverOn is a function that when called takes the element it acts upon ($(this), in this case it’s the image), then it finds that element’s parent element (using parent(), which in WordPress posts will be a paragraph, because images on their own line get wrapped in a paragraph). It then finds the ul.class that is next to that paragraph (next("ul.exif")) and displays it with a fade in effect. The hovered counter is also increased.

hoverOff is a function that when called decreases the hovered counter and activates the maybeFadeOut function. maybeFadeOut is wrapped with setTimeout, which adds a delay (of zero milliseconds) to the execution of maybeFadeOut and moves it to the end of the current action queue; allowing the rest of the javascript to execute before it. This allows us to move our mouse off the image and onto the EXIF block, or off the block onto the image, without the EXIF fading out and back in again (i.e., the fade out is delayed until we really want it to disappear — when we’re not hovering on the image or the EXIF).

$(".post img").hover(hoverOn, hoverOff);
$("ul.exif").hover(hoverOn, hoverOff);
Those two lines activate hoverOn and hoverOff when you hover your mouse on and off .post img and ul.exif.

.post is a class assigned to the element containing your image. If your theme uses a different class for your posts you need to change that in the javascript. Also, ul.exif is an unordered list with a class of “exif”, which is the default display for Thesography. If you have changed the way that Thesography displays, you will need to change ul.exif to whatever element your EXIF is presented with.

What if I’m using auto-insertion in Thesis

If you’re using Thesography auto-insertion with Thesis and you have some text in between the image and the EXIF the javascript won’t work as written because ul.exif won’t be the next thing after the image paragraph, there will be another paragraph (or more) in between. However, if you’re using auto-insertion it means you’ve only got one lot of EXIF on the page and you can change $(this).parent().next("ul.exif").fadeIn(); to $("ul.exif").fadeIn();.

What if this doesn’t work with my post layout?

There are so many different ways that your images and EXIF could be laid out in a post; it’s impossible for me to predict them all.

If you want to wrap your image and EXIF in a div together, that might simplify things for you and you could look into using the siblings selector instead of parent().next("ul.exif"), or perhaps parent().children("ul.exif").

Alternatively, while writing your post you could wrap each image and its related EXIF in paragraphs or divs with a unique class for each pair, and then use the class attribute as a variable to identify which EXIF should be displayed.

For more info on how to identify and navigate elements with jQuery, check the jQuery documentation; particularly Selectors and Traversing.

If you have trouble making the javascript fit your posting style and ask for help, please be very specific with the way your posts are displayed. A link to a direct example or the source code of an example (perhaps copied into Pastebin) is preferable.

What’s wrong with this picture?

What’s up with Thesis and WPMU?

Thesis has smart CSS

Thesis by DIYthemes is big news these days so you’ve probably heard of it and have some idea what it does. One of the cool things it does is allow you to specify the widths and arrangement of your content and sidebar columns and it automatically calculates the relative widths (in ems), padding and margins. When it does this it writes to the file layout.css in the Thesis theme directory.

Smart CSS is sometimes not-so-smart

Automatic writing to layout.css is no problem on a single WordPress install, but it can present problems in WPMU: if one Thesis folder is activated on multiple blogs under WPMU each blog can write to layout.css and change the layout for all the other blogs.

Using Thesis as-is

Of course, you can use Thesis with WPMU without any modifications as long as you want it to have the same layout in all the blogs, or you only want to use it on one blog. You can also use Thesis with multiple blogs under WPMU if you give them each their own Thesis folder, but then you have to make sure you activate the right one and make sure no one else activates the wrong one.

One Thesis with multiple custom folders

I use WPMU for testing new designs: it makes it very easy to create new blogs on the fly. To reduce bloat and general confusion I like to work from one Thesis folder. This means that I need distinct layout.css and distinct custom folders for each blog using Thesis in WPMU.

Modify Thesis to use multiple custom folders

This method involves editing core Thesis files, which is usually not recommended. For this reason I have avoided releasing this information to the public. However, I have received multiple requests for this information and have decided to go public with it. Please follow the instructions carefully.

I believe there will be a better, more native, less editing-core-files method to using Thesis with WPMU in the future. If you decide to use this method, please keep that in mind. I.e., it might not be worth initiating this method on a large blog network only to have a better method later and change it all. Check the comments for suggestions on themes that might be easier to use on a large network.

Editing Thesis 1.6 beta 2

Update 7^th Oct 2009: It’s so much easier to do this in 1.6b2 now that layout.css officially resides in the custom folder!

• Edit thesis_16b/functions.php
  • At line 21, change

    define('THESIS_CUSTOM', TEMPLATEPATH . '/custom');

    to

    define('THESIS_CUSTOM', TEMPLATEPATH . '/custom/' . $blog);

  • At line 27, change

    define('THESIS_CUSTOM_FOLDER', get_bloginfo('template_url') . '/custom');

    to

    define('THESIS_CUSTOM_FOLDER', get_bloginfo('template_url') . '/custom/' . $blog);

  • Between line 10 (the end of the file intro) and 12 (the start of the constant defenitions) add

    // Blog nicename
    $blog = str_replace( " ","-",get_bloginfo('name') );

    I added this one last because it will change the line numbers of the above lines, so watch what you’re doing and get it right the first time ;-)

• Copy the contents of the custom directory to custom/Blog-Name (where “Blog-Name” is the exact name of the blog with spaces replaced by hyphens).
• Make sure the files and folders still have the correct file permissions. I.e., custom/Blog-Name/cache should be 775 and custom/Blog-Name/layout.css should be 666.

That’s all! This will make the custom folder for each of your blogs custom/Blog-Name and layout.css will operate from within that custom folder. The Blog-Name directory is not created automatically. You need to create this folder for each blog with Thesis activated.

If you have any problems with this, please check your site’s source code and see which URLs are referenced for custom.css and layout.css. This should help you diagnose where the problem is occurring and if you have your files in the right place.

Editing Thesis 1.5.1

If you’re not a developer and don’t have access to Thesis 1.6 beta, or you want to work on your trusted Thesis 1.5.1, the instructions are similar, but slightly different.

• Edit thesis_151/functions.php
  • At line 20, change

    define('THESIS_CUSTOM', TEMPLATEPATH . '/custom');

    to

    define('THESIS_CUSTOM', TEMPLATEPATH . '/custom/' . $blog);

  • At line 21, change

    define('THESIS_ROTATOR', TEMPLATEPATH . '/rotator');

    to

    define('THESIS_ROTATOR', TEMPLATEPATH . '/rotator/' . $blog);

  • At line 26, change

    define('THESIS_CUSTOM_FOLDER', get_bloginfo('template_url') . '/custom');

    to

    define('THESIS_CUSTOM_FOLDER', get_bloginfo('template_url') . '/custom/' . $blog);

  • At line 27, change

    define('THESIS_ROTATOR_FOLDER', get_bloginfo('template_url') . '/rotator');

    to

    define('THESIS_ROTATOR_FOLDER', get_bloginfo('template_url') . '/rotator/' . $blog);

  • At line 30, change

    define('THESIS_LAYOUT_CSS', TEMPLATEPATH . '/layout.css');

    to

    define('THESIS_LAYOUT_CSS', THESIS_CUSTOM . '/layout.css');

  • Between line 10 (the end of the file intro) and 12 (the start of the constant defenitions) add

    // Blog nicename
    $blog = str_replace( " ","-",get_bloginfo('name') );

    I added this one last because it will change the line numbers of the above lines, so watch what you’re doing and get it right the first time ;-)

• Edit thesis_151/lib/classes/head.php
  • At line 151, change

    'url' => get_bloginfo('template_url') . '/layout.css?' . date('mdy-Gis', $date_modified),

    to

    'url' => THESIS_CUSTOM_FOLDER . '/layout.css?' . date('mdy-Gis', $date_modified),

• Copy the contents of the custom directory and layout.css to custom/Blog-Name (where “Blog-Name” is the exact name of the blog with spaces replaced by hyphens).
• Copy the contents of the rotator directory to rotator/Blog-Name.
• Make sure the files and folders still have the correct file permissions. I.e., custom/Blog-Name/cache should be 775 and custom/Blog-Name/layout.css should be 666.

I consider the installation and managment of WPMU to be for moderate or advanced users, and therefore this tutorial is for moderate–advanced use too. If you’re not comfortable editing PHP, I don’t recommend attempting anything that involves editing core Thesis files (in most circumstances core files should not be edited at all).