I recently was asked to add an image caption to image field on a content type. I added a field image caption and included it with Alt and Title field. However, the image field was working fine with Wysiwyg inserted image but not working with the image field.
I started to investigate the problem and I came to conclusion. But to understand the problem we have to start from the beginning.
- What are the modules were used?
- How to add an image field to any content type?
- How to display the image on the content?
- How to add a field image caption to image field?
- How to manage display file types?
1- The installed modules are (Media 2.0, Media Wysiwyg, File Entity, Entity View Modes and Picture 2.0)
2- To add an image field to any content type there are two ways.
First: adding new field and select field type to image and widget type to media browser.
Second: adding new field and select field type to file and widget type to media browser. Screenshot (1.0)
3- When you go to any content type and click Manage Dispaly, you can choose the format for the field you created. The image field type (Image, File) will control the format option for the image field.
Filed Type File: If you add an image field type using File you will have the these options on the screenshot. Screenshot (1.1)
Field Type Image: If you add an image field type using Image you will have the these options on the screenshot. Screenshot (1.2)
As you can see in the two screen shots each option has it's own format. If you choose the File you can't have picture which mean you can't have responsive images.
In our case we need to have a responsive images. I choosed the format to picture and I created a picture group.
4- Now we need to add a new field image caption to the image field we created. If the field type is Image:
Go to the content where you have your image field there and add a new text field. admin/structure/types/manage/your-content-type-name/fields. It will be just a normal field added to the content type.
If the field type is File:
Go to admin/structure/file-types/manage/image/fields and add a new field name field_image_caption.
5- How to manage display file types?
Then go to admin/structure/file-types/manage/image/display and manage the display for the fields. By default there is a default view mode enabled.
If you like to add a new entity view mode then go to admin/config/system/entity-view-modes.
This mode will show when you uploading an image inside wysiwyg.
After we create the entity view mode we need to associate the file type with this mode by going to admin/structure/file-types/manage/image/file-display. We checked image and picture. Each file we check we should edit the setting for this file type.
For Image the setting will be any image style you have created to control the size of the image.
For picture the setting will be whatever picture group you would like to use.
Bottom line adding field image caption to image field created with file takes lots of steps. Also manage display the field created with file you will have to pick Rendered file then pick the entity file mode created to be applied to the image.
In my conclusion I would love to see Picture module come as an option when you create a field file type so we can apply responsive style to it and include any field we add in the manage file display.
