Wildfire User Guide
Page Content – Images
Click on a section title to jump down the web-page:
A. Introduction
1. In Chapter 5, you learned how to add a basic image to a web page.
2. In this chapter, you will learn advanced methods of using images on a page.
3. Images are usually “block content”; you may insert an image block in any area of a section layout.
4. Image galleries look and function best in a single-column section.
5. Image slideshows are a special type of page section, not block content.
B. Image with text
1. Note: When an Image with text block is viewed on a mobile device, the image will be cropped, not scaled. The text will be preserved. If you want the full-sized image to display with text, you will need to embed the text directly onto the image using a photo editor, and then upload that image (with embedded text) and place it as a simple Image block into Wildfire. The drawback to doing this is that the text cannot be translated into other navigation languages because the text is part of the image.
2. Select the Content block to which you want to add an image with text by clicking on a link + Add content.
3. A sidebar opens, displaying the types of block content.
4. Click on the option Image with Text.
5. A new sidebar opens with features to select an image and write and format text.
6. At the top, choose a style for how the image and text are displayed relative to each other.
a) Banner – text is overlaid directly on image
b) Half width – image and text are displayed side by side in the same content block; text does not wrap around image
c) Text panel – text is overlaid on image within a contrasting panel
d) Wrap text – text is displayed separately from image in the same content block and wraps around image (if there is enough text to do so).
7. In the next section of the sidebar, click on the Add media button to select the desired image.
a) The Add or select media working box opens.
b) You may use the upper section of the working box to select an image file from your computer.
c) If you have already uploaded images to your website, they will appear in the lower section of the working box.
d) Select an image by clicking on the square in the upper left corner of the image thumbnail.
e) Click on the Insert selected button at bottom left of the working box.
f) The image now appears in both the layout panel on the left and in the sidebar on the right.
8. In the sidebar, select the Image size from the drop-down menu.
a) Thumbnail
b) Medium
c) Large
d) 100% width (fills the width of the layout section / column)
e) Original size
9. In the text editor box, write and format text to go with the image.
a) Depending on the style chosen in Step 5 above, you may want more or less text.
10. Other formatting options appear below the text editor box.
a) These vary depending on the style chosen in Step 5 above.
11. In the lower section of the sidebar, you may configure the Image with Text as a hyperlink.
a) Choose whether the link type is the Entire image, Text only, or a Button.
1) If you choose Button as the link type, the sidebar expands to offer additional features to customize the button.
(a) Write text to appear on the button.
(b) Select a text color.
(c) Select a background color.
(d) Choose whether the button is positioned at the left, center, or right of the image.
b) Link to an external website: In the space titled Link, enter the URL of the external website, starting with "http".
c) Link to another page on this website: In the space titled Link, begin to write the title of the page. A list will appear of page titles which match. Click on the desired page.
12. Click on the Save button at the bottom of the sidebar.
13. Click on the Save button on the layout editor screen.
14. Your work appears on a preview of the page.
C. Image gallery
1. A gallery is a special type of content block.
2. The gallery displays a collage of thumbnails in varying sizes of the images in the gallery.
a) Click on a thumbnail image to enter the full-image gallery viewer.
b) Use the right and left arrows to scroll forward and back through the gallery.
c) The numbers at the upper left tell you how many images there are and which one you are looking at.
d) Image captions, if provided, appear at the bottom of the screen.
e) Click on the X at the upper right to exit the full-width gallery viewer.
3. Use image galleries on your website to group photos and images by subject or theme.
4. Image galleries look and function best in a single-column section.
5. Select the Content block to which you want to add an image gallery by clicking on a link + Add content.
6. A sidebar opens, displaying the types of block content.
7. Click on the option Gallery.
8. A new sidebar opens with features to select images for the gallery.
9. Click on the Add media button.
a) The Add or select media working box opens.
b) You may use the upper section of the working box to select image files from your computer.
c) If you have already uploaded images to your website, they will appear in the lower section of the working box.
d) Select images by clicking on the square in the upper left corner of the image thumbnail.
e) Select multiple images for a gallery, but no more than 20.
f) Click on the Insert selected button at bottom right of the working box.
g) The images now appear in both the layout panel on the left and in the sidebar on the right.
10. Click on the Save button at the bottom of the sidebar.
11. Click on the Save button on the layout editor screen.
12. Your work appears on a preview of the page.
a) The images change automatically and continue to do so in a loop.
b) Place the mouse cursor over an image to pause the slideshow on that image.
c) Use the arrow buttons at right and left to go forward or back manually.
2. Add slideshows to your website to group photos and images by subject or theme.
3. To add an image slideshow, click on a link + Add section.
4. A sidebar opens, displaying the types of sections.
5. Click on the option Slideshow.
6. A new section area appears for the slideshow.
7. Click on the link + Add images to slideshow.
8. A new sidebar opens with features to select images for the slideshow.
9. Click on the Add media button.
a) The Add or select media working box opens.
b) You may use the upper section of the working box to select image files from your computer.
c) If you have already uploaded images to your website, they will appear in the lower section of the working box.
d) Select images by clicking on the square in the upper left corner of the image thumbnail.
e) Select multiple images for a slideshow, but no more than 20.
f) Click on the Insert selected button at bottom left of the working box.
g) The images now appear in the sidebar on the right.
10. Click on the Insert images button at the bottom of the sidebar.
11. You may edit the Slideshow section in the same way that you edit any other section.
a) Click on the Edit slideshow link at the upper left edge of the section.
b) A sidebar opens to the right.
c) You may choose the relative width of the section on the visible page.
d) You may specify Space above section in pixels. This adds separation on the page from the section above (if there is one).
e) You may choose whether the whole section has a colored background (from a limited selection within the color scheme) or an image as a background.
f) Once you are finished, click on the Save button.
12. Click on the Save button on the Layout Editor screen.
13. Your work appears on a preview of the page.
E. Google map
1. You may insert a Google map on your website to help visitors know where you (or any other feature) are located geographically.
2. Select the Content block to which you want to add a Google map by clicking on a link + Add content.
3. A sidebar opens, displaying the types of block content.
4. Click on the option Google Map.
5. A new sidebar opens with features to configure the Google map.
6. In the space titled Location, write an address, the name of a city, or another description that Google Maps will recognize.
You may need to experiment with this description to get the desired results.
7. Click on the Save button in the sidebar.
8. The sidebar disappears, and the resulting map appears on the Layout Editor screen.
9. Click on the Save button on the Layout Editor screen.
10. Your work appears on a preview of the page.
11. Within the Google map frame, you will find many of the same features as at the Google Maps website.
a) Zoom in and out with the + and – icons at the lower right.
b) Toggle between map mode and satellite photo mode at the lower left.
c) Anywhere on the map, click and hold and move the cursor to move around the map.
d) Click on the link View larger map at the upper left to go to the Google Maps website and see the same geographic location.
