Looking for documentation for the various or most common image sizes used in Blocs/Bric.
@Norm is a gifted developer showing his talents to the world of Blocs. In the pre-loaded Blocs there are Brics that vary in size. Where can we find the actual size of each Bric?
For faster loading when adding an image or video to that size Bric is important. Is there a quick/easy way to find the Bric sizes?
Feel free to Tag anyone who knows the answer.
Keeping things responsive, brics don’t really have sizes. They are the width of the column they’re in. So what you’re after is technically a maximum width your image is viewed at. As the browser window narrows the layouts change at various breakpoints.
To determine what the maximum width you can grab ruler!
Screen rulers are out there both for browsers and for Windows and Mac… ex. Chrome Ruler https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal?hl=en
1 Like
In theory the maximum width is whatever you set for the site in the project settings. The breakpoints can be established by looking at the bottom left of the editing canvass, which shows the size ranges.
Thank you that’s make lot of sense. I guess what I’m asking for is what is the max size for each of those pre-defined Bric? I realize they will adapt to each Breakpoint.
Cool link on the ruler. 
That’s true, but it’s possible to make layouts where your images don’t ever use that much real estate. That width is for the viewport, there could be 2 or more columns within that space.
1 Like
Blocs 3 full screen background image should be no larger than 2500 x 1667 right?
Why would I use the large image for a carousel or 3 column with images in each?
Wouldn’t that affect the loading time of the page?
What size should the carousel be?
What size should the images be in in 3 column?
What size should an image be of someone’s profile?
You can also just use the Mac screenshot feature. Command-Shift-4. It will measure as you drag around anything on the page. Just use esc and it will not make a screenshot.
casey
1 Like