Skip to content

Widget Wednesday: Picture Gallery

What better way to show off your work, products or to share pictures of your events than by using our Picture Gallery widget.  Simply select the images you want to include and a gallery will be created for you in an instant. Use the gallery to upload fresh content and keep people returning to your site.

The Picture Gallery widget is the easiest way to create an elegant photo gallery on your website.  Just drag and drop the Picture Gallery widget onto your site where you would like to see your gallery.  This will then open a dialog box, where you are given 2 options, to ‘Upload New Images’ or to ‘Browse Uploaded Images’.

Yola Picture Gallery widget


  • Upload New Images: This opens a window displaying the folders on your computer. Browse your folders for the image file(s) you wish to use; you can add large sets of photos to your site in batches, rather than uploading pictures individually. We recommend that you use internet-friendly image formats such as .jpg, .png or .gif.
  • Browse Uploaded Images: This will open your File Manager so you can select the images to show in your gallery that you’ve already uploaded.  You can also browse and purchase stock images under the ‘Stock Images’ tab.


Select images for you gallery Find stock images for your gallery


Once you have selected the images you want, your gallery will be created for you instantly.  You can then click “Edit” on the upper left hand corner of the widget to customize your gallery. The widget will open, and you will see the following options:

Edit your Yola picture gallery

  • Upload or Add Images:  You can add more images to your gallery by uploading new images or selecting images already uploaded to Yola or stock images from Fotolia.
  • Style: Select the thumbnail style you would like.  By rolling over the different thumbnails you can see what your gallery will look like.
  • Margin: This allows you to set the spacing of the Picture Gallery widget to the surroundings on the page. If you edit the margin in the dialog window using the slider, the width of the margin varies uniformly around the picture widget.  Alternately you can enter different values if the distance of the gallery to its environment should be different.
  • Alignment: This feature allows you to align your gallery to the left, right or center of your page.
  • Reorder images: You can easily change the order of the images in your picture gallery by clicking on the arrows next to the images or dragging them in the edit screen.
  • Add hover text by entering text into the section ‘Click here to edit the photo hover test’. Use this to identify people, products, or processes (captions appear when your visitor’s cursor hovers over the photo).
  • Edit your images by using Picnik by selecting the pencil icon to the right of the image.
  • Delete an image by selecting the trash icon.

You can then ‘Preview’ the gallery from within the edit screen or ‘Save’ to see what it looks like on your site.


Yola Picture Gallery widget thumbnails

Picture Gallery example

Leave a Reply