Home› General support

Generate two sizes of custom cropped thumbnails

risottto Member
in General support
Hopefully a quick question:

I am trying to generate two sets of thumbnails, one 100x100px and one 200x200px, depending on whether the device is a retina ipad or iphone 2 (for example only, its basically the the pixel ratio test). I want to use the custom cropped thumbnails from the admin panel that I go crazy getting right.

In my theme it works right using `printImageThumb(getAnnotatedImageTitle()` in the image loop. This limits me to whatever the theme thumbnail size is only though.

i have tried using the printCustomSizedImage function, but I can't get it to use the pre-specified cropping.

`printCustomSizedImage(getAnnotatedImageTitle(), null,100,100,getOption('??'), getOption('??'), getOption(??'), getOption('??), NULL, NULL, true, NULL);`

i tried several options in the ?? sections, but none seemed to work, e.g. thumb_crop_width, thumb_crop_height, cw, ch, cy.

Could it be dome with getThumbCropping() or am I missing some obvious variables here?

Thanks

Comments

  • acrylian Administrator, Developer
    If really want to do work already for those yet niche retina devices (note that it is extra traffic for those as well)...;-)

    You are using the right function. The cropping function is a little inintuitive but not possible differently.

    If you for example want to have 276x185px cropped image you need to use this:
    `printCustomSizedImage(getBareImageTitle(),NULL,276,185,765,518,10,10,NULL,NULL,TRUE);`

    If you want the image to be double sized you need to change the first two values:
    `printCustomSizedImage(getBareImageTitle(),NULL,552,370,765,518,10,10,NULL,NULL,TRUE);`

    The first two are the actual desired size of the cropped image. See the 2nd two a kind of zoom which should be the same value ratio than the first so the image does not distort. The 3rd two are the starting upper left corner point where to start the cropping and don't need to be set.
  • risottto Member
    Yep, took a while to figure out how that worked. I ended up using the line:
    `list($custom, $sw, $sh, $cw, $ch, $cx, $cy) = $_zp_current_image->getThumbCropping();`

    Which pulled all the custom cropping variables for each thumbnail so that you could place them into the `printCustomSizedImage()` or `getCustomImageURL()` call such as:

    `getCustomImageURL(null,$ts*2,$ts*2,$cw,$ch,$cx,$cy,true, NULL)`
    for custom crops and:

    `getCustomImageURL(null,$ts*2,$ts*2,$ts*2,$ts*2,null,null,true, NULL)`
    for default crops.

    the *2 is to double the size for retina displays.

    I also had to add:

    `height="<?php echo $ts; ?>px" width="<?php echo $ts; ?>px"`

    into the `image` tag to keep them the right size at 2x resolution.

    To detect retina displays I made a cookie using the javascript:

    `
    (function(){
    if( document.cookie.indexOf('retina') == -1
    && 'devicePixelRatio' in window
    && window.devicePixelRatio >= 2 ){

    document.cookie = 'retina=' + window.devicePixelRatio + ';';
    window.location.reload();
    }
    });
    `
    and ran a test for it using
    `
    <?php if (isset($_COOKIE["retina"]) { ?>
    ...hi-res
    <?php }else{ ?>
    ...low-res
    <?php } ?>
    `
    The thumbnails look significantly better on iPhone4 and iPad 3 using the 2x code, and i'm not pushing double sized images to any non-retina devices.
  • acrylian Administrator, Developer
    I am always hesitant to use JS for such checks but I guess for now the target are the idevices only where I guess you cannot disable that at all (no normal user does anyway). This seems to be a similar way for static images: http://retina-images.complexcompulsions.com/

    You should try to make a plugin for this.
Sign In or Register to comment.