Colorbox Integration for Media Entity Flickr

Thank you @jack_ry. I'm displaying Flickr images as Media items in Views, and I can't work out a way to apply your suggestions in that scenario. I tried adding those classes in Style Settings in my View but unfortunately the Flickr iFrame just appears full size, not in a modal.

I would prefer the full Flickr iFrame, rather than just an embedded image, but I would be happy with the latter, as I am adding all necessary attribution in other ways. My workaround for the time being is to apply Colorbox to the thumbnail field, which allows me to display the full size image in a Colorbox modal window, but I want the full size image to be hosted by Flickr, not by my server. Maybe there's a way to add a remote image from a generic image URL as a Media entity, but I can't find it.

Below is a sample Flickr embed code, exactly as I have been using. How should I change this to achieve what you suggest?

<a data-flickr-embed="true" href="https://www.flickr.com/photos/73735208@N04/6767670363/in/photolist-bj35BM-iKQQcf-bpcg5t-bo4RE-eeow2b-9Bhz1-dxBvdv-dbYXSM-DKJop-agMcZc-xjizw-J77vk-dbZ89t-b6tSi-9abTLo-RmF6QT-6xcFLL-5xxHBz-dbYMHv-dbZmrh-bV2MET-dbYBVc-4CFGLU-9KFHqq-dWTZe-ab4F2L-CB8wEf-aK17o-EfPcGW-dKT78-dKQEL-TdQL4Y-349S1-DcVtYt-CnNZ9M-LpajLv-CLGyUz-LmwCnE-xZSCn3-L5CRJS-Lw4VUv-P4NVcM-sARtKj-oasmip-o8HoB9-kTHymC-ccp3GC-bUYNYq-butxBN-8ZheXb" title="African safari - Photo Montage 2012"><img src="https://farm8.staticflickr.com/7019/6767670363_e5dbd640f7_o.jpg" width="900" height="600" alt="African safari - Photo Montage 2012"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

Thank you. Your code got a bit mangled. Anyway, I've got this working for images from any external provider, not just Flickr, using this simple code:

<a href="IMAGE-URL" class="colorbox cboxElement" title="TITLE-TEXT"><img src="IMAGE-URL" alt="ALT-TEXT"></a>

Then in my CSS for my View I have this, to reduce the give a thumbnail effect to the non-Colorbox images:

.colorbox img {
    max-width: 200px;
    max-height: 200px;
}

To be clear, I'm still using the Media Entity Flickr module to do this.

3 drawbacks to this are:

1. I can't think of a way to use a real thumbnail, so the full size images are always loading here, which is generally slow.
2. I don't think it's possible to use image grouping, so that the image appears in a post or page gallery (i.e. click through all images from the Colorbox window).
3. I don't think a custom Colorbox caption with tokens is possible.
4. Manually entering the code is a bit messy, and not something that you'd want to trust to regular users.

Anyway, at least the remote servers fund the bandwidth now, and not mine :)

As an aside, I am puzzled why there are these provider-specific Media Entity modules for Flickr, Instagram etc., but none for a generic provider, that would cover images from any URL. I did ask about that here and here, but no joy.

@dakku Thanks for that. Sorry for the slow reply. I did install it but I don't think it really helps my situation because of the way I've built my site using Media entities.

I have been hacking this stuff around for hours today to try and get a solution. I looked at pulling your new Colorbox support from the Flickr module into this module, and alternatively at somehow porting the Colorbox support from the Video Embed Field module. Colorbox support seemed to be achieved in very different ways in both. The latter seemed like a reasonable bet because it supports D8, Media & Colorbox, so I was hoping I could effectively drop a Flickr iFrame in place of the YouTube/Vimeo iFrame.

What I'm hoping is that the full Flickr embedded iFrame (with branding) could appear in a Colorbox window, so that the required attribution and link back to Flickr are handled automatically. Also hoping that "Gallery (image grouping)" is supported, so that it's possible to click from image to image without closing the Colorbox. But I fear these 2 wishes might be incompatible (there does not seem to be Gallery support in Video Embed Field).

I've also been trying to create a generic "Media Entity Remote Image" module that simply provides a media entity for a generic remote image from any site or server (not just Flickr, Instagram, Imgur) that supports hotlinking. I'm a little surprised that such a thing doesn't exist yet.

I'm not a programmer and haven't had success with any of this yet. It's pretty important for my project, so I do have a budget to sponsor some of this development if you or anyone else is interested.