- \n
- Media Module<\/a> 7-x.1.2<\/li>\n
- Insert<\/a><\/li>\n
- Image Caption<\/a><\/li>\n
- WYSIWYG<\/a> with the CKeditor Library<\/li>\n
- HTML Purifier (Not needed if you allow full HTML)<\/li>\n
- Any dependencies of the above modules, i.e. ctools, views, etc…<\/li>\n<\/ul>\n
Configuration:<\/h3>\n
Go ahead and download the modules and install them on your site whatever your preferred method. You can enable them as well.<\/p>\n
Now, most of these modules auto-configure themselves. For this example we will use the basic page content type but add an image field.<\/p>\n
![\"Basic](\"https:\/\/maxbronsema.com\/blog\/wp-content\/uploads\/2012\/10\/Screen-Shot-2012-10-09-at-7.49.03-PM-1024x277.png\" "\\"Screen")
<\/a>Basic page content type configuration screen.<\/figcaption><\/figure>\n Notice that we use the image widget which is augmented via the media module. The next screen we need to edit is the images field. Make sure to check the Enable Alt<\/em> field and Enable Title<\/em> field.<\/p>\n
![\"The](\"https:\/\/maxbronsema.com\/blog\/wp-content\/uploads\/2012\/10\/Screen-Shot-2012-10-09-at-7.55.12-PM.png\" "\\"Screen")
<\/a>Don’t forget to enable the alt and title fields.<\/figcaption><\/figure>\n Right below those check boxes, if you have the Insert module enabled you will see a collapsed field labeled insert. Expand it. Check the Enable Insert button check box. Choose the styles you want to make available to your users. Add the word “caption” without the quotes to the Additional CSS Classes text field. This will add the caption class to every image inserted into your nodes. This makes the caption magic happen automatically, as long as you fill out the title field with each image, because the image caption module looks for the class caption on all images.<\/p>\n
![\"The](\"https:\/\/maxbronsema.com\/blog\/wp-content\/uploads\/2012\/10\/Screen-Shot-2012-10-09-at-7.56.54-PM-1024x419.png\" "\\"Screen")
<\/a>Enable the insert button, choose some styles, and add caption to the classes field.<\/figcaption><\/figure>\n Make sure you have the image caption module enabled and let’s make a new test node.<\/p>\n
Go to Content -> Add Content -> Basic Page and title your new node to test the image caption.<\/p>\n
Then go down to your image field and upload a new image or graphic. Fill in the alt field and the in the title field add the text you want for your caption. Click the insert button near the style dropdown menu and the image appears in your post.<\/p>\n
![\"An](\"https:\/\/maxbronsema.com\/blog\/wp-content\/uploads\/2012\/10\/Screen-Shot-2012-10-09-at-8.02.10-PM-300x61.png\" "\\"Screen")
<\/a><\/p>\nNow, click the preview button and you will see the caption appear beneath your image. Styling the caption class is up to you.<\/p>\n
<\/p>\n
![\"A](\"https:\/\/maxbronsema.com\/blog\/wp-content\/uploads\/2012\/10\/Screen-Shot-2012-10-09-at-8.03.03-PM-300x244.png\" "\\"Screen")
<\/a>Look ma’ a caption!<\/figcaption><\/figure>\n Fairly awesome.<\/p>\n
Why this approach:<\/h3>\n
OK, so why did I decide to do it this way? There are a few other modules, notably jCaption<\/a>. You could also make each image a node and then attach a caption field to the image. That approach seemed unrealistic as then I would have to easily allow authors to import nodes, into their post in an easy manner. However, the author would have to create at a minimum two nodes\/entities just to create a page with one image. That doesn’t entice many people.<\/p>\n
jCaption looks interesting except that you cannot turn off captions. Anything with a title attribute gets a caption. Sometimes, captions are not appropriate but people still want the contents of the title attribute to appear on mouseover. With the image caption module because the caption is controlled by a class, the user can edit the image in their WYSIWYG editor and remove the class. In the next image you can see the caption class has been removed, meaning no caption will appear. This gives control to the page creators which is a fundamental goal of CMS.<\/p>\n
![\"The](\"https:\/\/maxbronsema.com\/blog\/wp-content\/uploads\/2012\/10\/Screen-Shot-2012-10-09-at-8.13.23-PM-283x300.png\" "\\"Screen")
<\/a>No caption class means no caption accompanying the image.<\/figcaption><\/figure>\n Improvements:<\/h3>\n
I am happy with this approach except for the fact that users cannot see the captions directly in the WYSIWYG. It would be fantastic if that were possible and it will require more research. Since the caption appears because of jQuery we would have to utilize a drupal behavior to fire whenever an image is inserted and then with ajax save the state of the page and add in the caption. It sounds messy.<\/p>\n
I wish there was an easier way for users to disable the caption as well. It is not hard to go into the properties of an image but it would be great if they could just click the image and remove the caption class via a dropdown menu or contextual editor.<\/p>\n
Overall:<\/h3>\n
This seems to be a robust approach that helps the user by minimizing the knowledge and time needed to add captions. I need to find a good way to alert them of how to remove a caption, but I am hopeful for the use of this technique.<\/p>\n","protected":false},"excerpt":{"rendered":"
Image captions are supposed are a fairly standard item in a web developer’s toolkit. In a modern CMS they seem to be a given. However, Drupal leaves this to the contrib space, as it should, since each site has different needs. However, the lack of an adopted contrib method for achieving image captions was a … Continue reading Image Captions in Drupal 7 – A method<\/span>
- Insert<\/a><\/li>\n