Adding images to your school website pages is simple and helps make your content more engaging for students, parents, and visitors. This guide will walk you through the complete process of inserting, editing, and positioning images on your website.
Getting Started
To add an image to any page on your school website, you'll first need to navigate to the specific page you want to update. Once you're on the correct page, you're ready to begin adding your image.
Adding Your Image
Step 1: Create or Select a Content Block You have two options for placing your image:
Add a completely new content block to your page
Click into an existing content block that already contains text or other content
Step 2: Position Your Cursor If you're adding the image to an existing content block with text, click approximately where you want the image to appear within that content. This will determine where the image gets inserted.
Step 3: Insert the Image Look for the "Insert/edit image" button in your toolbar and click it. This button typically looks like a small picture icon.
Step 4: Upload Your Image Use the file browser button to locate and select the image file from your computer. Navigate through your folders to find the image you want to use, then select it.
Adding Alt Text for Accessibility
Step 5: Describe Your Image In the Alt Text field, enter a brief, clear description of what the image shows. For example, "Students working together in science lab" or "School volleyball team celebrating victory."
Alt text serves two important purposes:
It displays when someone's browser cannot load the image
It helps visitors using screen readers understand what the image contains
Once you've entered your alt text description, click "Save" to insert the image into your page.
Editing Your Image Later
If you need to change the alt text after saving your image, simply click on the image and then click the "Insert/edit image" button again. This will reopen the editing window where you can modify the description.
Adjusting Image Size
To resize your image, click on it to select it, then grab any corner of the image and drag it to make the image larger or smaller.
Important sizing tip: If you stretch an image larger than its original size, it may become blurry or pixelated. For the best quality, try to use images that are already close to the size you need, or make them smaller rather than larger.
Positioning Your Image
After inserting your image, you can control how it aligns with the surrounding text:
Left-aligned: The image appears on the left side, with text wrapping around the right
Center-aligned: The image appears centered on the page with text above and below
Right-aligned: The image appears on the right side, with text wrapping around the left
To change the alignment, select your image and use the Image Align buttons in your toolbar to choose your preferred positioning.
Tips for Success
Choose images that are relevant to your content and appropriate for your school audience
Use high-quality images that are already close to your desired display size
Write descriptive alt text that would help someone understand the image without seeing it
Test how your page looks on different devices to ensure images display well on both computers and mobile devices
With these steps, you'll be able to enhance your school website pages with meaningful images that engage your community and support your messaging goals.