Suggestion: support <picture> and srcset for dynamic colored-shadow with webp

[xperseguers]

I'm using the following markup to enable serving next-gen format image in webp:

<div class="card-header card-header-image">
	<picture>
		<source type="image/webp" srcset="/path/to/image.webp">
		<source type="image/jpeg" srcset="/path/to/image.jpg">
		<img src="path/to/image.jpg" class="img">
	</picture>
</div>

However the dynamic shadow is generated as:

	<div class="colored-shadow" style="background-image: url(&quot;/path/to/image.jpg&quot;); opacity: 1;"></div>

Ideally it should somehow link to the webp version when it supported by the browser.

So something needs to be adapted in your method initColoredShadows:

    initColoredShadows: function() {
        if (materialKit.misc.colored_shadows == true) {
            if (!(BrowserDetect.browser == "Explorer" && BrowserDetect.version <= 12)) {
                $('.card:not([data-colored-shadow="false"]) .card-header-image').each(function() {
                    $card_img = $(this);
                    is_on_dark_screen = $(this).closest(".section-dark, .section-image").length;
                    if (is_on_dark_screen == 0) {
                        var img_source = $card_img.find("img").attr("src");
                        var is_rotating = $card_img.closest(".card-rotate").length == 1 ? true : false;
                        var $append_div = $card_img;
                        var colored_shadow_div = $('<div class="colored-shadow"/>');
                        if (is_rotating) {
                            var card_image_height = $card_img.height();
                            var card_image_width = $card_img.width();
                            $(this).find(".back").css({
                                height: card_image_height + "px",
                                width: card_image_width + "px"
                            });
                            $append_div = $card_img.find(".front")
                        }
                        colored_shadow_div.css({
                            "background-image": "url(" + img_source + ")"
                        }).appendTo($append_div);
                        if ($card_img.width() > 700) {
                            colored_shadow_div.addClass("colored-shadow-big")
                        }
                        setTimeout(function() {
                            colored_shadow_div.css("opacity", 1)
                        }, 200)
                    }
                })
            }
        }
    },

Instead of reading the src attribute, you should try to read the currentSrc dynamic attribute:

                    // snip
                    if (is_on_dark_screen == 0) {
                        var img_source = $card_img.find("img").prop("currentSrc") ||  $card_img.find("img").attr("src");
                    // snip

Note: I could provide a PR, just unsure at the moment if I thought of every possible case, so up for discussion.

[groovemen]

Hello @xperseguers,

Thank you for using our products and for your constructive feedback. Unfortunately, you can't provide a PR because this repo is private so we'll ask you to create a file with the solution and send it to us and we'll integrate it into the next update. If you have another idea on how we can integrate into the product please let us know.

Best,
Stefan

[xperseguers]

here you are.
material-kit.js.zip