How to alter image style based on product custom attribute?

Question

I'm building a webshop based on Ubercart, and products have a custom attribute "sold out". When this attribute is checked, all product images should be displayed with a semitransparent overlay textbox: SOLD OUT. Theoretically, I found a couple of promising options, but none of them seems to me satisfying:

1. Using node--product.tpl.php to insert a custom overlay div around the rendered image. This is a very fragile solution, because I cannot put the overlay div inside the main-product-image div. Therefore, it's hard to make it responsive, and on the other hand, cross-browser issues might raise because of the opacity...

2. Adding a new image style and overriding theme_uc_product_image function. Since style_name is hardcoded here as 'uc_product', it is obvious to override this. But no node array is available here to decide whether to override image_style or not. Maybe a custom sql query?

3. Manipulating the default uc_product image style from code with hook_image_styles_alter function. Same problem: no node array here.

Any idea?

Answer 1

You could use ImageCache Actions module and write your PHP field condition right on the generation of the image.

Custom Actions effect is what you need.

Answer 2

Finally I managed to solve the problem.
Steps are as follows:
1. Create a distinct image style for the overlay text (you'll need imagecache actions module). You can also add background png for the text with the watermark effect.
2. Add a custom action effect for uc_product style. This is a built-in style used for ubercart product display.
3. Put the code into the custom action:

if ($image_context['entity']->field_product_sold_out['und']['0']['value']) { // this is my custom node attribute  
  if ($preset = image_style_load('sold_overlay')) { //sold_overlay is my image style for the overlay text  
    foreach ($preset['effects'] as $effect) { //cycle through all effects of the style  
      image_effect_apply($image, $effect); //apply the style  
    }  
  }  
}  
$style = image_style_load('uc_product');  
image_style_flush($style); //you'll also need to flush the media cache  
return TRUE;

Note that you'll need PHP Filter module enabled to put the code in the textarea.

And that's all. From now on, all images displayed with uc_product style will run the code above.

Perhaps this is not the most brilliant solution, but works. ;-) Comments are welcome.

Answer 3

Check this, I have an image field with a default image style. How to alter that style:

/**
 * Implements gc_histories_paragraph_view().
 */
function gc_histories_paragraph_view(array &$build, Drupal\Core\Entity\EntityInterface $entity, \Drupal\Core\Entity\Display\EntityViewDisplayInterface $display, $view_mode) {
  if ($entity->bundle() == 'one_image' && $view_mode == 'default') {
    $build['field_oi_image'][0]['#image_style'] = "history_1140_{$entity->get('field_paragraph_image_height')->value}";
    // ksm("history_1140_{$entity->get('field_paragraph_image_height')->value}");
  }
  else if ($entity->bundle() == 'one_image_with_text' && $view_mode == 'default') {
    $build['field_oiwt_image'][0]['#image_style'] = "history_560_{$entity->get('field_paragraph_image_height')->value}";
    // ksm("history_1140_{$entity->get('field_paragraph_image_height')->value}");
  }
  else if ($entity->bundle() == 'two_images' && $view_mode == 'default') {
    $imageStyle = "history_560_{$entity->get('field_paragraph_image_height')->value}";
    $build['field_ti_images'][0]['#image_style'] = $imageStyle;
    $build['field_ti_images'][1]['#image_style'] = $imageStyle;
    // ksm($imageStyle);
  }
  else if ($entity->bundle() == 'two_images_with_text' && $view_mode == 'default') {
    $imageStyle = "history_370_{$entity->get('field_paragraph_image_height')->value}";
    $build['field_tiwt_images'][0]['#image_style'] = $imageStyle;
    $build['field_tiwt_images'][1]['#image_style'] = $imageStyle;
    // ksm($imageStyle);
  }
  else if ($entity->bundle() == 'three_images' && $view_mode == 'default') {
    $imageStyle = "history_370_{$entity->get('field_paragraph_image_height')->value}";
    $build['field_th_images'][0]['#image_style'] = $imageStyle;
    $build['field_th_images'][1]['#image_style'] = $imageStyle;
    $build['field_th_images'][2]['#image_style'] = $imageStyle;
    // ksm($imageStyle);
  }
}