This guide explains how to resize images directly within the Block Grid editor. It helps beginners understand that "scaling" isn't just about making a picture smaller; it’s about choosing how many "columns" the image should span. You’ll learn how to balance your layout so that an image can be a subtle accent or a dominant, full-width feature.
The 12-Column Logic
The Umbraco 17+ Block Grid operates on a 12-unit system. When you scale an image, you are telling it how many of those 12 units to fill:
-
Half Width ($6/12$): Perfect for placing an image side-by-side with text.
-
Full Width ($12/12$): Ideal for high-impact banners or separators.
-
Quarter Width ($3/12$): Great for a row of four small icons or headshots.
This foundation ensures that your images stay "responsive," meaning they will automatically shrink and stack perfectly when viewed on a mobile phone.
[Image showing an image block being resized from 12 columns down to 6 columns using the drag handle]
Aspect Ratio vs. Scaling
Scaling changes the width of the image container, but Umbraco 17+ also allows you to control the height through "Aspect Ratio" settings in the block's formatting. By combining scaling (width) with aspect ratio (height), you can ensure that a group of images—like a team gallery—all appear the same size, even if the original files were different shapes.
Watch: Scaling and Resizing Blocks in Umbraco 17+
This video demonstrates how to grab the edge of an image block and drag it to snap to the grid, as well as how to use the 'Settings' menu for precise sizing.
Other Related Tutorials
-
[Tutorial] Responsive Scaling in the Block Grid
-
[Tutorial] uSkinned: Image Component Settings
-
[Tutorial] Understanding Grid Column Spans
-
[Tutorial] Setting Image Crops and Focal Points
Action Steps to Scale an Image
-
Select the Image Block: Click on the image you wish to resize within your Grid page.
-
Use the Drag Handle: Look for the dot or handle on the right edge of the block.
-
Resize: Click and drag the handle left or right. You will see the grid lines appear; let go when the image spans the desired number of columns.
-
Check Settings (Optional): Click the Settings (cog) icon on the block to set specific "Max Width" limits or to center the image if it doesn't fill the whole row.
-
Save and Publish: Preview your changes to see how the scaling looks on different screen sizes, then click Save and Publish.
Pro-Tip: If you scale an image to be very small (e.g., 3 columns) but it still looks giant on mobile, go into the Settings and check the "Mobile Column Span." You can often tell Umbraco to be 3 columns on Desktop but jump to 12 columns (full width) on Phones for better readability!