Thank you for this module!

I'm using this module successfully on a node in-which I often upload multiple images from the same CCK field, which makes it challenging to pair the link with the image - especially if I rearrange the images. It becomes really unmanageable when there's a lot of images.

Can the link be grouped with the image in the Admin UI?

Kind Regards,
Jase

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

polishyourimage’s picture

Title: Can the link be grouped with the image in the UI? » Can the link be grouped with the image in the Admin UI?
Issue summary: View changes
DYdave’s picture

Title: Can the link be grouped with the image in the Admin UI? » How can the Image and Link fields be grouped on the node edit form (Admin UI)?
Status: Active » Needs review
FileSize
96.16 KB
83.76 KB
381.6 KB
82.42 KB
111.18 KB
185.22 KB

Hi @polishyourimage,

Thank you very much for your interest for the Image Link Formatter module, posting this very interesting Support request with additional efforts to describe your question with a screenshot (particularly appreciated) and I certainly apologize for the delay of this reply.

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.
 

I hope I was able to describe accurately alll the necessary steps and configuration settings that would allow any non-experienced user to reproduce all these steps.

Any additional requests, feedback, questions, ideas, or examples would certainly be greatly appreciated.

Feel free to let me know if you would have any questions, comments or suggestions about this step by step configuration recipe or any other aspects discussed in this ticket, I would be glad to explain in more details.

Thanks in advance to everyone for your support, testing, reporting, reviews, comments and feedbacks.
Cheers!

polishyourimage’s picture

Dear Dave,

This is an amazingly detailed response - I haven't read through it all yet but wow thanks! I don't know why I never get notified by email when there's a response to my threads - thus the reason I have seen this so long after the fact.

Best Regards,
Jase

DYdave’s picture

Status: Needs review » Fixed

No feedback on this issue for like 2 years!!.
I would assume an appropriate solution should have already been found by ticket's author.
Additionally, no one else reported any issue that could be similar or any further comments.

Since I didn't want my extensive answer from #2 to sink at the bottom of the issue tracker, I moved its content to a documentation page:
Grouping Image and Link fields on the node edit form (Admin UI)
Hopefully this page might help some other users in the future, that may have similar requirements.

Since it doesn't seem like there is anything left to be done in this issue, I allowed myself to mark it as fixed for now, but feel free to re-open it, or post a new ticket, at any time if you have any further objections with the approach suggested in this ticket (we would surely be happy to hear your feedback).

Please let me know if you would have any further comments, feedback, questions, issues, objections, suggestions or concerns on the suggested solution, this comment or this ticket in general, I would be glad to provide more information or explain in more details.

Many thanks to everyone for your great help, reviews, testing, reporting and participation in this module's issue tracker.
Cheers!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.