Copied to clipboard

Flag this post as spam?

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


  • Wade 43 posts 159 karma points
    Jan 19, 2016 @ 02:44
    Wade
    0

    call different imagecropper crop at different browser widths

    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.

  • Dave Woestenborghs 3344 posts 11303 karma points MVP 6x admin c-trib
    Jan 19, 2016 @ 07:48
    Dave Woestenborghs
    0

    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

  • Wade 43 posts 159 karma points
    Jan 20, 2016 @ 22:44
    Wade
    0

    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.

  • Nicholas Westby 2033 posts 7006 karma points c-trib
    Jan 21, 2016 @ 04:29
    Nicholas Westby
    0

    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.

  • Dave Woestenborghs 3344 posts 11303 karma points MVP 6x admin c-trib
    Jan 21, 2016 @ 08:30
    Dave Woestenborghs
    0

    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

  • Wade 43 posts 159 karma points
    Jan 21, 2016 @ 09:31
    Wade
    100

    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.

Please Sign in or register to post replies

Write your reply to:

Draft