Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1326524

    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, Daniel

    • This topic was modified 2 years, 5 months ago by spooniverse. Reason: change the description for better understandig of the solution searched
    #1326606

    Hey 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,
    Ismael

    #1326624

    Hi 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

    • This reply was modified 2 years, 5 months ago by spooniverse.
    #1326657

    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,
    Ismael

    #1326684

    Ismael, 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, Daniel

    #1326789

    Hi,

    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

    #1326851

    Pefect, I just added the size and everything works like charm:

    $config["content"][$counter]['attr']['overlay_custom_pattern'] = wp_get_attachment_image_url($slider['attr']["id"], $size = 'full');

    You may close this. Thanks for your help!

    • This reply was modified 2 years, 5 months ago by spooniverse.
    #1326911

    Hi,

    Great, I’m glad that you got things working, and thanks for the update. I’ll go ahead and close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Automate the fullwidth slider slide overlay picture’ is closed to new replies.