Hi, I am preparing a display of posts using the "Tiles" layout. The images are displayed in different sizes (because they are saved as different sizes in the media library). I tried to follow your instructions at https://getpostgrid.com/docs/how-to-set-custom-thumbnail-size-for-image/ but I couldn't follow the guide.
How do I set the images to be displayed at the same size when using the "Tiles" layout?
Thank you.
Phil.
This answer is regarding a request that you've made to add a hover effect and link appearance on your grid. Please copy and paste the CSS code below under your existing CSS code.
Screenshot: https://ibb.co/93JwRDh
.post-grid.tiles .skin.flat .layer-wrapper{
position: relative !important;
}
.post-grid.tiles .skin.flat .layer-wrapper:after{
content: '' !important;
display: block !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(128, 128, 128, .8) !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
transform: translateY(45px) !important;
opacity: 0 !important;
z-index: -1 !important;
transition: all .3s ease !important;
}
.post-grid.tiles .skin.flat .layer-wrapper:hover:after{
opacity: 1 !important;
z-index: 99 !important;
transform: translateY(0) !important;
}
.post-grid.tiles .skin.flat .layer-wrapper:hover .element.title a{
text-decoration: underline !important;
}
Let us know if it works.
Would you mind writing a review for our plugin? It'll inspire us a lot.
You can post your review here - https://wordpress.org/support/plugin/post-grid/reviews
Thank you so much.
Please send temp login credentials to our support email.
Support email: support@pickplugins.com
An expert will resolve your issue.
Regards.
Sorry, Azizul, I can’t find the CSS code we added to custom code. It is no longer visible in the window. Is there something else I need to do?
Also, I don’t see how to set the date for the required posts. I need to add to the query so that I display only posts published in 2017 for example. Is there a way to add this to the query?
Thanks,
Phil.
Thanks for the link. I just wrote a tiny CSS that will resolve the issue of hiding content on 'mouse hover'. And for the pagination, I can see the number is already there, but the backgroundColor and textColor are the same. So I have also overridden it with CSS.
Please copy the CSS code below and paste it under Custom Scripts => Custom CSS option.
Screenshot: https://ibb.co/93JwRDh
Code:
.post-grid.tiles .skin.flat .layer-content{
z-index: 999 !important;
}
.post-grid .pagination .page-numbers{
color: #fff !important;
}
Let us know if you need any help.
Regards.
Thank you so much. That looks heaps better!
One more request:
There is no reaction from the grid when I mouse-over. Please could you add a shadow or a shading-change on mouse-over to help the user see when they are hovering and show it is a “live” link?
Many thanks,
Phil.
Hi,
Welcome to PickPlugins.
Under Layouts, could you please check what layout you're using? Currently, tiles will work with a layout that uses absolute position property.
From our Layouts library, please install a layout called ContentBottom.
Screenshot: https://ibb.co/rfcBV0w
Then under Layouts, make sure you've selected the layout for your tiles grid.
Screenshot: https://ibb.co/ScF1H6d
Let us know if it works.
Regards.
Thank you.
The “Test Display” page on the DEV site is at: https://ingsa.web2.amweb.nz/test-display-of-events/
I have disabled “Under Construction” so you should be able to go straight to the page.
Please see the second grid on the page, which has been constructed using “Post Grid Combo”.
Many thanks,
Phil.
Hi Phil, Please share your website URL so that I can check it online and will give you a solution after investigating.
Very many thanks, Azizul. I followed your answer and installed “ContentBottom”. The images are now set to the same size and the posts line up nicely. However, this approach creates the following issues:
1. The text appears over the image, which is poor usability as it can make it difficult for some users to read.
2. When you mouse-over the text, it disappears behind the image so you can’t read it at all.
3. The pagination buttons have no visible numbers.
I would send you a screen shot, but there appears to be no way to include an image on this forum.
I tried some of your other layouts and they don’t solve the problem.
Please could you help with the above issues, or perhaps recommend a way to get the layout with text at the bottom, image at the top?
Very many thanks,
Phil.
I can see you’re currently editing.
Please note CSS codes are currently available only on the grid called ‘Test layout for africa events’.
You can copy all the CSS from the last grid to get the same effect.
However, there is an option to Duplicate that’ll save you some time. If you duplicate the grid, all the code automatically inherits your new grid.
Screenshot: https://i.ibb.co/Xsp5ZwP/pick-issue-one.png