Adding Blog Posts onto Static Homepage - How to use Shortcode? How to make featured image smaller?

[clothdiapertips]

As a beginner, I am finding this theme difficult to figure out. I want to resize the featured image on a blog post.
Initially, I had the front page of my website set to the default recent posts. I realized I cannot do anything with that page on cornerstone. I can’t even see it in the content section. So I added a new page (Home) and also a page (Blog). And I changed the front page to a static page (Home). I figured out how to make the Blog page show my latest posts, but I also want my Home page to have blog posts on it. How do I add blog posts to the homepage? I found the shortcode for Recent Posts, but I don’t even know how to use a shortcode. Also on the homepage, I don’t necessarily want to have my most recent posts, I would like to customize which posts are shown on the homepage. Feeling frustrated & lost here. Once I get the pages & posts all sorted, my next questions would be is there a way to make the featured image of a post smaller?

[ruenel]

Hello Alicia,

Thanks for writing in!

Instead of using the recent post shortcode in your text element, remove the text element and directly use the recent posts element since you are building the homepage in Cornerstone.

Once you added it in your page, you will have an option to choose to display the number of items which is up to 4 posts items and then the availability to display it horizontally or vertically. At the moment, you are using a shortcode wrapped with a code shortcode which is also incorrect and it is displaying vertical which is why the featured images is bigger. If you display it in horizontal, you will have smaller featured images.

Hope this helps.

[clothdiapertips]

I think I made some progress, but still, if you click on one of my blog posts the featured image that appears at the top of the article is huge. I guess I don’t understand how to edit the design of the blog posts.

[christopher]

Hi Alicia,

The reason that you see the thumbnail image big is that the blog posts are full width. Meaning that the image takes up the whole container to sit well with the rest of the blog content. Now it is up to you to use an image that has for example 1600 X 400 width/height. If you use a square image such as 1600/1600 then the height will be long as the image is always full width. You can get around that by adding CSS code to force a maximum width on the image. But then the image will not be full width.

To add a maximum width restriction to the blog image, please add the CSS code below to X > Theme Options > CSS: (The CSS icon is at the left section of the Theme Options)

.single-post .entry-thumb {
    max-width: 600px;
    margin: auto;
}

Feel free to change 600 to whatever value you see it fit for your design.

I also suggest that you bookmark this page as it will help you to have a list of helpful documentation whenever needed.

Thank you.