Incorrect colorbox class on thumbnail with colorbox

Created on 4 February 2022, almost 3 years ago
Updated 8 February 2024, 10 months ago

Problem/Motivation

The Colorbox module recently released 7.x-2.16. A side effect of this change is that the video embed field's link construction for thumbnails with colorbox, which was always incorrect but happened to work, is now broken. The link has both "colorbox" and "colorbox-load" classes. Only the "colorbox-load" class should be provided.

Steps to reproduce

1. Ensure Colorbox 7.x-2.16 and the latest 7.x version of video_embed_field are installed.
2. Create a content type with a video embed field. Set the display mode of the video embed field to "Thumbnail Preview w/Colorbox".
3. Create a node and specify the url of a youtube video in the video embed field.
4. Display the node and click on the thumbnail.
5. Expected behavior: the video should display in a colorbox. Instead, the video does not display, and a colorbox appears with "This image fails to load."

Proposed resolution

Remove the "colorbox" class from the thumbnail link, and only use "colorbox-load".

Remaining tasks

Patch attached.

🐛 Bug report
Status

RTBC

Version

2.0

Component

Video Embed Field (base module)

Created by

🇺🇸United States paulmckibben Atlanta, GA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇮🇳India arif.zisu Kolkata

    Below code fix issue for me

    diff --git a/docroot/sites/all/modules/colorbox/js/colorbox.js b/docroot/sites/all/modules/colorbox/js/colorbox.js
    index cd7cf55e..f1d5cae1 100644
    --- a/docroot/sites/all/modules/colorbox/js/colorbox.js
    +++ b/docroot/sites/all/modules/colorbox/js/colorbox.js
    @@ -33,15 +33,19 @@ Drupal.behaviors.initColorbox = {
    .once('init-colorbox').each(function(){
    // Only images are supported for the "colorbox" class.
    // The "photo" setting forces the href attribute to be treated as an image.
    - var extendParams = {
    - photo: true
    - };
    - // If a title attribute is supplied, sanitize it.
    - var title = $(this).attr('title');
    - if (title) {
    - extendParams.title = Drupal.colorbox.sanitizeMarkup(title);
    + if ($(this).hasClass('embed-video')) {
    + $(this).colorbox(settings.colorbox);
    + } else {
    + var extendParams = {
    + photo: true
    + };
    + // If a title attribute is supplied, sanitize it.
    + var title = $(this).attr('title');
    + if (title) {
    + extendParams.title = Drupal.colorbox.sanitizeMarkup(title);
    + }
    + $(this).colorbox($.extend({}, settings.colorbox, extendParams));
    }
    - $(this).colorbox($.extend({}, settings.colorbox, extendParams));
    });

    $(context).bind('cbox_complete', function () {
    diff --git a/docroot/sites/all/modules/video_embed_field/video_embed_field.module b/docroot/sites/all/modules/video_embed_field/video_embed_field.module
    index 7e9bedd5..81e79736 100644
    --- a/docroot/sites/all/modules/video_embed_field/video_embed_field.module
    +++ b/docroot/sites/all/modules/video_embed_field/video_embed_field.module
    @@ -555,7 +555,8 @@ function video_embed_field_get_ajax_url($video_url, $video_style) {
    'attributes' => array(
    'class' => array(
    'colorbox-load',
    - 'colorbox'
    + 'colorbox',
    + 'embed-video'
    ),
    ),
    'query' => array(

Production build 0.71.5 2024