My goal is to have action icons in lists that correspond to how the list item is tagged or categorized.
For example, if I have a list item that is a webinar it should have a webinar icon next to it, the next item in the list might be a white paper, which should have a white paper icon next to it. The population of the icons should be controlled by how the list item is tagged or categorized.
I don’t know where to start; any suggestions are appreciated. Thanks!
EDIT:
Thought it might be helpful if I show the list I’m wanting to modify – technically, the items that I want to modify are in the span class=meta” section, but I’m open to using whatever method worls:
<ul class="sub_nav">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active last">
<a href="#resource_center" title="Resources II">
Featured Resources
</a>
</li>
</ul>
<div id="resource_center">
<?php
$resources = get_posts("post_type=resource&posts_per_page=2&cat=31&tag=featured");
?>
<?php foreach ($resources as $key => $resource): setup_postdata($resource); ?>
<?php if ($key === 0): ?>
<?php endif ?>
<p><span class="meta"><?php echo apply_filters('get_the_date',mysql2date('m.d.Y', $resource->post_date), 'm.d.Y') ?></span>
<a href="<?php echo get_permalink($resource->ID) ?>"><?php echo $resource->post_title ?></a> – <?php echo strip_tags(get_the_excerpt()) ?></p>
<?php endforeach; ?>
<span class="more"><a href="/resources/">Read More</a></span>
</div>
Just name all your icons after the tags they correspond to and put them in the same folder on your server (let’s say http://www.yoursite.com/tagicons)
In your loop, just iterate the meta tag inside an image tag
Paste the code you’re using to iterate your list items if you need more help.
Cheers
-D
EDIT:
I se you’re using wordpress.
Refer to http://codex.wordpress.org/Function_Reference/wp_get_post_tags
to see how to get the tags you’re looking for.
If you are generating the list inside the WordPress loop you can add the category as a class to the list element. For example:
Then utilize CSS to style the list block.
While I think both of these solutions would have worked, I decided to go with a third solution I discovered as I researched options to meet my use case. This one was ideal because I was able to seamlessly fit it into my existing code structure and because I have a relatively low number of resources that I need to add the featured image to.
I added the code below, which basically uses the post’s featured image as a left-aligned thumbnail.
Followed by this code snipped to grab the image and put it by the list item:
Here’s a screen shot of my test site list section after I added the code – it’s exactly what I was looking for:
Thanks for the suggestions and help, it got me moving in the right direction!