I’ve been using List Category Posts for a while to output a basic list of links. I’d now like to make them look more attractive by including the thumbnail for each link and allowing them to scroll horizontally.

Using the W3C example as a basis I’ve created a menu using the following code:

<style type="text/css">
	div.scrollmenu {
		overflow: auto;
		white-space: nowrap;
	}

	div.scrollmenu a {
		display: inline-block;
		color: black;
		text-align: center;
		padding: 0;
		text-decoration: none;
		width: 218px;
		white-space: normal;
		vertical-align: text-top;
	}

	div.scrollmenu a:hover {
		background-color: #aa0000;
	}
  </style>

<div class="scrollmenu">
  <a href="www.thisismylink.com/a"><img src="a.jpg" /><br />First story</a>
  <a href="www.thisismylink.com/b"><img src="b.jpg" /><br />Second story</a>
  <a href="www.thisismylink.com/c"><img src="c.jpg" /><br />Third story</a>
</div>

I now need to make List Category posts output the code to match what’s in the div. Using a custom template I’ve been able to get close but not close enough. This is what I’ve got:

<div class="scrollmenu">
  <a href="www.thisismylink.com/a" title="First story"><img width="218" height="117" src="www.thisismylink.com/a" class="attachment-218x117 size-218x117 wp-post-image" alt="" /></a><br /><a href="www.thisismylink.com/a" title="First story">First story</a>   
  <a href="www.thisismylink.com/b" title="Second story"><img width="218" height="117" src="www.thisismylink.com/b" class="attachment-218x117 size-218x117 wp-post-image" alt="" /></a><br /><a href="www.thisismylink.com/c" title="Second story">Second story</a>   
  <a href="www.thisismylink.com/c" title="Third story"><img width="218" height="117" src="www.thisismylink.com/c" class="attachment-218x117 size-218x117 wp-post-image" alt="" /></a><br /><a href="www.thisismylink.com/c" title="Third story">Third story</a>

Obviously what I need to do is wrap both the thumbnail and image in the same link. But I can’t see a way of doing this short of hacking core List Category Posts plugin files. I’m reluctant to do that because it will screw up all the previous instances when I’ve already used List Category Posts (and it’s not great practice either).

Can anyone suggestion a solution? I wondered if it would be possible to override the CatListDisplayer class within my custom template but I don’t think this is possible as it’s being called elsewhere.

I’m pretty much at the limit of my PHP knowledge here which is frustrating as I think I’m close to a solution!