Fix image size in Post Grid tiles

Ticket for: Combo Blocks
0
Fix image size in Post Grid tiles 1
Anonymous
Mar 26, 2023 04:03 AM 3 Answers
Member Since Jan 1970
Unsolved Solved Mark as Solved Mark as Unsolved
Subscribed Subscribe Not subscribe
Flag(0)

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.

0 Subscribers
Submit Answer
Please login to submit answer.
3 Answers
Sort By:
Best Answer
0
Fix image size in Post Grid tiles 2
Azizul Raju
Mar 29, 2023
Flag(0)

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.

Fix image size in Post Grid tiles 3
Azizul Raju
- Mar 30, 2023 04:27 PM
Flag (0)
0

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

Fix image size in Post Grid tiles 3
Azizul Raju
- Mar 30, 2023 10:09 AM
Flag (0)
0

Please send temp login credentials to our support email.
Support email: support@pickplugins.com

An expert will resolve your issue.
Regards.

Fix image size in Post Grid tiles 5
phil-2534
- Mar 30, 2023 08:41 AM
Flag (0)
0

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.

2+ more comments. Sign in to Reply
Replying as Submit
Best Answer
0
Fix image size in Post Grid tiles 2
Azizul Raju
Mar 28, 2023
Flag(0)

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.

Fix image size in Post Grid tiles 5
phil-2534
- Mar 29, 2023 04:40 AM
Flag (0)
0

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.

Sign in to Reply
Replying as Submit
Best Answer
0
Fix image size in Post Grid tiles 2
Azizul Raju
Mar 26, 2023
Flag(0)

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.

Fix image size in Post Grid tiles 5
phil-2534
- Mar 28, 2023 01:22 AM
Flag (0)
0

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.

Fix image size in Post Grid tiles 3
Azizul Raju
- Mar 27, 2023 04:42 PM
Flag (0)
0

Hi Phil, Please share your website URL so that I can check it online and will give you a solution after investigating.

Fix image size in Post Grid tiles 5
phil-2534
- Mar 27, 2023 08:55 AM
Flag (0)
0

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.

Sign in to Reply
Replying as Submit