-
Hello Support at GP !
Please see
https://understand-culture.com/welcome_/I want to create ten of those blocks.
Each of the blocks will have a different image in it.
I grab images either from Unsplash or via Google.How do I best go about doing this so that:
a.) I don’t have to spend too much time modifying photos,
and b.) you folks don’t have to invest any of your
valuable time creating another CSS for John Magee?For example, do I need to crop images to specific
dimensions, or only choose images which are scalable?Thank you !
John
-
Hi there,
ideally you want to crop the original images to 768px wide, and keep them the same height if possible.
That way they will always fill their container on all screens sizes ( based on your current design ).if however you have various size images then:
1. instead of using a Image Block, use the GenerateBlocks Image Block:
https://docs.generateblocks.com/article/image-overview/
2. in its settings you can set:
Width eg. 100%
Height eg. 300px.
And set the Onbject Fit to CoverAnd this will effectively crop all images to that size.
-
-
Ok. looks great, except for mobile 🙂
In the block editor if you change to mobile preview.
And select the image block you can set the Height just for mobile size -
Oh, I did not check on mobile.
I just tried to find those settings, but failed.
Please point me to them, Dave.Thanks !
John
-
Its the same settings you see here:
https://docs.generateblocks.com/article/image-overview/#settings
But if you first set the Preview to Mobile ( from the Top Bar ) or the Mobile Icons in the sidebar then those fields will apply to just the mobile
-
Ok, Preview to Mobile, I found that.
Unfortunately, I’m not sure what the
settings should be for Spacing and Sizing.
I tried several settings but did not get it right.John
-
Hi John,
Try increasing the height first for Mobile. Example: https://share.getcloudapp.com/Apuvl8Le
-
That worked perfectly.
And I learned something.Thanks, Fernando.
Great work !John
-
You’re welcome, John!
- You must be logged in to reply to this topic.