<solved> Modify the "Advanced configurator for customized product" Module

[Glasdesign2000]

Hello dear community,

i am hopefull you can help me to solve a problem.

I work with the modul "Advanced configurator for customized product" to to give our customers the opportunity to put their own fotos & images on glassdoors & glass pictures.

You can see here: https://www.glastueren24.de/tuergestaltung/glastuer-designer/

Now i try to modify the modul for a other thing, we want to do the same for laser engraving for the same product. But it will be much better if the preview of the picture can be transformed to black & white like you see here https://www.lasermemories.de/schieferplatte-dieses-haus-bewacht-mit-kordel-mit-eigenem-bild-las-2030k-wach-dog1-1230000.html

I find that css rule:

img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

But i don't know how to implement it in that way that as a option, so that only some products use that rule and other products like foto print are still coloured.

Can anyone help me please?

 

I thank you very much : )

Best regards

Daniel

 

 

Edited February 17, 2020 by Glasdesign2000 (see edit history)

[wmunich]

a) providing a paid module in a public forum for free downloading is very bad. the developer will thank you very much. remove that!
b) try

.ctd_image_preview {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

 

[Glasdesign2000]

Sorry Sorry i don't think about @wmunich

I thank you really much, i will try it asap and came back.

Greetings Daniel

 

[Glasdesign2000]

Hi, (again)

but still have the problem, if i implement it in that way, the module use it for all products. We have few products using this modul and only one part of the should be used for lasers. The Fotoprint Products should use the preview whith colored images.

Can you please help me to solve this problem, too?

Thank you very much for help & have a great day

Greets Daniel

[wmunich]

If you want to have this only on certain products i would extend the product.tpl, like

{if $product->id == 4711}
<style>
.ctd_image_preview {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
</style>
{/if}

alternate it would work with javascript and the query of the product id in the body class but I would have to try it myself

[Glasdesign2000]

You're the Hero @wmunich your Code works perfect, i just had ad a !important to the last filter but now it works really fine =)

I Thank you so much.

Greets Daniel