1

I'd like to 'darken' an image using the Imager plugin. How would I go about doing this?

I'll explain the exact effect I'm after in Photoshop terms: I have an image on one layer, then I create a new layer above it and fill it with black. I then change the opacity of the black layer to 40%. This is the end result that I'm trying to achieve with the Imager plugin (ImageMagick is available too).

I realise I could add a div with a black background over the images and change the opacity of this div, but I think it would be nicer if I could do this with the Imager plugin instead if this is possible.

This is the closest I've managed to get so far, but it doesn't quite match what I'm seeing in Photoshop:

{% set image = block.image.first() %}
{% set transformedImage = craft.imager.transformImage(image, { 
  width: 1500,
  height: 700,
  effects: {
    vignette: ['none', 'black', 3],
    modulate: [100, 80, 100],
    gamma: 0.7 }
}) %}

Thanks in advance for any help with this.

2
  • Do you have some kind of blend mode on the black layer, or is it just a normal semi-transparent layer on top of the image? Commented Apr 12, 2017 at 14:53
  • Hi André, it was just a normal semi-transparent layer on top of the image. No blend modes were used. I then reduced the opacity of this black layer to 40% and this is the result I was trying to reproduce.
    – Stephen
    Commented Apr 12, 2017 at 14:56

1 Answer 1

1

Seems like you might be better using colorBlend?

{% set image = block.image.first() %}
{% set transformedImage = craft.imager.transformImage(image, { 
  width: 1500,
  height: 700,
  effects: {
    colorBlend: ['rgb(0, 0, 0)', 0.4] }
  }
}) %}
1
  • Hi Seth, thanks for the suggestion. I've just tried this, but it didn't seem to make the image darker, unfortunately. It just seemed to desaturate the image a bit.
    – Stephen
    Commented Apr 11, 2017 at 9:18

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.