Using a theme that was generating one background image for all the thumbnails on hover, plus a dynamically created title and category heading, I wanted to have the thumbnails swap in themselves so it would look like they don’t change and just style the heading title to hover with a transparent background.

I did not want to re-write the background code too much —I am stronger in HTML and CSS than PHP and javascript. Everytime I Googled my search I was directed to “how to insert thumbnails with custom fields” which I had already done, or “Add a custom field like mood:happy, weather:sunny”.

My searches finally led me to what should have worked in theory: I added a new custom field

name:thumbclass  value:ltb

(ltb is just the abreviation of the site name I was testing with). I saved the post so all Web site posts would have a field for thumbclass.

Next I had to find where the theme was grabbing the thumbnails and get the theme to give each Web site post whatever new class I entered in the newly created field. The theme by the way is workaholic from GraphPaperPress.com

The page I started with was images.php
I changed this:

/* Add the $size and any user-added $image_class to the class. */
	
	$classes[] = $size;
	$classes[] = $thumb_class;

/* Join all the classes into a single string and make sure there are no duplicates. */
	
        $class = join( ' ', array_unique( $classes) );

To this:

$thumbclass = get_post_meta($post->ID, 'thumbclass', $single = true);

      $classes[] = $size;
      $classes[] = $thumbclass;

/* Join all the classes into a single string and make sure there are no duplicates. */
  
      $class = join( ' ', array_unique( $classes) );

NOTHING happened. The only class being generated was

class="thumbnails"

Which was working with the custom field for my thumbnail:

name:thumbnail value:http://mywebsite.com/images/mythumb.png

I could not see why this was not working. After trying a search with the following terms: “wordpress plugin add css class to thumbnail” and “add image class from custom field” all I saw was a full Google page of visited links. I could not think of a new way to ask the question. I decided to go broader instead of more detailed.

I knew that

get_post_meta

shows values of custom fields so I searched “wordpress get_post_meta not showing” and found the following sentence on WordPress.org support page
Thank you,alchymyth:

<?php echo get_post_meta(get_the_ID(), 'customfield', true); ?>

sometimes, get_the_ID() works where $post->ID does not.

I really did not think

get_the_ID()

instead of

$post->ID

would make a difference.

It worked! I could not believe my eyes when I refreshed my page and viewed the source code. There it was:

class="thumbnail ltb"

The work however wasn’t over because it turns out the hover was dealing with a background image in the surrounding div, not replacing one image for another. Working at 1:00AM can be less than enlightening.

In my index.php file I changed this:


<div class="portfolio grid_4 <?php if ($i == 1) { ?> alpha<?php } else if($i==3) {?> omega<?php $i = 0;} ?>">

to this:


<?php $thumbclass = get_post_meta(get_the_ID(), 'thumbclass', $single = true); ?>
<div class="portfolio grid_4 <?php echo ($thumbclass); if ($i == 1) { ?> alpha<?php } else if($i==3) {?> omega<?php $i = 0;} ?>">


This gave me the class on the outer div:

div class="portfolio grid_4 ltb"

Now I was able to use my style.css to load a different background image according to each Web site’s post class (the new background images would be the same as the original thumbnail).

After writing the styles, my new class based background images were still not showing.

The final step was in the footer.php I had to change this:

jQuery('#content div.portfolio').hover(function(){
		jQuery(this).find('img').fadeOut();
	}, function(){
		jQuery(this).find('img').fadeIn();
	});

to this:

jQuery('#content div.portfolio.grid_4').hover(function(){
		jQuery(this).find('img').fadeOut();
	}, function(){
		jQuery(this).find('img').fadeIn();
	});

I know there is a more efficient way to get this done, but sometimes you get so invested in changing a theme that it is easier to just build from where you are.

It bugs me that now I am adding a ‘thumbclass’ to a div! I should go back to the 23 pages and change it to a more reflective name and then change the index.php page. If this sentence disappears it will mean I had time to do this.

I am writing this more to help someone like me that is in a jam. NOT as a ‘best practices’ example.

---

This entry was posted on Monday, October 10th, 2011 at 3:56 pm and is filed under the category Code. You can follow any responses to this entry through the RSS 2.0 feed.