Good day everyone,

Our client wants to have this feature where he can upload/reuse multiple images for an article content type. This can be achieved using a Media Library, where I find it tricky is each images will have additional fields(Alt, Copyright, Description fields), I've tried adding the additional fields to the Image Media Type but once the node is saved, their value will be associated to the image's metadata. The proper functionality should be is when the node is saved, the Alt and Description of the images should be associated to the node's metadata because Images can be reusable to another node, and the values of Alt and Description varies to each node.

So I talked with someone who really knows a lot about Drupal. He suggested that I keep the Media Library, and create a Paragraph Type. I called it 'Image Library Paragraphs', this paragraph has Image, Alt, Copyright, and Description fields. This way the Paragraph can hold the id of the image, alt, description and the node's ID. In theory, what we're trying to do here is everytime the user uploads/select an image. We must find a way to associate that image and add corresponding paragraph for each of those images. So if the user uploads/selects 3 images. It will also automatically create 3 paragraphs for those images. We also would need to reconstruct the layout of the form to somehow "blend" the image and its corresponding paragraphs. And since the position of the images can be changed, we also need to somehow reposition its paragraph accordingly to the image.

It's tricky and a lot of work, honestly it's even beyond my Drupal skills. But any help to the right direction will truly be appreciated. I haven't even tried creating a really complex custom module. But would really want to learn how this can be done. Thank you in advance.

In theory this is what it's gonna look like enter image description here

enter image description here

  • Article only has paragraph field (no media field, no file field). Paragraph has media reference field (NOT file; set cardinality to 1) and whatever meta data fields. Exacltly one media per paragraph. Advantage: No coding required at all. Disadvantage: No multi upload, you must create one paragraph and can select/upload exactly one image. – Hudri Apr 20 at 9:51
  • hi @Hudri, thank you very much for taking time to help me. indeed we have tried that approach as well. but the user's use case involves multiple upload/select images. thats why we couldnt use only paragraphs. – itsfrancisnadal Apr 20 at 10:09
  • Sorry, but I can't see any chance for multi-upload without a lot of custom coding. This site is for narrow Q&A, not for tutorials, and your requirements are well beyond both. – Hudri Apr 20 at 10:28
  • @Hudri it's okay I understand. Really appreciate your responses! – itsfrancisnadal Apr 20 at 10:34
  • Why don'y you write a presave hook for a media item to write its field data back to the parent entity? Better yet, why can this data not be extrapolated through the reference? You can even do it right in the UI if you install display suite and display suite chains module. – Ryan Hartman Apr 20 at 13:36
  1. Create a paragraph "Node Image".
  2. Within the Paragraph type, add your media reference field and various text fields for your image metadata. Set them all to required, this is key for later.
  3. Go back to your Node type and add a new Paragraphs field called "Node Images", set to unlimited cardinality. Restrict the field to only allow the "Node Image" Paragraph type.
  4. On the Node's Form Display, set to the new field to "Paragraphs Experimental".
  5. Configure the settings (the gear icon) to suit your needs. AKA override the single/plural to be "Node Image" and "Node Images", set to closed, use button, default value...etc. Fiddle with it.
  6. Create a Test Node with 2 of these paragraphs. Ensure theme debugging and cache is off. Otherwise you will have to flush each time.

At this point you have all the ability to add the data needed to Drupal. The rest can be handled via traditional theming methods, or Display Suite. Within display suite there are even various routes to accomplish this. I will explain what I feel is the simplest method. This method relies on the fact that all your fields are required, unless you are OK with possibly printing things like empty tags. Remember from earlier when I said it was key?

  1. Go to Display Suite > Fields in the admin UI and create a new "Token field" name it "SEO Image" or something fun.
  2. Within that field, configure it to show up for Paragraphs of type "Node Image".
  3. In the field content, build an <img src="[token]" alt="[other_token]" ...> tag and fill in the data with values properly. You might want to brush up on tokens and reference fields with the :entity: keyword. You will need that to get the URL for the image. For the SEO fields, you can just find them in the token browser NOTE: You will need to ensure that a text format is setup that allows both HTML and tokens :)
  4. Go to your Paragraph type, and visit the Manage Display tab. On that page, at the bottom, enable the display to be "Display Suite : Reset". Save the page to reload the form.
  5. Remove all of the other fields from being enabled, and instead drag the new Token field we created to enabled. Save the form.
  6. Go look at your Test node. You should see your images rendered through that token field on the front end.

If any of this doesn't work, tweak your settings. There is a bit of a learning curve here. Webwash has done some great tutorials on all of the concepts covered if you want to do some research.

The Paragraphs experimental widget is really powerfull, for your backend UI needs of reordering and side by side you can do the following:

  1. Create a new display mode (or view mode as you might also know it) for your paragraph called "Node Image Admin".
  2. Go you your paragraph type, and under Manage Display, you can enable that view mode. Once you have this setup, you can now alter the HTML markup to build your side by side admin UI. This would vary depending on your admin theme. You could also try using Display Suite and the Field Group module to do it all in the UI, so many options really once you digest everything.
  3. The final step is going back to your "Manage Form Display" for your node type. Edit the settings (gear icon) for the Paragraphs field and set the closed display to the new view mode.

As stated, paragraphs experimental widget has drag and drop, mass drag and drop, and all kinds of features to discover. I have yet to find anyone who wants to pay for more that what you get out of it when they have been given a tutorial of how to use it. It is really on the developer to tweak it to work best for each use case.

  • How does this solve the multi-upload issue? Everything else can be done without an extra, complex, heavy-weight extension like Display Suite. – Hudri Apr 20 at 15:32
  • I just applied my patterns that I follow for the solution. You can of course extract the important bits and solve theming any way you would like. I do not understand your aversion to DS though? It's saved us thousands of hours when put into practice. As far as multi upload? Thats really not how media is designed to work. You wouldn't ever request to bulk add entire nodes because that is called an import. If I was OP, I would tell his client that he can solve it all, in less than a day using contrib, just without bulk. It's not a Drupalism to do something like this. – Ryan Hartman Apr 20 at 16:28
  • Sorry to use an extra comment. Just to drive home my point. The solution for this is to develop an entire custom module. A new custom entity type that mimics what the paragraph already does, a custom formatter for the custom field type. The whole shebang. Basically 80% of drupal core. At the end, they get to bulk add images to a page that they have to go and individually fill out anyways. This is a rabbit hole of UX troubles and weeks of work for anyone but a seasoned dev. – Ryan Hartman Apr 20 at 16:39
  • @RyanHartman, sorry it took me long to reply. I got busy yesterday and I've also tried out your answer. I really appreciate your help but unfortunately it didn't work for us. I've talked with my boss about the complexity of the issue. We wanted to try a different method, it still isn't easy for me. I think I will post it in another question. Thank you both of you and Hudri. – itsfrancisnadal Apr 22 at 13:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.