Working with pictures

Picture directories

To use pictures in pages, you first need to upload them to one of the picture directories. Usually, you would go to the pages for picture directories from the Site Admin menu.  Thes pages show you the pictures you have available for adding to pages and allow you to upload new ones. It is easy to have more picture directories added to your site, but at present this needs to be done by the developer. The purpose of having multiple directories for pictures is to allow pictures to be organised into categories and to make them easier to find when you are adding pictures to pages.

At first it may seem a little annoying to have a two step process, where you first upload a picture to a picture directory and then go to the page where you want to place the picture. The advantage of this system is that it should reduce unnecessary uploads and duplication of pictures (which happens on  a lot of sites) and and I hope it will make it easy to keep track of all of the pictures you have available.

 » View Add picture menu « 

Adding pictures to pages

Once you have the picture you want in a picture directory, adding it to a page is easy. When your page is in edit mode, the edit menus for sections and asides will have an icon. Moving the mouse over that icon will give you a drop down menu that shows all of your picture directories as shown in the aside. Choosing the picture directory for your picture will take you to the picture directory page, but now all of the picture editing icons will be replaced by a single   icon. Clicking on that icon will add the picture to your page. You are done!

It figures

When you add a picture to a section or aside, BanksyMS automatically wraps it in a figure. This is partly designed to ensure your page adheres to good html5 practice, but from a practical point of view, it has some advantages:

  • It means you can add a caption to the picture.
  • It means you can style the area around the picture.
There are some circumstances where you don't want a picture wrapped up inside a figure (eg in a page banner), but this is really a matter for the developer. When you delete a picture, the figure is also deleted.

Alignment and style

You can use styles to controls the appearance of pictures by applying styles to the figure element containing the picture.