Related Posts Format

I attempted to utilize the “Blog” element but for some reason it would not show any posts, then I got it to show posts, but the formatting was horrible and did not include the images, even with all the tinkering I did.

So I decided to utilize the “Post Grid” element instead – this looks good and I edited the coloring so it fits the site. The issue I am having is how can I adjust the summary that is shown for a specific post? Right now they don’t read properly because it pulls in the section heading (no punctuation), then the text, then cuts off. It would be nice to have it just begin with the text instead of section heading and append an ellipse “…” at the end. Or, to just pull in the edited snippet that I defined using Yoast SEO. Or, even just add a period “.” after the section heading. Are any of these possible?

I am referring to the “Related Articles” section at the bottom of the page that I linked.

Hello,

Please provide the site admin access to the private area so that I could to check the posts and how Blog element works.

Best Regards

Thank you! Login below.

Hello,

I am checking your site:

This page is set as the Blog page https://prnt.sc/u23a9i and I see the posts on this page https://prnt.sc/u23baf

I have created page 1 a testing and added the Blog element on this page. It works and it shows the posts.

I have checked the single post and I see the related posts in the bottom.

Please check and clarify the problem if any.

As for the summary, you can find the option “Posts excerpt” in the Theme Settings > Blog. This option determines what content should be shown. https://prnt.sc/u23gsa

You can add the exert in the single post to show the complete description.

Best Regards

Best Regards

Hi Elise, thank you for looking into it! I was utilizing another element called “Post Grid” to pull in related posts on pages and single posts because I am having issues with the “Blog” element.

The Blog element looks good on the page you created and works well when I altered the settings on that page to only show selected posts. So I am not sure why I am having issues with it elsewhere.

Take a look at the HMTL Block I created titled “Featured Articles for Home Page”. I just added the Blog element that you used to the bottom of this HTML block and you can see that now the pictures do not appear. This was the main issue that I had previously which caused me to try out the “Post Grid” element instead. See attached image – in the green rectangle is the Post Grid element and in the red at the bottom is the Blog element.

After seeing it work correctly, I would like to use the Blog element, but I need the pictures to properly appear. What am I doing wrong to cause the images to not load? I’ve tried different configurations, but nothing seems to correct that issue.

Attachments:

You must be logged in to view attached files.

Hello,

Replace this element with the Blog element from WoodMart to see the images: https://prnt.sc/u2pz7o

Best Regards

Hi Elise,

I just replaced it with the WP Recent Posts element as you suggested but that only displays the title text for the recent posts – no images, no excerpt – see the blue highlighted area in the screenshot.

That’s why I decided to use the Post Grid element. As you can see in the screenshot attached, Post Grid highlighted in red on the top is the only element that is displaying an image. I would rather use the Blog element because it has better excerpts and formatting, however it does not display the images for some reason – see the area highlighted in green.

Is there any way to make the images appear in the Blog element? Why are they not showing up?

Attachments:

You must be logged in to view attached files.

Hi Elise, I have more info. I implemented the Blog element on a new page and existing page and it works fine. The problem only occurs when I attempt to use the Blog element on a post or in an HTML block (even if it is placed on a page). What could be causing that issue of not having the images appear? Any workaround?

Hello,

Please deactivate all the plugins not related to the theme and switch the parent theme, check the issue.

Best Regards

Hi Elise, I just deactivated all unnecessary plugins and reverted to the parent theme. But the issue still exists when I check the HTML block that I created with the Blog element. See attached screenshot.

Attachments:

You must be logged in to view attached files.

Hi Elise,
I resolved the issue. The problem was Custom CSS that was supposed to only hide the featured image on the single blog posts, but was also hiding the featured image in other places where it was called. I corrected the issue and updated the CSS as well to be defined more specifically. Thanks for the help!

Hi Elise,

The saga continues… When I updated the CSS, everything looked good in the HTML block and appears properly on the Pages where I put it. BUT two pieces of CSS code are impacting the Blog element and preventing the Blog element from looking good on single blog posts.

1. I wanted to hide the featured image on the top of each single blog post, so I used the CSS below, but it is also hiding the image from the “Related Posts” section using the Blog element. How should I correct this CSS to be more specific to only the Featured Image at the top of the post?

/* hide featured image on blog page */
.single-post .entry-header { 
	display: none; 
}

2. I wanted to add padding to the left and right of the title of each single blog post title at the top of the page. But, when I use the CSS below, it also adds the padding to the title of each blog post in the “Related Posts” section using the Blog element. How can I adjust this CSS to be more specific to only add the padding to the title at the top of each single blog post?

/* add padding to sides of blog titles */
.post-single-page .entry-title{
     padding: 0 15vw;
 }

Hello,

Please try this code:

body.single-post .post-single-page .entry-header {
    display:none;
}
body.single-post .post-single-page .entry-title {
   padding: 0 15vw;
}

Best Regards

Hi Elise,

Thank you for the info. Unfortunately that code also impacts both the post featured image and title, in addition to the Related Articles image and title in the Blog element. Any other suggestion?

Hello,

Please update the credentials I cannot view the site.

Best Regards

Hi Elise,
Please see below.

Hello,

Please clarify the problem, I check a single post I see the featured image in the related posts: https://gyazo.com/1bd065bb7732eeed15e0e3efe737a11a

Best Regards

There are two problems:

1) I want to hide the featured image at the top of the page, but when we do that we also hide the featured image in the related articles section.

2) I want to add padding to the page title, but when I add padding to the page title it also adds padding to the related articles titles.

Hello,

I check a single post and I see that the featured image has gone and featured images on the related posts remain. https://gyazo.com/1bd065bb7732eeed15e0e3efe737a11a

Do you mean a single post? Please provide the URL with the problem.

Best Regards

Hi Elise,

The top of that page is the issue. Literally the very top of the page before you scroll down in the screen capture that you shared. I included the link to the page as well.

1) In your screen capture, I want to hide the featured image at the top of the page. It’s large and I don’t want it to appear there. So I want to hide the featured image at the top of the page. How can I hide this featured image at the top of the page (without hiding the image in the Related Posts)?

2) You will also notice that in your screen capture before you scroll that the Page Title is one long single line. I want to add padding to the sides of the Page Title, so that long titles will wrap to two lines, instead of one long line. How can I add padding to the title at the top of the page (without adding padding to the title in the Related Posts)?

Right now the Related Posts section is great – I do not want it to change.

When I first posted here, the problem was with the Related Posts formatting, but when we discovered that my CSS was impacting both the title and image at the top of the page and the Related Post title and image, I removed the faulty CSS. That corrected the Related Posts section. So now the Related Posts works really well, but I have the issues with the Page title and featured image at the top of the page.

Hello,

Please update your credentials to the site.

Best Regards

Updated credentials

Hello,

Please replace the custom CSS with this one:

.post-single-page > .article-inner > .entry-header {
  display: none;
}
.post-single-page > .article-inner > .entry-title {
   padding: 0 15vw;
}

Best Regards

Works perfectly! Thank you as always for the help, Elise!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts