Colorbox does not popup inline media images.
Field Label Format
+ Image [Hidden] [Colorbox] Content image style: Thumbnail 80
Colorbox image style: Large (480×480)
Colorbox gallery type: Per post gallery
Colorbox caption: None
Next I insert a media image into a node, with Display: "Media library" the source of the inserted code:
<drupal-media data-entity-type="media" data-entity-uuid="289bc3bc-7bfe-480c-95d6-8175c3ee3489"></drupal-media>
When i view the node it shows a thumbnail (Thumbnail 80) and the name of the file aside (Colorbox caption: None, and all other fields are hidden) and if i click to the image it opens a separate tab - the thumbnail itself. So, there is no any popup or similar thing.
The rendered code looks like as below:
<article>
<div class="media-library-item__preview js-media-library-item-preview">
<div class="field field--name-field-media-image field--type-image field--label-hidden field__items" data-quickedit-field-id="media/6/field_media_image/hu/media_library">
<div class="field__item">
<a class="colorbox cboxElement" href="https://krixkraksz.host/sites/__test/files/styles/large/public/2021-03/chartres_bay_20_st_martin_panel_01.jpg?itok=KfB9-2qv" title="" data-colorbox-gallery="gallery-image-6-zIhkRT99-jU" data-cbox-img-attrs="{"title":"Szent Márton - Chartres katedrális ólomüveg ablakának részlete","alt":"Szent Márton megosztja köpenyét"}"></a>
<a href="/sites/__test/files/styles/thumbnail_80/public/2021-03/chartres_bay_20_st_martin_panel_01.jpg?itok=PGR0F_qn">
<img class="image-style-thumbnail-80" src="/sites/__test/files/styles/thumbnail_80/public/2021-03/chartres_bay_20_st_martin_panel_01.jpg?itok=PGR0F_qn" alt="Szent Márton megosztja köpenyét" title="Szent Márton - Chartres katedrális ólomüveg ablakának részlete" typeof="foaf:Image" width="80" height="80">
</a>
</div>
</div>
</div>
<div class="media-library-item__attributes">
</article>
So, there are:
It should be display the thumbnail and after a click show the big image in a popup...
Drupal core 8.9.13
Colorbox: 8.x-1.7 (and with 8.x-1.x git code)
----
Ok, when i move the rendered <img ... tag into the empty colorbox <a ... (and delete the second <a ..., so the edited rendered code looks like this:
<article>
<div class="media-library-item__preview js-media-library-item-preview">
<div class="field field--name-field-media-image field--type-image field--label-hidden field__items" data-quickedit-field-id="media/7/field_media_image/hu/media_library">
<div class="field__item">
<a class="colorbox cboxElement" href="https://krixkraksz.host/sites/__test/files/styles/large/public/2021-03/st-thomas-aquinas.jpg?itok=rJd7WbdR" title="" data-colorbox-gallery="gallery-image-7-PHSoyJbnIDU" data-cbox-img-attrs="{"title":"Aquinoi Szent Tamás","alt":"Aquinói Szent Tamás"}">
<img class="image-style-thumbnail-80" src="/sites/__test/files/styles/thumbnail_80/public/2021-03/st-thomas-aquinas.jpg?itok=lrF_sLTG" alt="Aquinói Szent Tamás" title="Aquinoi Szent Tamás" typeof="foaf:Image" width="80" height="80">
</a>
</div>
</div>
</div>
<div class="media-library-item__attributes">
</article>
... then the popup works.
Closed: works as designed
2.0
Code
Not all content is available!
It's likely this issue predates Contrib.social: some issue and comment data are missing.
From what I can tell in the Drupal 10 CKEditor media plugin, you need to set the colorbox parameters on the default display, not the media library display. When I did that, everything worked as expected.