Exploring Images
This tutorial tackles all you need to know about images and the Yola Site Builder - uploading images, using custom images for your page header, placing images on your pages, compressing and saving files for web use, photo and video widgets, and also managing your files with the File Manager.
Changing the Header Image
Many of our Style templates allow you to customize the top header image. Take note of the pixel dimensions for the header (eg. Tastelessly is 978 x 263 pixels) and upload a scaled photograph or create and upload your own graphic. Your custom graphic may include your company logo and/or additional visuals.
To change the banner image click on the blue "change banner" box. A dialog box will open up that will allow you to browse your computer for an image or choose an image from the file manager. Once the image is selected, the banner editor will open and you will be able to crop and resize your banner image to fit the specified banner dimensions. Once done, click on OK and your banner image will be added to your page. Click on "Save" for the banner image to be saved to your page.
Please note that you can use the default banner image of the style if you wish. The blue buttons and banner dimension text is only visible in editing mode, it will not appear in Preview mode or on your published site.
Inserting Images
You can insert images in one of two ways:
1. Image Widget
Open the Widget toolbox by clicking in the Content box on the right pane. A list of widgets, arranged by category, will appear.
Look for the Image Widget and click and drag it onto your page. The File Manager automatically loads, allowing you to either select an existing image or to Upload a new one.
To use a new image, click on the 'Upload Files' button near the top of the window. Browse for the graphic you'd like to upload and click 'ok'.
Note that you can upload multiple files by holding down your Shift key or Ctrl key while selecting the files. To select an image, select the picture you want to use and click 'ok'.
The File Manager window closes and your image has now been placed within the green borders of the Image Widget on your page. Note that the green or grey widget frames are only visible in edit mode, they will not appear in preview mode or on your published site! Drag the red square on the bottom right corner of the picture to resize it.
Now you can adjust the Margins, the orientation or Position of the image, add a Link and Alt Text, all from within the Image Widget Properties pane. Image Position options are: left, center or right aligned to the frame. You can adjust the top, bottom, left and right margins, which is useful if you don't wish the graphic to sit against another page element, like a block of text.
To Link your image to another page, external URL, email address or file, click on the 'Choose A Link' button. The Alt Text attribute specifies alternate text that is displayed when the image cannot be displayed. Alt text should always describe the content of the image, so type something appropriate into this field. For example, if it's a company logo type in the company name, if it's a photograph of one of your products type in a short description of the product.
2. Text Widget
Another way to insert images into your pages is by using the 'Insert Image' icon in the Text Editing widget. Drag the Text Widget onto your page from the Widgets column. Insert your cursor into the Text Widget box and click on the Insert Image icon in the Text Editing toolbar (it's the one in the middle with the green tree). Select an image in the same manner as you would for the Image Widget - select an existing image or upload a new one from within the File Manager window and press 'ok'. To resize the picture proportionately just drag any of the corner nodes (a black corner frame and arrow will appear as you hover).
This is my preferred way of inserting graphics into my pages, as I find the resize works better and it has the added feature of showing the picture dimensions (in width and height) as I'm dragging it to scale. This makes it really easy to insert several images of the same height into a row which is useful for thumbnail images that look uniform and neat. It's simple to alter the image orientation (choose left, center or right alignment) in the Text Editing toolbar. To add a Link to your image, select it and click on the Link icon (next to the Insert Image icon) from the Text Editing toolbar.
Photo and Video Widgets
It couldn't be simpler to add photos and videos to your website! You'll notice that the Widgets are bundled together by category so let us explore the contents of the 'Photos' and 'Video' folders. There are widgets for Flickr, Smugmug in the 'Photos' category and Slide in the 'Widgets' folder.
As a Flickr addict myself, this makes me very happy! Drag the Flickr widget onto your page and configure the Properties to have it display your photos. By default the widget displays random images from the Flickr pool. You need to insert your email address (as configured with your Flickr account) into the Email field. In addition you can further refine your search by typing in a Search Phrase to enable the widget to look for specific images within your pool. Alternately, you can display images that are not from your account by typing in a Search Phrase alone. My example shows results for the Search Phrase "recycling, green energy, renewable". My Results Per Page is set to 27 so that I have a long block of images. Now you can fine-tune the placement of the widget on your page by altering its Position and Margins.
A more advanced feature is the Flickr Lightbox which enables you to add a simple gallery of your Flickr photos - for more info, please see our tutorial on Photo Galleries, Portfolios and Presentations.
Streaming a slide show of images from your Smugmug Gallery is as easy as displaying your Flickr photos. Drag the Smugmug Gallery widget from the Photos category and add your Gallery URL to the Properties column. If you don't have an account, but would like to show a friend's photographs, you can browse through the Smugmug Galleries. As with the Image and other widgets, you can alter the Position of the widget on the page. In addition, you can change the widget Width and Height to suit your web page.
You can also show your photos from your Slide account or from other galleries. Dragging the Slide widget from the 'Widgets' folder onto your page launches the Slide dialog where you can paste your Slide code. To get the code, click on the Slide.com link and then into the Embed text field within your Slide account (you'll need to remember your login details to get here). If you don't have an account, you can create one for free! Copy the Embed code and paste it into the Slide dialog in the Site Builder. Press 'ok' when done, and voila! Your Slide show should appear. Again, use Properties to edit the Position of your widget.
In the 'Video' category you'll find YouTube, Metacafe, and Google Video. If you have a video that you'd like to include on your websites, from any of these sources, just insert the web address or URL into the Properties pane.
That about does it. Have fun playing with these great tools. We look forward to seeing your new published sites!
Related tutorials:
