I followed the installation and configuration procedures and since it actually mentioned Omega as an example theme, I set up the break points on /admin/config/media/resp_img as adviced on http://drupal.org/project/resp_img - however, you might want to make sure you set the break points to the documented break points of your theme to have the image styles change simultaneously with your theme's break points.

At first I thought that image style switching and theme break points could never be really synchronized and I messed around a lot in forcing sizes using CSS rules. But in fact all that was wrong with my site was the fact that I had used just general break point sizes (500, 720, 900px) instead of my actual theme's break points. This is why I add this here to maybe include a notice to really look up the break points in your theme rather than just to blindly configure using some default values :-)

For Omega based themes, the suffix break points should be configured this way, taking the actual breaking points from Omega's documentation at http://drupal.org/node/819168

on admin/config/media/resp_img use the following suffix and widths (again, this only for Omega based themes):

  • suffix _narrow - 740
  • suffix _normal - 979
  • suffix _wide - 1219

With these values, Responsive Images and Styles will be in sync with Omega based themes!

Comments

Mark_L6n’s picture

Mark_L6n commented

It would be good to double-check with the author whether a '>=' or '>' comparison is used for minimum image size. If '>=' is used, the suffix widths would be:

  • suffix _narrow - 741
  • suffix _normal - 980
  • suffix _wide - 1220
attiks’s picture

attiks commented

The code uses <= but it tries to calculate how much space is taken by your browser border and scrollbars, so it might not be exact.

I'll update the project page as well.

attiks’s picture

attiks commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.