Sign in Register
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 77 posts 301 karma points c-trib
    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 :)

    Copy Link
  • Matt Brailsford 4125 posts 22223 karma points MVP 9x 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

    Copy Link
  • Andreas Kristensen 77 posts 301 karma points c-trib
    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.

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies