Last Updated: December 4, 2024, as of MereChurch 1.7.9
Image Settings
As of MereChurch 1.7, the Image block has new features for you to use to make your church website even better! You can now tweak the layout and display of images, link an image to any URL, page, or file, and move your images around on the page.
By default, when you add an image, you will see a new, simpler view:
This 'Basics' view shows you only the required fields for an image: the source file itself, and the alternate text that shows up for screen readers (or when there's a problem loading the page). From here, you can click over to the 'Layout' tab to see layout-specific fields (like placement and margin options), or to the 'Link' tab to link this image to a URL, Page, or File.
Important: ALWAYS INCLUDE ALT TEXT ON YOUR IMAGES. We used all caps because it's really that important. Not only does alt text make your website more usable for those using screen readers, it's also a big SEO optimization boon.
—
You can also click 'All Fields' to see everything in one place.
Editing Images
Anywhere you can upload an image to your website (promo image, page header image, social media image, and so on), you can take advantage of the following features:
- Crop: Select a rectangle out of the image to display on the site. This is a non-destructive crop, so it preserves the whole image within Studio in case you need to change it in the future.
- Hotspot: Set the focal point of the image; if the image is the wrong aspect ratio for where it's meant to be displayed, the system will work to keep the focal point always visible.
- Loading placeholders: While the page is loading, the image displays a blurred, low-quality version of the image in its place. This helps reduce layout shift (article on that if you're interested) and provides greater visual continuity while the page is loading.
- More efficient file formats: All images on MereChurch load in the .webp format, which should load faster and use less bandwidth!
Once you have uploaded your image, MereChurch provides options for you to edit the image:
You can crop an image non-destructively: this means that if you change your mind you can always come back and adjust your cropping job:
Adjusting the circle in the middle of your cropped image will change the 'hotspot' of the image. If your MereChurch website needs to crop this image (typically on mobile), it will preserve the details of the 'hotspot' first to make sure that you don't end up with cut-off heads or missing details.
Layout Options
From the Layout tab, you can adjust the alignment of the image (Left, Center, or Right), as well as the size the image displays at:
- Small (about 150pixels)
- Medium (about 300 pixels)
- Full (up to the full width of the content column on the page)
For left- and right-aligned images, you can also toggle the 'Float' option. Floating an image means that the block will share space with any paragraphs or headings around it, like so:
Finally, adjusting the image margin changes how much space the image keeps between itself and other blocks on the page. The default is medium (about 20 pixels), but you can also choose between small (about 12 pixels) and large (about 30 pixels).
Linking Images
As of MereChurch 1.7.9, you can now add links to your Image blocks. With this, you can link out to other websites (using the URL feature), pages on your site (using the Page feature), or to a file download (using the File feature).
The 'Label' field, when set, will show up as a hoverable title over the image:
—
If you still have questions, please feel free to get in touch! We're here to help you with your MereChurch.