Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Andreas Kristensen 24 posts 174 karma points
    Feb 15, 2016 @ 09:15
    Andreas Kristensen
    0

    Images not rendering in Bootstrap Accordion

    Hello! I have some pictures stored in an Archetype, and I retrieve them like this:

    @if (employment.HasValue("employmentImage"))
        {
            var mediaItem = Umbraco.Media(employment.GetValue("employmentImage"));
            <img src="@mediaItem.GetResponsiveImageUrl(300,300)" width="300" height="300" class="img-responsive center-block" />
        }
    

    And the image gets a data-src when loaded, where the image path is good. But the image does not render on the page. Note: The image in in a Bootstrap Accordion in the .panel-body container. I can make the image load by resizing the browser windows. I think this has to do with, that Slimsy is not happy about images being hidden on the page. Does anyone have a fix for this? Thanks in advance :)

  • Matt Brailsford 2657 posts 13188 karma points MVP 7x c-trib
    Feb 16, 2016 @ 09:33
    Matt Brailsford
    0

    Hi Andreas,

    You'll probably want to call the window.slimmage.checkResponsiveImages(delay) js method when the image is revealed to get slimmage to do it's calculations:

    https://github.com/imazen/slimmage#slimmage-callable-api-methods

    Hope this helps

    Matt

  • Andreas Kristensen 24 posts 174 karma points
    Feb 16, 2016 @ 10:02
    Andreas Kristensen
    0

    Thanks Matt. I have tried to do so now. This is the code:

    $("#accordion").on("shown.bs.collapse", function () {
            window.slimmage.checkResponsiveImages(1);
        });
    

    Unfortunately, the Webconsole in Firefox says that "window.slimmage.checkResponsiveImages();" is not a function, even though slimsy is included and is working...

    PS: Suddenly found this thread which I the basis for the above script.

Please Sign in or register to post replies

Write your reply to:

Draft