Installed Core/Theme/Modules:

  • Drupal 7.15
  • Omega 7.x-3.1
  • Borealis 7.x-1.0-rc5
  • Views 7.x-3.5
  • Views Column Class 7.x-1.0-alpha1
  • Devel 7.x-1.3

Steps to reproduce

  1. Enable Omega and set as default theme
  2. Disable Omega's debugging blocks (so that the responsive grid works correctly)
  3. Enable borealis, borealis_ri, views, views_ui and views_column_class
  4. Create an image style "big" which scales and crops to 500x350
  5. Create a handful of articles with Devel Generate
  6. Create a view
    • Format: Views Column Class
    • Settings:
      • Row Class: grid-4
      • Number of columns: 3
    • Show Fields
      • Title
      • Image
        • Image Style: big
    • Filter:
      • Type: Article
    • (Save)

Now when you view the page, the articles are responding, but the images are not. Once you resize the browser to a single column, the image do start to scale, even when the browser is returned to full screen.

Here's a video (2:44) showing exactly what it looks like.
http://screencast.com/t/hBROcELY9

I decided to also create a feature module that creates the image style and view so that you don't have to do that setup yourself, so that's attached.

CommentFileSizeAuthor
responsive_image_grid_borealis_and_vcc-7.x-1.0-beta1.tar_.gz2.03 KBbjlewis2
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Snugug’s picture

Snugug CreditAttribution: Snugug commented

Unfortunately, I don't have the resources to build an install from scratch to test this. Do you have a dev server you can point me to to look at this?

bjlewis2’s picture

bjlewis2 CreditAttribution: bjlewis2 commented

Yeah, I set it up on pantheon. I'll email you the link with login info.

Now it's doing something really weird, where sometimes it works perfectly, but then I scale it and all the images go away entirely. Then I scale it again, and some come back or they all come back. And when I refresh the page, sometimes they're there, and sometimes they're not. And still others, the images will load, and then go away...

Weird...

marcoka’s picture

marcoka CreditAttribution: marcoka commented

may it be related to this. i read the code and found

//////////////////////////////
// Borealis Responsive Images
//
// Loop over each image, and change their source depending on parent width
// We swap the next size images in at 90% of the current image's actual width to help 
//  ensure a smooth flow between images by allowing for a buffer between sizes.
//////////////////////////////