Creating an inline Image Gallery

This tutorial shows a quick and easy way of creating an inline image gallery.

Our goal is to add an arbitrary number of images to content (say of the content type "page"). We want to be able to freely choose the position in the text for the images. On click we would like to display a magnified version of the image.

Required modules

Step 1: create Imagecache presets

First we create two ImageCache presets that define the thumbnail (which is visible in the text later) and a bigger version for the magnification effect.

ImageCache thumbnail settings ImageCache display settings

The settings shown here are only sample values of course, and can be changed to your liking later.

Step 2: Adding a field to the content type

After we have defined the ImageCache presets, we can extent the desired content type. In our case I am using the content type page as an example.

add field to page

Those are the example settings: every image uses its own directory inside sites/default/files and you can also give a seperate title to every image.

Image path settings Image title settings

Now the settings for inserting the image into the content. In the image settings, there is the area "Insert" for this task, in which we can choose how to insert the image into the content. Since we are working with Colorbox, we choose the option "Colorbox" with our "Thumbnail" ImageCache preset.

Image insert settings

To complete this, a few general settings for the new field are created. Among other things we can define here how many images can be inserted.

Image global settings

As a small addition you should also define to not render the values of the imagefield (Display Settings of the content type). Otherwise the images would be visible below the content for a second time.

Page display settings

Create content

After finishing the field settings, we can now create content and insert images into it. To do so you choose the desired image, optionally give it a title and then click the button "Insert" next to the image. In this way the HTML code for the image is inserted into the body text at the current cursor position.

As we have chosen in the image settings to use Colorbox, a link around the image is created in the same step as well as the classes that Colorbox needs.

Galerie erstellen - 01 Galerie erstellen - 02

Before saving be sure to choose an input format which does not remove the HTML elements and attributes. As a quick solution I have chosen "Full HTML", but you should not allow this format for every user on a live page.
It is more secure to define an additional input format for this purpose.

Result

If we save the content with the inserted images as now, the images are shown in the middle of the text. Clicking on the preview images opens a bigger version of the image with Colorbox and one can also step through all the images that are inserted into the text.

Galerie Ergebnis - 01 Galerie Ergebnis - 02