Images display in the wrong size.

If i'm using colorbox media as a file field and scalePhotos = true it is not working. The image is still bigger than the container around.

Where is the setting 'scalePhotos' coming from? I am not familiar with that setting.

ScalePhotos is a setting in colorbox plugin and by default = true (http://www.jacklmoore.com/colorbox).
To see how this effect works please go to http://www.jacklmoore.com/colorbox/example1/ and click on an example of "No Transition + fixed width and height (75% of screen size)". If you have a small web browser window the picture and overlay window have always a suitable size.

But media colorbox always shows native image sizes so the picture is cropped because the overlay window fits correctly.

This colorbox effect works without problems if you are using an image field instead of a file field for media colorbox. It could be related to #1514380: onclick event on img tag not working

This is actually not going to be that straightforward to support and would be a feature more than a support request. Media Colorbox always assumes that it is going to display the 'view mode' of a file entity to include any possible fields that may be included for the chosen view mode. For example, if you have added 3 fields to the Image File entity type and chosen all three of those fields to be displayed for the view mode chosen for the colorbox overlay output, then the you will have several HTML elements displayed as the Colorbox content and not just an image. So, you wouldn't be able to scale just the image and have everything fit if you had text fields to display as well. There may also be the case where you have several different file entity types (audio, video, and images) as part of the same file field and displayed as a gallery in the Colorbox - scalePhotos would not apply to the audio or video very well if at all. If you know what size you want your Colorbox to be, then just create a custom Image Style and apply to your chosen Colorbox display view mode for the image file type - this seems like a better approach to me anyways as artificial scaling of images in the browser is typically not the best approach for users with limited bandwidth or for general frontend performance.

Hi, i have the same "feature request" ;-)

I understand here that this is outside of the scope of this module, but i can't find a way to do this:
- have a rendered thumbnail entity (for exemple image + description) as colorbox link
- when user clicks > overlay shows image only, with the colorbox "scale" feature

I guess this is not so hard to do this in view, but i need to do this at a node level.
I've tried lots of things with fields and display suite for example and i'm now searching to resolve this with template files where i could manually insert a link with colorbox-load class. But i can't find any file.tpl.php or equivalent. Any idea ?

Checker, have you found a solution to this ?

Thanks !

is there something i could do in media_colorbox.page.inc to force the output of normal image style in the overlay ?

If you are using the field formatter, then just set 'Dimensions' setting to be empty and the colorbox will resize to fit the image.

With RC2 the 'Dimensions' setting is gone for the field formatter settings. Now there are 'Fixed Width' and 'Fixed Height' settings, if you don't set these, then the Colorbox will resize to fit the image.

kmadel, i'm using RC3 of media_colorbox. My 'Fixed Width' & 'Fixed & Height' settings are empty but the colorbox don't resize correctly for images. Im using a field with mixed types (image & vimeo). For the Video, the Colorbox resize just fine. For the images wich are sometimes quite large (3072x1728) the colorbox appears with a vertical scrollbar. it seems that the colorbox is resizing, but only for the width.

Have the same problem. Is there any soltuion exists?
As I see, when colorbox shows normal image, it contains only image file, but with media field we have full html page, that located at /media_colorbox/[fid]/media_original/und
So we must resize image into it manually via some javascript or other way, but I can't find working method at now.

I have found some sort of workaround for this.

Basicly the issue is that colorbox has issues with URL's like 'media_colorbox/156/media_original/en'. It can't correctly determine (and thus scale) the dimensions of the image. I'm not sure if this is colorbox's or media module's 'fault', but it looks like the image is served with the incorrect mime type.

Anyway, a way to prevent this is to point to the URL of the actual image, instead of the media module's callback.

I did this in the theme_media_colorbox function:

   $fview = file_view($file, $settings['file_view_mode'], $variables['langcode']);
   $new_path = file_create_url($file->uri);
   ...
   //'path' => $variables['path'],
    'path' => $new_path,

After this resizing works correctly.

Cleaned up, the whole function then becomes:

function YOURTHEME_media_colorbox($variables) {
    $entity_id = $variables['entity_id'];
  $file_id = $variables['file_id'];
  $field = $variables['field'];
  $field_name = isset($field['field_name']) ? $field['field_name'] : '';
  $settings = $variables['display_settings'];

 //switch to figure out where caption should come from
  switch ($settings['colorbox_caption']) {
    case 'title':
      $caption = $variables['title'];
      break;
    case 'mediafield':
      $caption = $variables['media_colorbox_caption'];
      break;
    default:
      $caption = '';
  }

  // Shorten the caption for the example styles or when caption shortening is active.
  $colorbox_style = variable_get('colorbox_style', 'default');
  $trim_length = variable_get('colorbox_caption_trim_length', 75);
  if ((variable_get('colorbox_caption_trim', 0)) && (drupal_strlen($caption) > $trim_length)) {
    $caption = drupal_substr($caption, 0, $trim_length - 5) . '...';
  }

  // Build the gallery id.
  switch ($settings['colorbox_gallery']) {
    case 'post':
      $gallery_id = 'gallery-' . $entity_id;
      break;
    case 'page':
      $gallery_id = 'gallery-all';
      break;
    case 'field_post':
      $gallery_id = 'gallery-' . $entity_id . '-' . $field_name;
      break;
    case 'field_page':
      $gallery_id = 'gallery-' . $field_name;
      break;
    case 'custom':
      $gallery_id = $settings['colorbox_gallery_custom'];
      break;
    default:
      $gallery_id = '';
  }

  //load file and render for select view mode
  if($file_id!=NULL){
   $file = file_load($file_id);
   $fview = file_view($file, $settings['file_view_mode'], $variables['langcode']);
   if ($file->type=='image'){
     $variables['path'] = file_create_url($file->uri);
   }
   $text = drupal_render($fview);
  }elseif(isset($variables['item'])) {
   $text=drupal_render($variables['item']);
  }
  //strip anchor tags as rendered output will be wrapped by another anchor tag
  //fix for issue #1477662
  $stripped_text = media_colorbox_strip_only($text, 'a');
  $output = theme('link', array(
    //'text' => drupal_render($variables['item']),
    'text' => $stripped_text,
    'path' => $variables['path'],
    'options' => array(
      'html' => TRUE,
      'attributes' => array(
        'title' => $caption,
        'class' => 'media-colorbox ' . $variables['item_class'],
        'style' => $variables['item_style'],
        'rel' => $gallery_id,
        'data-mediaColorboxFixedWidth' => $settings['fixed_width'],
        'data-mediaColorboxFixedHeight' => $settings['fixed_height'],
        'data-mediaColorboxAudioPlaylist' => $settings['audio_playlist'],
      ),
    ),
  ));

  return $output;
}

The theme function in #11 also fixed this problem for me. My images are correctly resized now. Before this function, only the width was resized. Thanks for posting this work-around!

@K3vin:

Just created an account to thank you! Code from #11 effectively solved the problem, which had me pulling my hair for the past days trying to fix it myself with no success.

Now, this "feature" definitively should be added to the module, maybe as a configurable option, since one of the most common uses for ColorBox is displaying images, and right now that's just broken. It makes no sense!

#11 worked for me as well.

It also fixed an issue I was having where some images had tiny heights in colorbox (this issue I think #1909030: Colorbox very, very small when clickin on image).

Thanks!

Thanks K3vin! The fix has been committed.

I had to revert this commit as this theme override breaks the displaying of captions and other custom fields.

It also brakes contextual links.