The Grid plugin - Border, "Likes" heart icon, Exclude current post and Category, Hover icons

Support
#1

Hi All,

My original post asked about doing things 1-4 under the line below. I found Skin Builder and that handled the new post index creation. Anyone reading this needs to be aware that “Grid/Justified” and “Masonry” skins are treated separately and one designed in Skin Builder as Grid/Justified WILL NOT SHOW UP if you have your grid set to Masonry. My only remaining questions for now are:

1. How do I exclude the current POST from the list of posts displayed by The Grid? I see how to exclude a specific post, but that would force me to create a new Grid for every post.

2. How do I exclude the current PAGE from the list of pages displayed by The Grid? That would solve another open support request I have, where forcing the post to 100% width is also making the mobile menu go all the way to the right and left edges of the screen. I can turn these Posts into Pages and use the Grid to show Pages, but still need to be able to exclude the current page if I do that.

—DEPRECATED - I successfully used Skin Builder to accomplish 1-4 below—

1. Add a border around each individual post thumbnail and its title. And can you include some padding to make the thumbnails look like the ones in the “Recent Posts” section right above the “The Grid” section?

2. Remove the “Likes” heart icon and number of Likes

3. Remove the category tag from the post thumbnail

4. Change the + and Link hover icons to text

Thanks!

#2

I moved this text to above my original post

#3

Hey there,

1 and 2 is not possible with The Grid. It’s possible with Essential Grid but requires custom coding. See https://www.themepunch.com/faq/exclude-current-post/

Thanks.

#4

Thanks, Christian. Ess Grid let me build the skin I needed and the php you pointed me to works great.Thanks for the direction to it. That php is not in the functions.php I’m using in what I ask below; just the factory functions.php.

Something very strange happens with Ess Grid, though. I have a new Section at the bottom of the post for Ess Grid. As soon as the post starts to load, I get a second vertical scroll bar to the left of the page’s vertical scroll bar until the Ess Grid finishes loading, and then the second scroll bar clears. It looks like the Section

I can cover it up and prevent the second scroll bar by padding the top of the Ess Grid’s column enough to extend the padding below the bottom of the Ess Grid’s tiles, and then putting a negative gap below the Ess Grid element to prevent a big gap. This covers it up, but seems like a pretty bad fix, though.

Can you tell be why it does that? Did I somehow build the grid the wrong way, or is it just a function of Ess Grid’s Javascript and Cornerstone not knowing how tall the grid will be until Ess builds it?

This didn’t happen when I had The Grid building the post index - it just started when I deleted The Grid and went to Essential Grid. Does The Grid build the tiles in a different way?

My post called Cartoning has Ess Grid with no extra padding: http://www.realhdr.com/cartooning/
The post called Better Castles and Villages uses the extra padding: http://www.realhdr.com/castle2017/

Here is a video: http://screencast-o-matic.com/watch/cb6hhcIAPi

Login is above.

Many thanks.

#5

Hello There,

Thanks for writing in!

1.) It is best that you make use of a child theme. What you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

2.) The scrollbars appear maybe because of how you have set up the grid layout. Please edit your grid and make sure that Grid Settings is not set in Fullwidth.

3.) The other post has a padding and the other page does not have a padding. And that is because in the row settings, the column container is enabled.

Hope this helps.

#6

I ditched Essential Grid. It looks like it was written to sell and not to use. It does a stupid thing of always expanding downward after the page loads, even on their demo page. An old tech support answer told the OP that it calculates after the page draws and the expansion can’t be turned off. I turned it off - I got rid of it! I’m working on a site that wouldn’t benefit at all from that kind of motion just for the sake of motion.

I went back to The Grid and will live with having to duplicate if for every page to exclude the current page.Its Skin Editor is great. I made the page tile at the bottom of http://www.realhdr.com/castlegrid/ in it.

Now here’s a responsive image question. How can I keep the image from expanding past the edge of the viewport (if it’s smaller than the 1200px width of the boxed site), or past the edge of the 1200px site if the window is dragged wider than 1200px on the display? I’ve tried smaller pixel-width images set to screen-break sizes, but X keeps stretching 400px-wide or 1600px-wide images the same way. I’m using parallax on all but phone Sections, but it still happens when I turn it off.

You can see if you go to the grid at the bottom, and drag the window on your display past 1200px wide, that the section’s background image keeps being stretched. Responsiveness seems to work at Tablet Portrait and Landscape, but the image gets expanded way too wide on large and small desktops and phones.

Thanks for helping me constrain image width to viewport size, and site-width if the viewport goes larger than 1200px.

#7

Hello There,

Thanks for updating in! Background images in sections depend on how wide and the height of the section. The background will expand to cover the whole section. With Background image you can hardly achieve a total responsiveness without compromises. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.

In Cornerstone, we use the background-image: cover; which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.

Yes we can use background-size: 100% 100%; which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.

Yes we can also use background-size: 100% auto but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.

Or we can also use background-size: contain; but then this is not a good choice because you will see white spaces around your image.

Hope this explains the background image property briefly. Thank you for your understanding.

#8

The container into which I put the background is the Section. The site is constrained to 1200px wide. The Section’s background, though, ignores the 1200px width limit and scales to whatever width the browser window is. It covers the section and everything behind the section out to the edges of the browser.

How can I tell the image that the 1200px maximum section width is where it should stop scaling, even when th browser window gets wider?

#9

Hi there,

You can not have such a thing in the background CSS code. The only thing you can use is the background-size property in CSS and force it to be like this:

the selector {
background-size: 1200px 100%;
}

But it will force the background not to be responsive.

I strongly recommend that you open up a new thread for additional questions as this thread got way out of its original title and for me and my colleagues it is very hard to follow along. Also, it will be misleading for other customers to get proper information in the future from this thread. Keeping each question separated in different threads will help us serve you better.

Thank you for your understanding.