Before I start looking elsewhere, I thought i'd write here to see whether it is possible to add an option to stop the imagecache preset for this module outputting the height/width. And instead using width="100%". This would then allow for the images to switch at breakpoints, but also to flex between the breakpoints, adding a much more precise and fluid feel.

Is this on the horizon, or of interest to others. If others are interested, I can always start to think about a patch do add this option to admin somehow.

Comments

David Lesieur’s picture

David Lesieur commented

If a width of 100% is needed for your design, shouldn't it be set in the theme through CSS?

bike2live’s picture

bike2live commented

I am working on the same issue. The solution I have implemented is to override theme_image_style (I've done that in template.php) and remove the 'width' and 'height' attributes on the images when the image class = 'adaptive-image'. Then add to your .css: img.adaptive-image {width:100%;}.

The one issue I have here is that this applies to all images with the 'adaptive-image' class. I'd rather do this based on a different class that I could add to my image BEFORE it is processed by cs-adaptive-image. Unfortunately this module does not (yet) honor attributes added to an image. I'll submit a patch for that - see issue #1508626: Patch request: respect the attributes of images

I am using Omega as a base theme. This works exceptionally well in that my images scale to take up the amount of space needed. I create the sized needed for Wide, Normal, and Narrow which don't need to scale, but the images for smaller devices do.

function MYTHEME_image_style($variables) {
  // Determine the dimensions of the styled image.
  $dimensions = array(
    'width' => $variables['width'],
    'height' => $variables['height'],
  );

  $isFluid = FALSE;
  if (isset($variables['attributes']['class'])) {
    $class = $variables['attributes']['class'];
    if (is_array($class)) {
      $key = array_search('adaptive-image', $class);
      if ($key !== FALSE) {
        $variables['attributes']['class'][] = 'fluid';  // example of adding another class
        $isFluid = TRUE;
      }
    }
  }

  if ($isFluid) {
    unset($variables['width']);
    unset($variables['height']);
  } else {
    image_style_transform_dimensions($variables['style_name'], $dimensions);

    $variables['width'] = $dimensions['width'];
    $variables['height'] = $dimensions['height'];
  }

  // Determine the url for the styled image.
  $variables['path'] = image_style_url($variables['style_name'], $variables['path']);
  return theme('image', $variables);

}
star-szr’s picture

star-szr
he/him
Primary language English
commented

This should work for most browsers, not IE6 though:
img { max-width: 100%; height: auto; }

In my testing, IE6 mangles the image height most times (but renders okay every few page loads, oddly enough). I opted for display: none in IE6 :)

retrodans’s picture

retrodans commented

Resetting the height can be done from within a preprocess function to keep it within the module. This would allow us to turn on/off this functionality:

function MODULE_preprocess_image(&$variables){
  $variables['attributes']['class'][] = 'responsive100_width';
  $variables['width'] = '100%';
  $variables['height'] = NULL;
}

The issue comes in though, when we want to set a different class in different cases. I was thinking of an image style, but you can't set classes in there I don't believe.

elizarraraz’s picture

elizarraraz commented

¿what are your breakpoints for omega theme?

I try with

740px
980px
1220px

but cs_adaptive_images broken in 995px.

Thank you!