Grouping Image and Link fields on the node edit form (Admin UI)
Based on #2297325: How can the Image and Link fields be grouped on the node edit form (Admin UI)?.
How can the Image and Link fields be grouped on the node edit form (Admin UI)? (while still displaying fields' values with the Image Link Formatter)
Short answer: Fields can be grouped with the Field collection module.
Now, since I believe this could probably be a question/requirement many people could have, here is the long answer, detailed step by step with screenshots:
0 - Prerequisites:
Start by installing the Image Link Formatter and Field collection modules, as you would install any other modules.
Refer to each module's project page for more specific instructions and for more information, see: Installing contributed modules (Drupal 7).
Now let's start the fun configuration part:
In this example, all of the settings are done for the Page content type, but the same settings could be adapted to any (custom) content type of your choice.
The placeholder [FCOL_NAME] below refers to the Field Collection field machine name. In short, Field Collection name.
1 - Add a new Field Collection field to the content type:
Select Embedded for the Widget (and not Hidden).
In the Field settings, check whether the field should be required or not (as you would for any other field), then select Unlimited for the Number of values if you would like to be able to add an unlimited amount of linked images.
I would recommend checking the checkbox Hide blank items as well, but that wouldn't impact anyway on this setup.
2 - Add the Image and Link fields to the Field Collection:
Now that we've added an embedded Field Collection field to the Page content type, let's add the grouped Image and Link fields to the Field Collection.
Browse to: admin/structure/field-collections
to view all Field Collections.
To add fields to this collection either click on manage fields from this page or browse directly to:
admin/structure/field-collections/[FCOL_NAME]
Add 2 new fields: Image and Link fields, field settings don't really matter here, so feel free to select the configuration options that match best your requirements.
Except for one of the most important field settings: For both fields, set the Number of values to 1:
We would like users to be able to add an unlimited amount of groups Image+Link, but for each group only a single Image and Link could be added.
Note that these settings could also be adapted according to your requirements.
3 - Let's check the resulting node Page edit/add form:
The Image and Link fields are grouped in a Field Collection and an unlimited number of values [Image+Link] can be added.
Collection items can easily be reordered with drag and drop (or weight), as for any other fields with multiple values.
4 - Now let's work on the display of the values of the field collection [Image+Link]:
Browse to the field collection again: admin/structure/field-collections/[FCOL_NAME]
and select Manage Display.
Pay careful attention to the View mode selected for configuration whether Default, Full content, Teaser or any other custom view modes, since the configured view mode would have to be selected in the next step.
In this example the view mode Full content was selected thus bringing us to the URL: admin/structure/field-collections/[FCOL_NAME]/display/full
.
Hide the Link field and configure the Image field to display with the Image Link Formatter, select the corresponding Link field for the Link image to field in the formatter's configuration form.
Don't forget to save each time the display settings are edited.
5 - Last configuration step: Display of the field collection for the node Page Full content view.
Browse to the Page content type Manage display page: admin/structure/types/manage/page/display/full
Once again, pay particular attention to the selected View mode. In this example, we would like the grouped [Image+Link] collections to display when the node is viewed in full: Full content.
Different options are possible here, depending on the markup that you would like to be generated, but to keep things simple for this example, Fields only was selected as the formatter. Make sure the View mode previously configured for the field collection is properly selected in formatter's configuration form, in this case: Full content.
6 - Finally, we're done: let's check the resulting node Page (in Full view):
Multiple linked (or not) images are displayed in the order configured in the node edit form page.
In this case no additional markup is generated with field collections and fields values display with minimum markup, but it would be possible to display Linked field collections or "Formatted" field collection items, depending on the formatter selected for displaying the Field collection field.
Any additional requests, feedback, questions, ideas, or examples would certainly be greatly appreciated.
Feel free to report any related issues in Image Link Formatter's tracker.
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion