call different imagecropper crop at different browser widths

Wade 43 posts 159 karma points

Jan 19, 2016 @ 02:44

XSLT

Umbraco 7

Hi Everyone, I have a banner that calls the image from imagecropper. The banner is created from an xslt macro. I have been searching for quite a while on how to change the image crop to a different image crop when the browser width gets above a certain width.

ie:

> 1200px wide - show homepageBannerWide cropsize
< 1199px wide - show homepageBannerCrop cropsize

Is there anyway to find the browser width from xslt? If xslt can find the browser width then I can put in a when statement.

If not then is there any way to render a macro from inside a javascript call? I could make a second macro, with the different crop in it, and then call in that macro from inside a javascript call, like this:

<script>
$(window).on("resize", function() {
     if ($(window).width() >= 1200) {
                   RENDER MACRO 1 HERE
 }
     if ($(window).width() <= 1199) {
                   RENDER MACRO 2 HERE  
     }
});

    </script>

Thanks, Wade.

Copy Link

Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib

Jan 19, 2016 @ 07:48

Depends on what browsers you need to support, but you can use the HTML

Last week a package was released for helping rendering this tag : https://our.umbraco.org/projects/developer-tools/umbraco-picture-helper/

I haven't used that.

Dave

Copy Link

Wade 43 posts 159 karma points

Jan 20, 2016 @ 22:44

Hi Dave, Thanks for the reply. Unfortunately the browser support for it doesn't suit my client. I'll look into it for other projects though.

Copy Link

Nicholas Westby 2054 posts 7100 karma points c-trib

Jan 21, 2016 @ 04:29

I don't believe the browser width is sent to the server, which makes sense considering the user can resize their browser after the page has loaded.

Assuming there is some reason you can't use picture tags, media queries, or Slimmage/Slimsy, I don't see why you'd need to add the JavaScript to the macro itself.

Why not have the JavaScript load on every page, then have it find elements with a certain class and dynamically apply the correct image on page load or resize? So, if you had markup like this:

<div class="dynamic-image" data-src-a="/some-image.jpg" data-src-b="/some-other-image.jpg"></div>

You could have the JavaScript scan the page for the dynamic-image class (should be easy enough, since you appear to be using jQuery), then replace those elements with an image element that has the src set to one of the data attributes (depending on the browser width size).

Another alternative, though I wouldn't recommend it over the above solution, would be to add JavaScript directly to the XSLT.

Copy Link

Dave Woestenborghs 3504 posts 12133 karma points MVP 8x admin c-trib

Jan 21, 2016 @ 08:30

Another options is to instead of outputting a img-tag you out put a div and set the image as background. Then with media queries you can change the background depending on screen widt

Dave

Copy Link

Wade 43 posts 159 karma points

Jan 21, 2016 @ 09:31

Managed to work it out with Media Queries (thanks Nicholas for the reminder). I originally thought I would do it that way and after not finding the solution I thought of jquery. Anyway, I'm a moron and should have done more research before posting a question.

I simply put the area that calls in the image crop in the xslt in several different times (3 different divs in my case as I wanted 3 different crops), and added in a different css class to each of those divs, then hid and showed the divs with media queries.

For those interested in the code:

<xsl:template match="/">

<div class="container container-full">
    <div class="row carouselwrap">
        <div class="owl-carousel carousel">
            <xsl:variable name="imageFolder" select="$currentPage/bannerMediaFolder"/>
                <xsl:if test="$imageFolder!= ''">


           <xsl:variable name="mm" select="umbraco.library:GetMedia($imageFolder, true())" />

          <xsl:for-each select="$mm/*">
          <xsl:if test="./@id and self::homepageBanner">
              <xsl:variable name="m" select="umbraco.library:GetMedia(./@id, false())"></xsl:variable>
             <div class="item">
                 <!-- Start thin  -->
                  <xsl:apply-templates select="$m/bannerImage" mode="media">
                        <xsl:with-param name="class" select="'carouselpic thinbanner'" />
                        <xsl:with-param name="cropset" select="'HomepageBannerThin'" />
                        <xsl:with-param name="quality" select="85" />
                        <xsl:with-param name="alt" select="bannerTitle" />
                    </xsl:apply-templates>
                 <!-- end thin  -->
                 <!-- Start regular  -->
                  <xsl:apply-templates select="$m/bannerImage" mode="media">
                        <xsl:with-param name="class" select="'carouselpic regularbanner'" />
                        <xsl:with-param name="cropset" select="'HomepageBannerCrop'" />
                        <xsl:with-param name="quality" select="85" />
                        <xsl:with-param name="alt" select="bannerTitle" />
                    </xsl:apply-templates>
                 <!-- end regular  -->  
                 <!-- Start wide  -->
                  <xsl:apply-templates select="$m/bannerImage" mode="media">
                        <xsl:with-param name="class" select="'carouselpic widebanner'" />
                        <xsl:with-param name="cropset" select="'HomepageBannerWide'" />
                        <xsl:with-param name="quality" select="85" />
                        <xsl:with-param name="alt" select="bannerTitle" />
                    </xsl:apply-templates>
                 <!-- end wide  -->
                    <div class="container widthfifty posbtm">
                        <div class="containercarousel">
                            <div class="headercarousel">
                              <h1><xsl:value-of select="$m/bannerTitle"/></h1>
                            </div>
                            <div class="captioncarousel">  
                              <p><xsl:value-of select="$m/bannerText"/></p>
                                <xsl:choose>
                                  <xsl:when test="number($m/bannerLink) &gt; 0">
                                      <div class="captioncarousellink"><a href="{umbraco.library:NiceUrl($m/bannerLink)}">›</a></div>
                                  </xsl:when>
                                  <xsl:otherwise>
                                      <div style="display:none;" class="captioncarousellink">›</div>
                                  </xsl:otherwise>
                                </xsl:choose>
                            </div>
                        </div>
                    </div>
                  </div>
          </xsl:if>
        </xsl:for-each></xsl:if>
            </div>


</div>
</div>


</xsl:template>

If you don't know how to use imagecropper in Umbraco 7 with xslt, check out this thread: https://our.umbraco.org/forum/developers/xslt/48101-How-to-get-image-cropper-value

Cheers, Wade.

Copy Link

is working on a reply...

Flag this post as spam?

call different imagecropper crop at different browser widths