images not rendering in bootstrap accordion

Press Ctrl / CMD + C to copy this to your clipboard.

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

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
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
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?