-
Posts
-
Hi guys, is it somehow possible to automatically define the overlay image of a slide in the “fullwidth easy slider” to be the same as the slide picture itself? I can define the overlay image for every slide but that’s rather time consuming since there are a lot of pages using the slider element. In the end I want to tweak the overlaying picture with css (works already but the overlays have to be set manually). Any ideas?
Best regards, DanielHey spooniverse,
Thank you for the inquiry.
to be the same as the slide picture itself
What do you mean? Do you mean the same overlay color? If I am not mistaken, you would like the slider to detect the color that is the most prominent in the slider image and have it apply an overlay that is the same as that color. Unfortunately, the slider does not have a script for it by default and creating one might require significant amount of modifications.
Best regards,
IsmaelHi Ismael,
Thank you for your prompt reply. I don’t mean the color, that would certainly be far too complex and, on the other hand, it wouldn’t be the effect I would want to achieve.It’s indeed about the overlay, you can define a color, as you said, but it is also possible to select a pattern or upload an image that will be used as an overlay. And that’s exactly what I would like to do, just automatically. In HTML an element is added to the slide with the picture as overlay and I would then adapt this later with CSS.
I have already tested the CSS adaptation (see link), it works wonderfully. I selected the image as an overlay by hand. But having to select that all the time all over the page would of course be a bit annoying. Do you have any idea?
All the best, Daniel
Hi,
Thank you for the clarification.
Unfortunately, this is not possible because the default value of the overlay settings would be different for each element or for each page. It is only possible for settings in which the value would be the same for every element. For example, in the slider’s Styling > Slideshow Image Size settings, we could set the “Large” thumbnail as the default option.You can try this filter in the functions.php file to automatically apply the same slider image as the custom pattern value.
add_filter("avf_slideshow_config", function($config) { $counter = 0; foreach ($config["content"] as $slider) { $config["content"][$counter]['attr']['overlay_enable'] = 'aviaTBaviaTBoverlay_enable'; $config["content"][$counter]['attr']['overlay_opacity'] = '0.5'; $config["content"][$counter]['attr']['overlay_pattern'] = 'custom'; $config["content"][$counter]['attr']['overlay_custom_pattern'] = wp_get_attachment_image_url($slider['attr']["id"]); $counter++; } return $config; }, 10, 1);Best regards,
IsmaelIsmael, you are the man! Thanks a lot. That is exactly what I was searching for. I changed the opacity to 1, thanks for the line in the code. How could I set the size of the linked overlay picture to original or ‘large’? Right now only the thumbnail (80×80) is loaded. Can I add a line for the size like that:
$config["content"][$counter]['attr']['overlay_size'] = 'large';Or do I have to add something to the last line where the attachment is loaded?
All the best, DanielHi,
No problem. Glad to know that it is working. For the size, try to specify the value of $size parameter in the wp_get_attachment_image_url function.
// https://developer.wordpress.org/reference/functions/wp_get_attachment_image_url/`
Best regards,
Ismael
- The topic ‘Automate the fullwidth slider slide overlay picture’ is closed to new replies.