List Category Posts: Output thumbnail and post title within a single link

admin管理员组

文章数量:1022777

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

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'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/a"><img src="a.jpg" /><br />First story</a>
<a href="www.thisismylink/b"><img src="b.jpg" /><br />Second story</a>
<a href="www.thisismylink/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/a" title="First story"><img width="218" height="117" src="www.thisismylink/a" class="attachment-218x117 size-218x117 wp-post-image" alt="" /></a><br /><a href="www.thisismylink/a" title="First story">First story</a>   
<a href="www.thisismylink/b" title="Second story"><img width="218" height="117" src="www.thisismylink/b" class="attachment-218x117 size-218x117 wp-post-image" alt="" /></a><br /><a href="www.thisismylink/c" title="Second story">Second story</a>   
<a href="www.thisismylink/c" title="Third story"><img width="218" height="117" src="www.thisismylink/c" class="attachment-218x117 size-218x117 wp-post-image" alt="" /></a><br /><a href="www.thisismylink/c" title="Third story">Third story</a>
</div>

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.

• plugin-list-category-post

Share Improve this question asked Jan 25, 2017 at 21:01 Tim BataleTim Batale 2122 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I've been looking for the same thing, I think I've got the answer 2/3rds of the answer...

First, define a custom template for the plugin;

https://github/picandocodigo/List-Category-Posts/wiki/Template-System

Within that template, you can build up your output (containing element/s + per item) by building up the (as per demo template's examples). It turns out you can also access default WordPress functions in these lists..

$lcp_display_output .= "<li>";   
$lcp_display_output .=  '<a href=\"' . get_permalink($post->ID) . '\">';
$lcp_display_output .= $this->get_thumbnail($post);
$lcp_display_output .= $this->get_post_title($post, 'h3');
...
$lcp_display_output .= "</a>";
$lcp_display_output .= "</li>";

This is where you build up your desired styling.

Then, in your post, specify you don't want the titles to act as links (you can dress them up with tag & class at the template level);

[catlist name="cat1" template=your-template-name thumbnail=yes link_titles=false]

Where this falls over is that it still returns the thumbnail as a formatted link. I can't see a way to bring it back as just the thumbnail src via the plugin:

https://github/picandocodigo/List-Category-Posts/blob/master/doc/FAQ.md#no_link

This is my first bit of Wordpress code though, so I'm sure there's a way to get it from the built-in WordPress functions.

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

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'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/a"><img src="a.jpg" /><br />First story</a>
<a href="www.thisismylink/b"><img src="b.jpg" /><br />Second story</a>
<a href="www.thisismylink/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/a" title="First story"><img width="218" height="117" src="www.thisismylink/a" class="attachment-218x117 size-218x117 wp-post-image" alt="" /></a><br /><a href="www.thisismylink/a" title="First story">First story</a>   
<a href="www.thisismylink/b" title="Second story"><img width="218" height="117" src="www.thisismylink/b" class="attachment-218x117 size-218x117 wp-post-image" alt="" /></a><br /><a href="www.thisismylink/c" title="Second story">Second story</a>   
<a href="www.thisismylink/c" title="Third story"><img width="218" height="117" src="www.thisismylink/c" class="attachment-218x117 size-218x117 wp-post-image" alt="" /></a><br /><a href="www.thisismylink/c" title="Third story">Third story</a>
</div>

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.

• plugin-list-category-post

Share Improve this question asked Jan 25, 2017 at 21:01 Tim BataleTim Batale 2122 bronze badges 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I've been looking for the same thing, I think I've got the answer 2/3rds of the answer...

First, define a custom template for the plugin;

https://github/picandocodigo/List-Category-Posts/wiki/Template-System

Within that template, you can build up your output (containing element/s + per item) by building up the (as per demo template's examples). It turns out you can also access default WordPress functions in these lists..

$lcp_display_output .= "<li>";   
$lcp_display_output .=  '<a href=\"' . get_permalink($post->ID) . '\">';
$lcp_display_output .= $this->get_thumbnail($post);
$lcp_display_output .= $this->get_post_title($post, 'h3');
...
$lcp_display_output .= "</a>";
$lcp_display_output .= "</li>";

This is where you build up your desired styling.

Then, in your post, specify you don't want the titles to act as links (you can dress them up with tag & class at the template level);

[catlist name="cat1" template=your-template-name thumbnail=yes link_titles=false]

Where this falls over is that it still returns the thumbnail as a formatted link. I can't see a way to bring it back as just the thumbnail src via the plugin:

https://github/picandocodigo/List-Category-Posts/blob/master/doc/FAQ.md#no_link

This is my first bit of Wordpress code though, so I'm sure there's a way to get it from the built-in WordPress functions.

本文标签： List Category Posts Output thumbnail and post title within a single link