Is it possible to use image_style_url with an adaptive image style and, if so, how? Here's the code i'm using:

<img src="<?php print image_style_url('my_adaptive_style', 'public://path/to/image.jpg'); ?>" />

which is producing this markup:

<img src="http://example.com/sites/example.com/files/styles/my_adaptive_style/public/path/to/image.jpg" />

Notice it's not creating the necessary break point directory (1024, 960, whatever). It should look something like:

<img src="http://example.com/sites/example.com/files/styles/my_adaptive_style/public/path/to/1024/image.jpg" />

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

pariyawansa’s picture

I have the same issue. Could some one please help?

How can we use adaptive image module to display different size of images on on desktop, tablet and on iphone?

johnny5th’s picture

I have the same issue using image_style

print theme('image_style', array('style_name' => 'full_page_image', 'path' => $content['field_image']['#items'][0]['uri'], 'alt' => $content['field_image']['#items'][0]['alt']));

This pushes out /sites/default/files/styles/full_page_image/adaptive-image/public/field/image/Williams%20Closing%20120614%20010.JPG

attheshow’s picture

I was having this same issue and ended up changing my template so that it printed out the image URL via views (using the image style) I had set up.

n1k’s picture

#1
What do you mean by different sizes? The breakpoints should be set unless the imagestyle was overwritten which means normally the sizes should change with different resolutions (not depending on window-size).

Basically you are overriding the "style_name", this causes the detection in the module to fail (adaptive_image.module, line 172).

rjacobs’s picture

Looking at the code in the dev version it seems like the adaptive styling will only apply for output that's gone through theme('image', $vars)? Can anyone verify this? I say this as it looks like all the special scaling logic is initiated through adaptive_image_preprocess_image(). Perhaps this would explain why simply calling image_style_url() (without later passing the returned url through theme('image')) will not work?

I'm maintaining a module that needs to extract styled image URLs for output in XML (currently I just use image_style_url() for this), and therefore does not do any theming on the image output. I'm assuming that because I'm not theming my output there is no way for my module to take advantage of adaptive_image?

peter.thorndycraft’s picture

I'm having this problem also. Is there a way to get this working when the image is printed using image_style_url()??

Pizzutz’s picture

I just ran into the same issue myself and took a deeper look.

Essentially, after calling image_style_url you need to post-process the url in the same way that adaptive_image_preprocess_image does. image_style_url grants the token to create the image, but to get it generated and used, you need to modify the url to use the proper resolution using the adaptive_image helper functions, or to it's generator function so that adaptive_image can create the image.

The following is ugly, but works. There should really be a function adaptive_image_style_url($style, $path){} in the module that implements this.

<?php
$style_name='my_style';
$uri = 'public://myimage.png';
$path=image_style_url($style_name, $uri);
global $base_url;

$style = image_style_load($style_name);
if (!$style || !adaptive_image_contains_effect($style)){
    $url = $path;  //adaptive image isn't set for this style
}
$settings = adaptive_image_effect_settings($style);
$resolutions = explode(',', $settings['resolutions']);
$resolution = adaptive_image_resolution($resolutions);
if (!strpos($path, '/system/') && is_numeric($resolution)) {
    $path_parts = pathinfo($path);
    $derivative_uri = $path_parts['dirname'] . '/' . $resolution . '/' . $path_parts['basename'];
}
if (isset($derivative_uri) && file_exists(str_replace($base_url, '.', $path_parts['dirname'] . '/' . $resolution . '/' . array_shift(explode('?', $path_part['basename']))))) {
    $url =  $derivative_uri;
} else {
    $url =  str_replace("styles/$style_name", "styles/{$style_name}/adaptive-image", $path);
}
$new_path = $url;
?>
Reg’s picture

Issue summary: View changes

I looked using image_style_url and it didn't make sense. I opted to create the following function and the just call it where I want it.

/**
 * Returns the HTML of a field on a node from a node's internal Id.
 * Set an image field up with an adaptive style and use this to render it.
 *
 * @param integer $nid
 * @param string $field_name
 * @param string $style
 * @return HTML
 */
function adaptive_image_style_field($nid, $field_name = 'field_image', $style = 'default') {
  $node = node_load($nid);
  $field = field_view_field('node', $node, $field_name, $style);
  return drupal_render($field);
}
a_roc636’s picture

I was able to get it working after a couple hours of playing with comment #7's code. Here is what I did step by step to get it going.

1. Put this in my template.php file

/**
 * Allows you to use image_style_url() for adaptive images.
 */
function powerbar_adaptive_image_url_style($style_name, $uri ){

  $path=image_style_url($style_name, $uri);
  global $base_url;

  $style = image_style_load($style_name);
  if (!$style || !adaptive_image_contains_effect($style)){
      $url = $path;  //adaptive image isn't set for this style
  }
  $settings = adaptive_image_effect_settings($style);
  $resolutions = explode(',', $settings['resolutions']);
  $resolution = adaptive_image_resolution($resolutions);
  if (!strpos($path, '/system/') && is_numeric($resolution)) {
      $path_parts = pathinfo($path);
      $derivative_uri = $path_parts['dirname'] . '/' . $resolution . '/' . $path_parts['basename'];
  }
  if (isset($derivative_uri) && file_exists(str_replace($base_url, '.', $path_parts['dirname'] . '/' . $resolution . '/' . array_shift(explode('?', $path_part['basename']))))) {
      $url =  $derivative_uri;
  } else {
      $url =  str_replace("styles/$style_name", "styles/{$style_name}/adaptive-image", $path);
  }
  return $url;

}

2. Put this in the img src or background img url attribute to get it working. Don't forget to put it in between the php brackets, code goes here
print powerbar_adaptive_image_url_style('recipe_image', $row->field_field_recipe_image[0]['rendered']['#item']['uri']) // This is what I used
powerbar_adaptive_image_url_style($style_name_goes_here, $uri_goes_here ) // This is the info that you need to use, your style name and uri will be different than what I used.

3. Dont forget to clear the cookie and refresh the page to see the adaptive image, I kept forgetting to clear the cookie and probably could have had it working sooner.

4. I also edited the cookie script in the adaptive_image.module to detect the window size and not the screen size, you can do this by using this code. It's inside the adaptive_image_init() function.

$js = "document.cookie = 'adaptive_image=' + Math.max(window.innerWidth, window.innerHeight) + '; path=/';";
vasike’s picture

Version: 7.x-1.4 » 7.x-1.x-dev
Category: Support request » Feature request
Status: Active » Needs review
FileSize
4.51 KB

i think this is a feature request and i also think it could help in many cases where we need to get the right url for styles that uses adaptive image effects.

And here is patch that move the code from adaptive_image_preprocess_image() to a helper function adaptive_image_get_adaptive_image_path()
And with this function build a new "helper" function to get the url using the core image_style_url() within
The new function that could be used is adaptive_image_style_url().

I hope it works and helps.