Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

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


  • Paul Griffiths 370 posts 1021 karma points
    Jun 28, 2014 @ 17:44
    Paul Griffiths
    0

    ImageGen Help

    Hi all,

    I use the unpaid version of imageGen with every umbraco project I mess around with but i could do with some kind of explanation if someone could please.

    I get that the tool is used to resize images on the fly but how can i resize all images to the same dimensions and ensure that the quality remains. For example In my latest project I have three images which are all different sizes and using the following code 

    <img src="/imagegen.ashx?image={$selectedMedia/umbracoFile}&width=320&constrain=true" alt="{$selectedMedia/@nodeName}" />

    I get the this result

    enter image description here

    Now I get that if i use the following code 

    <img src="/imagegen.ashx?image={$selectedMedia/umbracoFile}&width=320&height=125" alt="{$selectedMedia/@nodeName}" />

    I get this result

    enter image description here

    Now with this second one it is the correct size of what i need the images to be and fits in with my design but as you can see the images of become stretched.I suppose my question is how can I get my images to fit the size i want them to be but still maintain there quality and give the user the freedom of uploading any image of any size.

    Appologies if i am missing something obvious here but I am still very new to this and would love to know how to understand my problem. Maybe there is a CSS trick than can fix this ? I did think to put an extra div around the image and use overflow:hidden but this seems wrong to do. For example 

    <div class="hservice-img-wrap">
    <img src="/imagegen.ashx?image={$selectedMedia/umbracoFile}&width=320&constrain=true" alt="{$selectedMedia/@nodeName}" />
    </div>

CSS
.hservice-img-wrap {width:320px; height:125px; overflow:hidden;}

    Gives this result

    enter image description here

    Can someone please help or explain what I may be missing? Hope what I have written makes sense.

    Thanks

    Paul

    Copy Link
  • Dan 1288 posts 3921 karma points c-trib
    Jun 28, 2014 @ 18:18
    Dan
    2

    Hi Paul,

    I think the feature you're looking for is cropping, which is only part of the Pro version of ImageGen, not the free version (see http://www.percipientstudios.com/imagegen/features.aspx).

    However, if you're using Umbraco 7.1+ this comes bundled with the excellent Image Processor, which is very similar to ImageGen but open source and more fully-featured, and will do what you need simply by doing this:

    <img src="{$selectedMedia/umbracoFile}?width=320&height=125&mode=crop" alt="{$selectedMedia/@nodeName}" />

    In fact, if you're on an earlier version of Umbraco it's probably possible to install Image Processor.

    You can check out this video by Jeavon Leopold on the current state of image cropping in the most recent versions of Umbraco - probably worth a look if you're still using ImageGen.

    Hope this all helps.

    Copy Link
  • Paul Griffiths 370 posts 1021 karma points
    Jun 28, 2014 @ 18:32
    Paul Griffiths
    0

    Hi Dan,

    Thanks for taking the time out to reply. Much appreciated ;)

    Right I see so I persume that using the unpaid version of Image there is no way around the problem ive described apart from using some form of css trickery? Would you agree and say that overflow hidden to hide part of the image is not the done thing? or is this method perfectly acceptable?

    I am using umbraco version 6.2.0 and have it installed locally just for messing with different concepts. I will take a look into the open source alternative that you have suggested.

    Cheers for your advice!

    Paul

    Copy Link
  • Dan 1288 posts 3921 karma points c-trib
    Jun 28, 2014 @ 18:44
    Dan
    0

    Hi Paul,

    There's nothing particularly wrong with the approach of creating a container for the image and positioning it inside with overflow:hidden, but it does have draw-backs e.g. if your site was responsive it's be a headache, it's extra bandwidth for the part of the image not being used etc, makes your mark-up unnecessarily complex etc. You could use CSS clipping, depending on your browser support requirements, which would do a similar thing.

    I was actually wrong in the original post that Image Processor was only introduced to 7.1, not to 6.2 so you'd need to install it as a stand-alone thing in 6.2. I've updated the post accordingly. I'd definitely go down that route if I were you, but if you're short on time and just want a quick and dirty win, then the method you're using would work.

    Copy Link
  • Paul Griffiths 370 posts 1021 karma points
    Jun 28, 2014 @ 21:41
    Paul Griffiths
    0

    Hi Dan,

    Thanks again for the info mate ive taken it all on board. Ive looked into installing ImageProcessor via nuget in visual studio 2013 and i finally got it installed (it says succesfull in the Package manager console). However, how do i implement this in umbraco? Ive tried ading the code in my xslt but it is causing errors? Have I done something wrong during the installation of the package.

    Just to outline im running v6.2.0 locally. I opened up VS and opened my website which added all the umbraco files into the solution explorer once i had this all in VS i installed nuget and run the comands to install ImageProcessor.

    Now im stuck lol. Any help would be a awesome mate.

    Cheers

    Paul

    Copy Link
  • Dan 1288 posts 3921 karma points c-trib
    Jun 29, 2014 @ 00:37
    Dan
    101

    Hi Paul,

    What XSLT error are you getting? Could it be that you just need to replace the ampersands in the image parameters with escaped versions? i.e:

    <img src="{$selectedMedia/umbracoFile}?width=320&amp;height=125&amp;mode=crop" alt="{$selectedMedia/@nodeName}" />

    I guess a way to tell if ImageProcessor is installed correctly would be just to load any image directly in your template and add something like ?width=100 to the src - if you get the image resized correctly when you view the template on the front-end then you it's working properly. If not, then it would indicate something's not right with the ImageProcessor installation.

    Let us know...

    Copy Link
  • Paul Griffiths 370 posts 1021 karma points
    Jun 29, 2014 @ 11:31
    Paul Griffiths
    0

    Hi Dan,

    I feel such a doughnut right now! You were right I was getting the error because of the ampersand not being the escaped versions! I suppose that is my inexperience showing there lol. but its a good thing I will know to try that way next time something similar pops up.

    Thanks for all your help and advice mate. Here is how it looks with the crop mode set on it

    enter image description here

    Cheers

    Paul

    Copy Link
  • Dan 1288 posts 3921 karma points c-trib
    Jun 29, 2014 @ 12:08
    Dan
    1

    Great stuff - glad it's sorted. :)

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft