[Support request] How To Create Responsive Grid Layout

[John MacKenzie]

I am going to be creating a grid of about 19 images that link to PDFS in new windows (with text overtop of the images)

I was hoping to do this with the grid feature of generateblocks,

I added a link to the test page below.

1) how do i get the Caption to show over top of the image (and format its size etc)
2) how do i make the grid responsive so it snaps down to fewer images across based on screen width? (i will have 4 rows of 5 images on desktop and would like it to snap down to 2 or 1 wide depending on mobile screen width.

is there another better way to accomplish this instead?

thanks!

[David]

Hi there,

you can use a GenerateBlocks Grid Block – it has responsive widths for the columns.
I would recommend creating a Single Column Grid first, add your image block and , and then set the grid blocks Width and padding for desktop / tablet and mobile. Once you’re happy with it, theres a + button in the block toolbar that will allow you to duplicate it. Just keep doing that to create a many row grid.

For the caption over the image, if you set the above up – i can look at some CSS for that.

[John MacKenzie]

thanks ok i see ive done that now (below it is a gallery plugin i way trying out as well. i do like how the space doesnt change between the images and it just snaps down based on the width?

but id rather use the GPblocks.

also anyway to do a hover effect?

thanks!
John

[David]

When adding images to a Grid Block – you need to make sure the Image size is large enough to fill the wider columns on smaller devices around 360px wide should cover that.

Are these images all going to be captioned and have a link attached ?
As its best those parts get done first, as the HTML will change when Captions and Links are added and so will any CSS for hover effects.

[John MacKenzie]

hmm oh i see. ill try that then

thanks yes they will all have links to a pdf and have a title overtop them.

[David]

If you can let us know when you have the grids setup as you like it with the images, captions, links in place i can provide the CSS. Let me know

[John MacKenzie]

ok thanks (ive got 2 rows now but will be adding more)

the captions should appear with a shading behind them so they are readable (will make the titles White on grey opaque background) and centered vertically and horizontally

does that work (sort of lie the plug showing below the grids)

thanks!!

john

[John MacKenzie]

i should add i think we should dim the whole image, not just behind he text like the other example i think that looks better.

Thanks!!

[Elvin]

Hi there,

i should add i think we should dim the whole image, not just behind he text like the other example i think that looks better.

Are you aiming for something like this? https://share.getcloudapp.com/Z4uKgAmr

You can try this CSS to achieve the same effect.

.pgcsimplygalleryblock-grid-item-inner {
    background-color: rgba(0, 0 , 0, 0.5);
}

Note: I’m not sure if this is the best way to do this. Perhap the third party plugin you’re using already have some sort of setting within its UI that does the same thing. Consider looking for that first. 😀

[John MacKenzie]

yes thats nice but i was hoping you would give me the css for your GP block not the getsimple gallery, i would rather use yours, but if you think i should use getsimple instead i will?

[John MacKenzie]

also with the getsimple also i couldnt find a way to properly centre the titles

Thanks
John

[John MacKenzie]

ive got the simple gallery just how i like it BUT it doesnt seem to be able to link to the pdfs! ive posted help on their end but can we make the same look with the grid above but allow it to actually LINK to a pdf in a new tab?

on yours i added a a link on the what type of posts image.

thanks!

John

[Leo]

The grid block from GB doesn’t provide any special functions to PDF so unfortunately I don’t think that will work.

[John MacKenzie]

I created a link just fine with the grid block. My challenge is just the overlay and moving the caption to be centered over the image.

im working on the css now if you refresh i started working with this idea

https://generatepress.com/forums/topic/transparent-overlay-on-magazine-grid/

however the a link only shows on one little band instead of the whole image.

how can i get the caption in the middle and make the a cover the whole image?

thanks
John

[John MacKenzie]

ok i got this fixed >> however the a link only shows on one little band instead of the whole image.

by adding

display: inline-block;
width: 100%;
height: 100%;

to the a tag

so just need to know how to move the caption and get it linked as well?

and if not too hard is there a way to do a hover effect if i wanted to?

thanks!
John

[Author]

Posts