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?

3 Answers 3


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.

  • OK, the readme file says that my node should be in $image_context['entity']. However, I'm trying to debug the content of this object to firebug with the following code: firep($image_context['entity']);return TRUE; but there's nothing. Also tried to print_r out this object, nothing happened. I'm completely lost. :-(
    – somlaig
    Mar 20, 2013 at 22:56
  • 1
    use Devel in general for debugging in Drupal and dpm() or dsm() your context ;).Or maybe you could try a PHP IDE like PhpStorm and insert breakpoints in your code. PHP debugging on the browser sounds a bit weird, i know there are tools for that, but im not going to even try it.I will try to come back with a custom PHP effect example
    – Pan Chrono
    Mar 21, 2013 at 8:08
  • Yeah, finally, dpm() works perfectly for finding my custom node attribute, but now I'm stuck on altering the image style. Should I use image_effect_apply() on $image with a composed effect array? I'll try this...
    – somlaig
    Mar 24, 2013 at 22:00

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.


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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.