title the image, hide the rest

Nice site!

You want something like this:
<img src="..." title= "Eye Chi" >
Right?

This should be on the a tag that wraps the thumbnail:

<a href="post_url" title="post title">
  <img src="..." alt="">
</a>

I am adding this right now and it will be available on the next update!

Thanks for reporting this.

Awesome.

I was hoping I wasn’t missing something simple. ??

Just uploaded version 0.42.3 with this fix. Check it out and let me know!

Thanks,

Hey there!

I have the same question but I still didn’t really got how to resolve it.

More detailed answer would be appreciated!

Ieva

Just got back from a trip, and updated the plugin… Lo and behold, it was just working! Nice!

ievutemm – here is the code I am using:

.lcp_thumbnail{
  float: left;
  padding: 10px;
}
.lcp_catlist ul {
  clear:left;
  padding: 0px;
  margin: 0px;
  list-style: none;
}
.lcp_catlist li {
  display: inline;
}
.lcp_title{
  display: none;
}

This makes it so it is rows and columns of thumbnails – as can be seen here.

Hey Andy!

Thanks for your trouble, but my headache is about displaying the thumbnail AND the title above/below it in a manner that you just showed.

I don’t get the code to work, does the code need to be placed on a specific line in the style.css?

@ievutemm:
Ah. You’re seeking something different. You want your thumbnails in a grid, like I have, but with the title as a caption, I think. I don’t know the answer to that – and I would suggest you start a new thread, so that it’s properly searchable in the support forum.

@memonon:
I’m using the Decode theme, which has the ability to customize CSS right in the theme customizer. Are you just trying to title the thumbnail on hover? If so, the CSS I posted above should work, as log as you also use the following in the page:

[catlist name=<whatever category> thumbnail=yes title_class=lcp_title thumbnail_class=lcp_thumbnail]

@andy:

thanks, I have resolved the issue by using other plugin, as many people are having the same issue without any luck solving it.

Thank you Andy for your code, I have implemented it here – https://hooptricks.org/start-here

I’m wondering two things.

How can I get a title for the post to display either above or below the thumbnail?

and

When it goes to the next category down the list, how Can I create a break between the previous category and the next one? As you can see “Off Body Hoop Tricks” is all jumbled up with the previous categories thumbnails.

Thank you for your help!!!
Brandon

So, there’s a lot going on there. And you added the LCP css stuff into the middle of the theme’s CSS, rather than in an enqueue or child theme. :-/ Be warned, you’ll lose that code if you ever update the theme.

All that said – the only way that I could get your thumbs to look halfway decent was to modify your H2 settings – I’m not sure what that would do to the rest of your site though, so… I don’t suggest that… Unless you want to spend the time making sure that it looks OK. You’d have to put the following at the bottom (where your LCP CSS should go) or in a separate CSS:

.entry h2 {
  clear: both;
  vertical-align: top;}

As for “captioning” your thumbs, that’s next on my list of things “to do”. It appears possible… I’ll be using the info here:
https://wordpress.stackexchange.com/questions/45592/plugin-list-category-posts-how-to-show-the-caption-under-thumbnail

I first added the CSS to the custom style sheet that is supposed to override the main stylesheet, but it doesn’t seem to work, so that’s why I stuck it in the main style sheet, just to test it out. I am a thread in the Themes forum as to why the custom stylesheet might not be working correctly.

Yeah, don’t want to modify the H2 settings as they are global and there are FAR to many posts to check each one.

Other ideas?

Thank you for taking the time to look into this

So, what you want to do just won’t happen without creating a new template and putting it into your theme. I created lcp-captionthumb.php, and, following the instructions in LCP’s default theme readme.txt, put it in a directory named “list-category-post” in the root of my theme.

Code is as-is/where-is… No warranty! ??

lcp-captionthumb.php:

<?php
/*
Plugin Name: List Category Posts - Template
Plugin URI: https://picandocodigo.net/programacion/wordpress/list-category-posts-wordpress-plugin-english/
Description: Template file for List Category Post Plugin for WordPress which is used by plugin by argument template=value.php
Version: 0.9
Author: Radek Uldrych & Fernando Briano
Author URI: https://picandocodigo.net https://radoviny.net
*/

/* This is the string which will gather all the information.*/
$lcp_display_output = '';

//Add 'starting' tag. Using Unordered list
$lcp_display_output .= '<ul class="lcp-catlist">';

/**
 * Posts loop.
 * The code here will be executed for every post in the category.
 * As you can see, the different options are being called from functions on the
 * $this variable which is a CatListDisplayer.
 *
 * The CatListDisplayer has a function for each field we want to show.
 * So you'll see get_excerpt, get_thumbnail, etc.
 * You can now pass an html tag as a parameter. This tag will sorround the info
 * you want to display. You can also assign a specific CSS class to each field.
 */
foreach ($this->catlist->get_categories_posts() as $single){

  //Start a List Item for each post:
  $lcp_display_output .= "<li>";

  //Start a div with class=lcp-thumb
  $lcp_display_output .= "<div class=lcp-captionedthumb>";

  //Post Thumbnail
  $lcp_display_output .= $this->get_thumbnail($single);

  //put in a <br/>
  $lcp_display_output .= "<br>";

    //Show the title and link to the post:
  $lcp_display_output .= $this->get_post_title($single);

  //close the div with class=lcp-caption
  $lcp_display_output .= "</div>";

  //Close li tag
  $lcp_display_output .= '</li>';
}
// Close the ul tag
$lcp_display_output .= '</ul>';

//Return the data to the page
$this->lcp_output = $lcp_display_output;

?>

The CSS you’ll want to use to pretty it up:

.lcp-catlist li {
	display: inline;
	float: left;
	margin: 5px;
	padding: 5px;
}

.lcp-captionedthumb {
	border: 1px solid rgb(153,175,93);
	padding: 5px;
	width: 125px;
	height: 170px;
	font-size: 70%;
	text-align: center;
}

Called with the following shortcode:
[catlist id=2 thumbnail=yes template=lcp-captionthumb]

I handle displaying the headers…

You can see the output of all of this here:
https://roundwoodfurniture.com/andytest/

Thank you for that!

I created the template, copied the code above and put it in my root themes directory, also tried putting it in my-theme/page-templates , but it didn’t seem to make one bit of difference, even with the new CSS.

I’m pretty tech savvy and tried a few different things, but can’t seem to get any change to happen. My page https://hooptricks.org/start-here Still looks the same as it did before the extra css and page template. I added the additional shortcode as well.

Here is my shortcode
[catlist name=”Articles” orderby=title order=asc numberposts=-1 thumbnail=yes title_class=lcp_title thumbnail_class=lcp_thumbnail template=lcp-captionthumb]

Here’s my css

.lcp_thumbnail{
  float: left;
  padding: 10px;
}
.lcp_catlist ul {
  clear:left;
  padding: 0px;
  margin: 0px;
  list-style: none;
}
.lcp_catlist li {
  display: inline;
}
.lcp_title{
  display: none;
}

.lcp-catlist li {
	display: inline;
	float: left;
	margin: 5px;
	padding: 5px;
}

.lcp-captionedthumb {
	border: 1px solid rgb(153,175,93);
	padding: 5px;
	width: 125px;
	height: 170px;
	font-size: 70%;
	text-align: center;
}

DO I need to call the page-template from somewhere?

Also what did you mean by “I handle displaying the headers..”

Again, thank you for your time and help.

Alright. I did some more digging and I got it to work. Kind of – https://hooptricks.org/start-here

CSS is pretty crazy looking, but at least it is now showing up!!!