Plugin

Developer
Supported

CE Image

ExpressionEngine 1.x, ExpressionEngine 2, ExpressionEngine 3

Back to this add-on's main page
View Other Add-ons From Causing Effect

     

You must be logged in to post.

Multiply onto background color?

Support (Resolved)

David Guillory
David Guillory

I’m attempting to take a photo from a field, make it grayscale, and multiply it onto a solid background color at 50% opacity (see attached for original and processed).

I’ve tried coming at it a few different ways, and this is the best I’ve managed to come up with:

{exp:ce_img:pair
   src
="{photo_field}"
   
filter="grayscale|opacity,50"
   
max_width="200"
   
quality="100"
   
parse="inward"
}
   {exp
:ce_img:single
      src
="{photo_field}"
      
width="{width}"
      
height="{height}"
      
filter="opacity,0"
      
bg_color="#4499bb"
      
watermark="{made}|0,0|100|||multiply"
      
quality="85"
   
}
{
/exp:ce_img:pair} 

It works fine, but the processing seems to be pretty expensive, so I’m wondering if there’s a more efficient, straightforward approach to accomplishing the same thing?

Causing Effect - Aaron Waldon
# 1
Developer
Causing Effect - Aaron Waldon

Hi David!

I would expect such complex manipulations to be expensive. The one improvement I can see would be to get rid of the step of processing and hiding the inner photo. Instead, you may consider creating a 10px by 10px png image. Something along these lines should work:

{exp:ce_img:pair
   src
="{photo_field}"
   
filter="grayscale|opacity,50"
   
max_width="200"
   
quality="100"
   
parse="inward"
}
   {exp
:ce_img:single
      src
="/path/to/clear.png"
      
width="{width}"
      
height="{height}"
      
allow_scale_larger="yes"
      
crop="yes"
      
bg_color="#4499bb"
      
watermark="{made}|0,0|100|||multiply"
      
quality="85"
   
}
{
/exp:ce_img:pair} 

Does that make sense?

David Guillory
# 2
David Guillory

Perfect sense, yes, thanks much for the reply. I had tried using a clear PNG at one point, but it wasn’t working correctly – turns out I was missing the allow_scale_larger=“yes” parameter. I also added on save_type=“jpg” to keep the final image from being a PNG, and the whole thing is much faster on the initial processing now. Thanks!

Causing Effect - Aaron Waldon
# 3
Developer
Causing Effect - Aaron Waldon

Excellent idea to save the image as a jpg. I’m glad you are seeing better results now. :)