Tutorial: Exploring Images

This tutorial tackles all you need to know about images and the Yola Sitebuilder - 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 Picture

Many of our Style templates allow you to customize the banner image. Take note of the pixel dimensions for the banner (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, hover over the banner area and click inside the blue box when you see "Edit Banner Image". A dialog box will open up that will allow you to "Upload New Banner" (from your computer), "Browse Uploaded Banners" (in your File Manager) or "Find Stock Banners" (purchase a professional looking banner image). Once the picture is selected, the Banner Editor will open and you will be able to crop and resize your banner picture 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 picture to be saved to your page.

Please note that you can use the default banner picture of the style if you wish.

For more information on adding banners and backgrounds, take a look at this tutorial: Personalize your Style.

Inserting Pictures

You can insert pictures in one of two ways:

1. Picture Widget

Drag and drop a Picture Widget onto your page. The Picture Widget is located in the "Basic" folder on the Sidebar, to the right of your screen. A dialog box opens up, allowing you to either purchase a picture from Fotolia stock photograph, select an existing picture or to upload a new one from your computer. Browse for the picture you'd like to upload and click "Ok".

When uploading pictures from your computer to your File Manager, you can select multiple files by holding down your Shift key or Ctrl key. Once your pictures are loaded to your File Manager, choose the picture you want to use and click "Select". This is only possible if you click on the File Manager button and not when you add a Picture Widget to the page.

The File Manager window closes and your image has now been placed within the blue borders of the Picture Widget on your page. Note that the blue or red 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 orientation or position of the picture, add a link and alt text, using the "Edit" link on the top left-hand corner of the Picture Widget. You can also adjust the top, bottom, left and right margins, which is useful if you don't want the graphic to sit against another page element, such as a block of text. You can access this feature by clicking on the "Margin" link on the Picture Widget.

To link your picture to another page, external URL, email address or file, click on the "Edit" link and then select the "Choose A Link" button. The Alt Text attribute specifies alternate text that is shown when the image cannot be displayed. Alt Text should 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 the product name and a short description of the product.

2. Text Widget

Another way to insert pictures into your pages is by using the "Picture" button on the Text Editing Toolbar when using a Text Widget. Drag the Text Widget onto your page from the "Basic" folder on the Sidebar. Insert your cursor into the Text Widget box and click on the "Picture" button on the Text Editing Toolbar (it's the one in the middle with the green tree in a picture frame). Select a picture in the same manner as you would for the Picture Widget - select an existing picture or upload a new one from within the dialog box that opens up and click on 'Select". 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 an ideal way of inserting graphics into pages, as it shows the picture dimensions (in width and height) as you drag it to scale. This makes it really easy to insert several pictures of the same height into a row which is useful for thumbnail pictures that look uniform and neat. It's simple to alter the picture alignment (choose left, center or right alignment) in the Text Editing Toolbar. To add a link to your picture, select it and click on the "Link" button (next to the Picture button) on 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 lets explore the contents of the "Multimedia" folder. There are widgets for Flickr, Youtube, Smugmug, and Metacafe in the "Multimedia" folder. There is also a Slide widget located in our "Widget Collections" folder.

Flickr is one of the most popular online photo management and sharing applications in the world, so we've made it easy to add photos from Flickr to your website. Drag the Flickr Search Widget onto your page and click on "Edit" on the Widget to access the Properties. 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. This example shows results for the Search Phrase "recycling, green energy, renewable". The Results Per Page is set to 27 so that there is a long block of images. Now you can fine-tune the placement of the widget on your page by altering the Position and Margins.

A more advanced feature is the Flickr Lightbox which enables you to add a gallery of your Flickr photos - for more information, 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 and add your Gallery URL to the Properties tab. 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 Picture 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 "Widget Collections' folder onto your page launches the Slide dialog box 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 Sitebuilder. Press "Save" when done, and voila, your slide show will appear. Again, use Properties to edit the position of your widget.

In the "Multimedia" category, you will also find YouTube and Metacafe. If you have a video that you'd like to include on your website from any of these sources, just insert the web address or URL into the dialog box that opens up.

That about does it. Have fun playing with these great tools. We look forward to seeing your new published sites!