Pictures in Weebly

In the article about Pictures we suggest how to choose and use pictures for your club website. Here's how Weebly handles pictures.

In Weebly

Weebly cannot crop, adjust contrast and colours. It has limited powers to change the size that a picture is displayed.

The page elements which handle images are Paragraph with Picture, Picture (both in the Basic Tab) plus Photo Gallery and Slide Show (both in the Multi-Media Tab). We deal with the last two in a separate article here.

Where to get a picture

Weebly offers three choices: your computer, a free gallery and the internet.

When you first drag a picture element onto the page you see:

Click in the element and a dialog box with three tabs appears:

My Computer

The Weebly picture upload tab.

You will normally use this one.

Click Choose File and browse your computer to find the right picture to upload.

The image should be roughly the size you want to see on the website.

Photo Gallery

The Weebly picture gallery tab.

This lets you search for a topic among the pictures listed as available on the flickr website under a Creative Commons Licence.

If the licence requires attribution (a credit to the picture maker) this is added automatically in a footnote.

The Internet

The Weebly picture from internet tab.

In this tab you type in the URL (web address) of an image you have identified on the internet.

If you see an interesting picture on a website, right-click on it and choose "View Image" or "Properties". The first shows the picture on its own. Look in the browser's address bar to see the image's URL . The second shows the URL and other information. In both cases you can copy the address to paste it into this box.

Remember that most images are copyright and should only be used with the permission of the person who took them.

How to display a picture

Illustration of the picture re-sizing button in Weebly.

Once in place on a picture element. the size at which an image is displayed can be adjusted by dragging the red dot at its lower right corner.

The picture retains its aspect ratio.

The Picture-Toolbar then offers:

Border	choose none / thin / medium / thick - images with fairly solid colour at their edges need no border, others blend pleasingly with the page background and also need no border. Many images look better if bordered.	Caption	if the picture needs a visible caption type it here and it displays under the image.
		Link	opens the usual Link options. When set up as a link visitors clicking on the image are taken to the linked place. Often used for pictures of control buttons, arrows or for logos - e.g. showing the IAC diamond logo with a link to the IAC website..
Border Color	grey / black - in general grey is less distracting than black for borders.
Position	left / center / right - you can also drag the image to the left, centre or right of the space available.

The Advanced options offer: The Weebly advanced picture tools.

Most of these are obvious but can help set off an image appropriately.

Alt Text can be important. It is not normally seen, but on many browsers pointing the mouse at the image reveals the text. It is mainly used for browsers that do not show images.

But it also gets picked up by search engines, so it is good to get into the habit of adding short, accurate descriptions. If you choose to put your club name/logo on a page, give the club name in this description area. Search engines cannot "read" the image but can read that.

Adding the description also helps meet requirements of disability access legislation.

There are nine pages in this series of detailed Weebly tips:

They support general articles on web design for film-making and AV club websites which begin here.

[Weebly frequently update and improve their system. These pages are based on tests in November 2010.]

	The world of non-commercial film and A-V making		Events Diary	Search
The Film and Video Institute			Join us on Facebook