°ÍÀè·èÂíÐã

Why do web editors use image blocks?

Images help web editors tell the story of the content you have on the page. While some people love reading information, others like to scan a page and get a sense if they're in the right spot before committing to reading. Photos help you send a signal to the visitor they're in the right spot, and adds visual interest to the page. 

Image blocks allow you to place a photo in a specific spot on the page.

What layouts can image blocks be used in?

There are some restrictions with image blocks. For example, you can’t have a photo take up a one-column section, and you can't place an image block in a section that has a colour background. Here are the acceptable layouts for image blocks:

• Layout with two columns section
• Layout with three columns section
• Layout with four columns section

Who can use image blocks?

Builders and Super Builders can create and edit image blocks.

Step-by-step instructions

1. Choose "Image" in the add custom blocks menu.
2. Title: This is an administrative title that will be used to identify the block and not displayed on the website. 
3. Header: The is an optional field to display a header above the useful links. Header will be set as an H2 by default but you have the option to change it. Note: Only use H1 if this is being used as a header/title for the page. H2 for any section header. H3 to break up content within the section. Never mix and match header sizes, this will confuse screen readers and make the site less accessible.
4. You will have a choice of heading colours depending on the choice of background colour selected. 
5. In the section called "Image," click on the "Add media" button. This will launch OC's media library.
6. In the media library, you have two options:
   1. type in the name of the image file you need. The library will filter the results and display only images that match your search terms; or,
   2. scroll through the images displayed in the library until you find what you are looking for. If your group has a lot of images, you can click on the arrow buttons at the bottom of the library (>>) to load the next page of images in the library.
7. Click on the image you want to insert. 
   1. Clicked on the wrong image? That's okay. Just click on the checkbox in the top right corner of the image to de-select it. Then choose the right image.
8. Click "Insert selected" in the bottom left of the gallery screen.
9. Under "Image orientation" section, click on the dropdown and select either "portrait" or "landscape." This will tell the Drupal system what the photo orientation is, and will automatically size it in the column for you.
10. Click the "Add block" button.

Additional options

You can make the image block "clickable," by adding a hyperlink to the image. These are the steps:

1. After selecting your image in the media gallery, there is a field called "Link." 
2. In the "Link" field, type in the name of the page from OC's website that you want to link to. If the page is not on the °ÍÀè·èÂíÐãwebsite, then paste the full URL into the Link field.
3. For external links, click on the "Attributes" dropdown. Click on the "Target" dropdown, and select "New window." This will launch the external site in a new window for the user.
4. Follow steps 9-10 above.