Custom blog template

[reform]

Hi team,

I'd like to restructure my blog page so I can use cornerstone content. So basically, I'd like to be able to add the dynamic blog feed into a column in cornerstone. Is this possible? How could I accomplish this?

I am comfortable editing template files and adding to my child theme if that is the best route.

Thank you

[Prasant]

Hello @reform,

Thanks for asking. Hope you’re having a great day.

Can you please elaborate what kind of blog feed you want to display? I am a bit confused. If you could elaborate, I can point you in right direction.

You have the option to use Cornerstone text or Raw Content element to add scripts and shortcodes.

Thanks.

[reform]

So right now, If I assign a page to be the blog, it doesn't let me add any cornerstone content., it just uses the default template of the blog with a sidebar.

What I want to do, is have the blog page as a cornerstone content page. Then I can create the sections I want. I would prefer to create my sidebar content in cornerstone, rather then using the widget sidebar. I would then like the main content area to populate with the blog list of posts.

Right now, if I open my blog page in cornerstone, I can add sections content etc, but none of it actually will show on the page.

Let me know if that makes sense. I can also give you access or do some screenshots to explain better.

[Prasant]

Hello @reform,

Thanks for providing the necessary details.

Yes, that's correct. Once you select default blog page under Settings > Reading > Posts page, WordPress blog templates take it over and page builders won't have any effect on that which means you won't be able to make any changes.

What you can do is first unselect the page that's assigned as blog under Settings > Reading > Posts page. From the drop down menu choose Select. https://cl.ly/0r0s0h3C0239

After that either you can create a new page or use existing page to design the layout using Cornerstone using built in elements.

You can learn more about various features and function that X Theme and Cornerstone offers in our KB section:

Knowledge Base Overview

Here you will find a list view of all the articles on our Knowledge Base broken down by topic. You are welcome to use this as a point of reference or to utilize the search feature to find a particular resource. Setup Getting Started - Updated Theme Installation Updating Your Themes and Plugins Translation How To Locate Category IDs How To Locate Post IDs Working With WooCommerce How To Setup Child Themes Demo Content Product Validation - Updated Documentation Pro Header and Footer B…

Hope that points you in right direction. Have a Nice Weekend.

Thanks.

[reform]

ok but then how do I add the blog feed into the content? I tried adding the loop in the raw classic element but it wouldn't work

I know the recent posts element only allows a limited number of posts and no pagination, so i;m not sure on how to add the loop in the cornerstone content.

[christopher.amirian]

Hi there,

Let's do another thing. I suggest that you use the Global Blocks for this case.

So you will go to X > Global Blocks and add a Global Block there. Then you will have the same tools at hand like the Cornerstone and you can add the content in question. After you finished the content you will see that there is a shortcode that is assigned to the Global Block that you can use wherever you want:

Then you can simply go to Appearance > Widgets and add a Text Widget to the Main Sidebar widget area and insert the shortcode there. In my case it is: [cs_gb id="179"].

That should make it possible for you to add whatever you want to the sidebar of the blog page and keep the blog looping intact.

Thank you.

[reform]

Ok thats a clever work around

But then what about the fact I want to have a paralax header section above like my other pages?

I was also hoping to have a pre footer section and possibly a news letter popup.

Do what would you suggest? To hardcode those areas?

If this isn't possible, it would be great if you can add that to the future features list? I know there are plugins the essentials grid etc, where I can make fancy post boxes but a. it doesn't offer full width post blocks like the default already has and b. It's far more then I need. I want to keep it simple.

Like even if I could just create a "template part" or something in my files, and have the ability to assign that include into a sections "raw code" or something, that would be great. Or ability to create a loop in a shortcode? Not sure if thats possible in any way? Could I create a shortcode for the loop in my functions.php?

[reform]

So I think i've found a work around using "The Grid"

• I used the "Maren" skin and then added some css to adjust the display to have the image left and content right. I am having a bit of difficulty though having the content fit well.

• need the image to fit the area. Right now I have the image and content both set to 50%, however I have structured my images so that they could be displayed square for the blog feed, but then long for the post single as i'm using the image as a full width paralax on the blog single. How could I make the image so it's square and just cropping off the right and left side evenly?

• The right content isn't staying within the div. I think if I can make the image square and the image column say 30% and the content area 70%, it would then fit the content?

• I will then set my media queries so that the image left only works for desktop and for anything lower, it just displays the skin as normal.

Would you be able to help me adjust this? Here is the css I have currently:

.tg-layout-masonry .tg-item-audio-poster, .tg-layout-masonry .tg-item-media-holder {
position: relative;
display: inline-block;
height: auto;
max-width: 50% !important;
outline: transparent solid 1px;
}

.maren .tg-item-content-holder {
position: absolute;
display: inline-block;
padding: 22px 24px 14px 24px;
text-align: left;
width: 50%;
height: 100%;
}

article {
border: 2px solid #ccc;
margin-bottom: 20px !important;
display: block !important;
position: relative !important;
top: 0 !important;
}

[RueNel]

Hello There,

Thanks for the updates and for the very detailed information.

1.) How could I make the image so it's square and just cropping off the right and left side evenly?
- Please edit your grid and change the image size. Right now, you are using the original image. You can use medium size instead.

2.) The right content isn't staying within the div because of the fixed height imposed by the masonry layout. To resolve this, please edit your grid and change the grid type as "Grid" only.

3.) To make sure that your custom modifications for the image will only work or larger screens, you can make use of the @media block. For example:

@media(min-width: 980px){
  .tg-layout-masonry .tg-item-audio-poster, .tg-layout-masonry .tg-item-media-holder {
    position: relative;
    display: inline-block;
    height: auto;
    max-width: 50% !important;
    outline: transparent solid 1px;
  }

  .maren .tg-item-content-holder {
    position: absolute;
    display: inline-block;
    padding: 22px 24px 14px 24px;
    text-align: left;
    width: 50%;
    height: 100%;
  }

  article {
    border: 2px solid #ccc;
    margin-bottom: 20px !important;
    display: block !important;
    position: relative !important;
    top: 0 !important;
  }
}

We would loved to know if this has work for you. Thank you.

[reform]

Hi!

So thank you for the advice, but not all worked out or was quite what I meant.

1. Good point on using a smaller size. I went with large as the medium was very low res. I think you misunderstood what I meant by square image. My feature image is long rectangular, so I wanted to crop off the sides (or mock crop it) so that it appears square for the thumbnails. I was able to achieve this, but my issue now is that as I shrink the page, it looses it's squareness. I'm not sure if here is a way to modify my css to keep it square? Otherwise I suppose i'll have to make a much of different media queries to keep it square until it goes back to the original stacked version nicely. My current css is included at the end.

2. Switching does not work given the Maren skin is only for masonry. In the grid skins, I couldn't find anything that offered an image with content etc. So unfortunatly, that didn't help.

3. Yes as mentioned, media queries are set to achieve this.

So here is what I have below. My biggest problem now is just retaining the square and the right content lining up until the lower breakpoint. I tried using percents for the image without luck so it's currently set with px which isn't working ideally.

Thank you in advance

.tg-item-author {
display: none !important;
}

@media(min-width: 980px){

.main-blog-grid .tg-layout-masonry .tg-item-audio-poster, .main-blog-grid .tg-layout-masonry .tg-item-media-holder {
position: relative;
display: inline-block;
height: auto;
max-width: 33% !important;
outline: transparent solid 1px;
}

.main-blog-grid .maren .tg-item-content-holder {
position: relative;
display: inline-block;
padding: 22px 24px 14px 24px;
text-align: left;
width: 67%;
height: 100%;
min-height: 305px;
float: right;
margin: 0 !important;
}

.main-blog-grid article {
margin-bottom: 20px !important;
display: block !important;
position: relative !important;
top: 0 !important;
padding: 0 0 -10px 0 calc !important;
}

.main-blog-grid .tg-layout-masonry .tg-item-inner, img.tg-item-image {
position: relative;
height: auto;
display: block;
width: 100%;
margin: 0 !important;
max-height: 305px;
margin: 0;
outline: transparent solid 1px;
object-fit: cover !important;
height: 305px !important;
width: 305px !important;
}

.main-blog-grid .maren .tg-item-title, .maren .tg-item-title a {
font-size: 120%;
color: #00AF66 !important;
}
}

[christian_y]

Hey @reform,

It is impossible to line them up if your going to keep it square due to difference in aspect ratio of the image container. To keep the image to square while the screen resizes, you need to lower the width and height of .main-blog-grid .tg-layout-masonry .tg-item-inner, img.tg-item-image down to 200px. Percentage unit will also not work here.

That is the smallest size before getting to one column layout though. In other sizes, it would look like the image below so you would need to target specific screen sizes with additional media queries.

This is a spatial limitation and this is probably the reason why this layout does not exist out of the box in X blog.

What I'd recommend in this case is use a layout like in the mobile version where the image is on top. Or, crop your images a little bit so that it is close to a square. Otherwise, you will need to target each screen sizes which would be quite involved.

Thank you for understanding.

[reform]

Ok... so this doesn't seam to be working... I just find it very strange that there isn't anything that has the option of image left and content right - that mimicks the normal blog format.

So let go back to the start then.

How can I use the default blog posts loop and still have other cornerstone sections. I understand the suggestion above by using global blocks and then inserting the shortcode into a widget, but what about adding an area above and below the main content like I do on my current blog page: hybridpharm.com/the-buzz/

Thank you in advance

[reform]

Ok... so I think i'm asking for a bit much. I just thought perhaps other wanted to accomplish the same with regards to using the post loop within cornerstone.

Perhaps something to add for the future if possible? Or even if there was a function to create in functions.php where you could assign the loop to execute within a section? Or have a shortcode for it? Just some thoughts.

So I have just gone with a normal skin from the grid as it was just getting too complicated.

Thank you again for all your help.

[paul.r]

Hi,

Yes, this is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[reform]

Perfect. Not the most important feature request, but still would be nice to consider down the road.

Thank you for your help and sorry for trying to make things more complicated. I have everything sorted out nicely now.

[basanta]

Glad that we could help you!

Thanks

[system]

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.