Adding an Image Gallery to an article using Widgetkit

If you are publishing a news article you might sometimes want to embed an image gallery inside it to show off many photos relating to your news or blog post.

The easiest and most effective way to do this is to create a gallery in Widgetkit and then embed the Widget in your article.

There is also some preparatory work to do first to get your images ready so here's how to do it.

1. Prepare the Images

Images taken on a modern phone or camera will be several MB in size. This isn't good for web sites or browsers so best to resize your images so that they are all around 1000px wide. This is generally a nice size for display on any device.

To resize your images use a site like http://jpeg-optimizer.com

If you have many images to resize you can batch convert using a free tool like Irfanview

Now we have optimised and resized all our images we can proceed to step 2.

2. Create a Widgetkit Gallery

Login to the Joomla backend and click on the green New button

Select Content Type as "Custom"

Select "Gallery" as the Widgetkit Type

Hit Create

Give your Gallery a name

Click "Add Media"

Click "Add Folder"

Give your folder for these images a meaningful name. Better still create a folder structure under a parent folder like "News Images" to keep things neat and tidy.

Now go into that folder in Widgetkit and drag all the images you resized in step 1 into the bar which says "Drop Files Here"

The photos will all upload. Now tick each one to add it to your gallery. Click "Select" to return to the gallery.

Now we need to set some rules up for the display of the photos. Click Settings

First up set the Grid options like this, we find this works well on all devices.

Now go to Media. You can experiment in here but again these settings work well;

And now to Content. In this case we are just displaying photos with no text so;

And finally the lightbox tab which allows your images to open in a lightbox view;

You are done. The good news is that you can also duplicate your galleries in future once you have settings you like. All you then need to do is change the images and away you go.

Save the widgetkit. You are now ready to use it in an article.

3. Embed your Gallery

Type your article as usual. Position your cursor on a new line where you wish to publish the gallery you created in step 2. Now click the +Widget button in the toolbar

Choose your Widget from the list that pops up.

You will see the editor now has some code like "[widgetkit id="9" name="My Gallery"]"

When the article is published your lightbox responsive gallery will appear here in place of this code.

Save and publish your article and enjoy the results!

For the very neatest results make sure all your images are the same size. You can force the media size in Widgetkit but we don't really recommend it. If you have a mix of landscape and portrait images you can create a nice "wall" effect.

If all of the above seems like too much hard work try creating a single image wall on www.canva.com and embed the single image into your article :-)