Add class to <div> based on filename

3 Views

I’m looking for a solution to a workaround. Right now the best workaround I’ve determined is to be able to add a class to an attachment on a wordpress page. At the moment, WordPress doesn’t have any easy way to simply add a class for CSS styling later.

Currently when the HTML is generated, it wraps it in a div. This is how it is generated (I think):

Read More
<?php   
   $bigsrc =  wp_get_attachment_image_src( $attachment->ID, 'full'); 
   $zoom = $bigsrc[0];
   $src = wp_get_attachment_image_src( $attachment->ID, 'post-thumb'); 
   $attachmenttitle = apply_filters('the_title', $attachment->post_title); 
   $class = "media-image";
?>

<div class="item-photo <?php echo $class;?>">

Is there a way to add a class based on the filename? I can easily rename the files “red-01.jpg” and “blue-01.jpg”. I’m hoping that there is some script that could output html as: 

<div class="item-photo media-image red"><img src="red-01.jpg" /></div>
<div class="item-photo media-image blue"><img src="blue-01.jpg" /><div>

I have to use the WordPress attachment method since the script I’m using for a project already calls for attachments to the page, and is pretty sophisticated. If there was a simple class addition to WordPress media uploads my problem would be solved. Thanks a bagillion!

I’m completely open to any solutions…as long as I can add a class to the div as above!

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. What about 

    div class="item-photo <?php echo ($class." ".$src); ?>">

    or $bigsrc, or whatever value is most useful in identifying the image (not sure what the values are)

  2. Instead of using wp_get_attatchment_image(), use wp_get_attatchment_image_src() and fill in the values yourself. Once you have the image source, you can just do a substr_replace() to get rid of the file extension and throw that into the class.