Score:-2

Colorbox and complex modals

do flag

Is it possible to make the colorbox popup take more complex content than just an image and a caption?

On a drupal 9 site I have been asked to modify a simple colorbox gallery to include a long/formatted Caption/story and a title in a responsive two-panel pop-up.

Is such a thing even possible or am I better of building something like this from scratch or with something else?

to expand on the format:

  1. View showing a custom media type with several fields
  2. Each popup should contain 3 fields - A Title, A Story and an Image
  3. Should be a responsive two-column (Image + Story) at desktop to Image on top of story on mobile

What I really want is colorbox to act as a formatter for an entire entity and then be able to template the content it injects into the pop-up

leymannx avatar
ne flag
What colorbox? Everything is possible.
do flag
Any more details? From my reading of the documentation and module issue list, it appears this may not be possible with Drupal 9 Colorbox.
Score:1
do flag

After a few days of pain I think I have a solution. In case it is of use to anyone else.

Firstly: Colorbox 2.0 (Drupal 9/10 version) cannot load entities. By default, it is only an image formatter. From the project site:

Colorbox for Drupal 8 is an image field formatter and nothing more, or less.

Solution 1: HTML Formatted Media type Caption

It is possible to have colorbox load a Media entity image field and pass another custom field as the caption. With some tweaking, you can get html working as well. This can be setup on the entity display settings or in a view (as a formatter for the image field). It is not very flexible. The caption will, by default, also be the image title which can cause issues if you are loading html. You will probably also need to fiddle with the allowed html tags in the colorbox module's settings.

If that is what you need, that is doable. If you need anything more complex read on.

Solution 2: Adding full entities

There is a mobule that extends colorbox to allow the loading of entities it is called Colorbox Entity Display

It doesn't completely integrate with colorbox. In order to have the entity load you need to add a class to a link.

It DOES NOT work for media entities; at least I couldn't get it to work. You will need to make a normal content type and configure it to look how you want it to appear in the modal.

Colorbox will attempt to load the node portion of the content so you can just override the node template with whatever format you want.

The process for getting entities into a view based photo gallery is:

  1. Create view with at least - Image field, Link to content (as text and hidden), field for link title (hidden)
  2. Re-write the output of the image field as a link and pass the two other fields as well as the custom colorbox-entity class to the link.

After that, you should have a colorbox gallery with the ability to load entities into the modal.

I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.