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.
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.
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.
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.
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.
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.
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.
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.
