[Plugin: Display Posts Shortcode] Putting Title and Text aligned with Thumbnail

I have spent the better part of 2 days trying to find a good plug in to do what you describe that worked with my theme, and Display Posts Shortcode was the best so far except for the alignment of image.

After searching and searching I came across this to add to your style.css
On left of WordPress Dashboard
Go to Appearance>Editor>style.css

Paste this at bottom of all other code:

.display-posts-listing li {
list-style-type: none;
min-height: 175px;
overflow:hidden;
padding-left: 175px;
position: relative;
width: inherit;
}

.display-posts-listing .title {
font-size:1.2em;
font-weight:bold;}

.display-posts-listing img {
left: 0;
position: absolute;
top: 0;
}

The Shortcode I am using calls up a category:
[display-posts category=”losing-weight” include_excerpt=”true” image_size=”thumbnail” posts_per_page=”4″]

This is how it looks:
https://www.feel-great.net/lose-the-weight/

Hope this helps!

Glad you were able to figure it out!

That looks great, thanks for the help. I had just given up and decided to insert the thumbnail separately, which worked but it definitely looks better this way. Thanks again

hi @feelgreat
i done what you wrote up,

But I got 2 q.
1. near to each post i got dots.
it’s look like

• …

– how can i disappear it?

2. the text start from the bottom of the image . How can i change it the upper of the image?

you can see it here

thx

@nirgreen
Visiting your page, tells me that you have not copied styles properly since they are not applied on your page.

Put this to your theme style.css file:
Paste this at bottom of all other code:

.display-posts-listing li {
list-style-type: none;
min-height: 175px;
overflow:hidden;
padding-left: 175px;
position: relative;
width: inherit;
}

.display-posts-listing .title {
font-size:1.2em;
font-weight:bold;
vertical-align:top;
}

.display-posts-listing img {
left: 0;
position: absolute;
top: 0;
}

Your questions:
1. Bullets should not appear if you have this style copied: list-style-type: none;
Check if you have style definition for lists somewhere that precedes this style definition.
2. Adding vertical-align:top; to .display-posts-listing .title will align text to top of thumbnail image

Hope this helps ??

Hi
thank a lot for your help,
I made it on other way and it’s fit great:
see it here

thx again ??

I have modifed plug-in to get below output:

Industry News

Load shedding back; Accra to be worst affected Parts of the country will soon be hit with a load shedding from the Electricity Company of Ghana (ECG) due to a technical problem on the West Africa Gas Pipeline. According to the Ghana Grid Company, the technical problem has affected gas supply to the Volta River Authority and the Surnon Asogli […] Read More
——————————————————————————————————————————————–

WAEC Releases May/June 2012 Provisional Results of WASSCE The West African Examinations Council (WAEC) on Tuesday said it had released provisional results of 163,138 out of the 174,461 candidates who took the May/June 2012 West African Senior School Certificate Examination (WASSCE). A statement issued in Accra by Mr F. Akuffo-Baddo, Head, Test Administration Division, said the results were […] Read More
——————————————————————————————————————————————–

Here is updates CSS and place it below your style.css if not reflecting go to ftp and find your theme inside style.css put below that:

[code moderated - please use the pastebin - https://codex.www.ads-software.com/Forum_Welcome#Posting_Code ]

And here updated code of the plug-in:

[large amount of code moderated - please use the pastebin - https://codex.www.ads-software.com/Forum_Welcome#Posting_Code ]

Great plugin!

Not sure if this plugin can do the following?

1) Return a list of post (listing the “title” only )under certain categories
2) Return the thumbnail (either the featured image/first attached image
3) Style the image in (2) to the left of the title

Many thanks in advance.

@feelgreat

I took your code and added it to the parent theme style.css of my site.
I verified the code displayed in wordpress with the editor.
I added the shortcode you mentioned to page.
However nothing displays. Just the typed shortcode.
https://wp.worcester.edu/UTS/blackboard-lms/

Trying to display this category
https://wp.worcester.edu/UTS/category/blackboard/

Any help is appreciated.
Steve

I actually switched it to the custom.css as recommended by the theme creators but still not working