Copied to clipboard

Flag this post as spam?

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


  • Petar 4 posts 24 karma points
    Sep 22, 2013 @ 22:48
    Petar
    0

    ImageGen - image caching

    Hi all! I am struggling to understand how I can make several images of my website to be cached by using the basic version of ImageGen. I`ve read anything there is on the Internet about Imagegen, but considering my small experience with Umbraco, I cannot understand how to use the package.

    From the manual I understand that server-side caching works for the basic version. Could you please explain me how to use that server caching on several images that I have on my server? I would be very grateful!

  • Alex Skrypnyk 6127 posts 23875 karma points MVP 7x admin c-trib
    Sep 23, 2013 @ 10:34
    Alex Skrypnyk
    0

    Hi Petar,

    Did you install ImageGen ? For using ImageGen caching just add:

    <img src="/ImageGen.ashx?image=beautiful.jpg&width=320&NoCache=false" />
    

    Thanks, Alex

  • Petar 4 posts 24 karma points
    Sep 23, 2013 @ 11:13
    Petar
    0

    Hi Alex

    Thank you very much for your fast response! So I want to cache this image: /images/bar-shadow.png

    But when I use this code, it doesn`t seem to work:

    <img src="/ImageGen.ashx?image=/images/bar-shadow.png&NoCache=false" />

    Am I making a mistake somewhere? I`ve placed the code in ImageGen.config above <!-- FONT DEFINITIONS --> and below </RemoteDomainWhiteList>

     

     

  • Alex Skrypnyk 6127 posts 23875 karma points MVP 7x admin c-trib
    Sep 23, 2013 @ 12:13
    Alex Skrypnyk
    0

    did you see installation details if you go:

    http://localhost/imagegen.ashx?version 
    
  • Petar 4 posts 24 karma points
    Sep 23, 2013 @ 12:34
    Petar
    0

    ImageGen Basic version 2.5.7.27945
    Professional features are available for localhost
    Professional features are available for *.local

    Just to be absolutely sure - I place the code and the image should be cached, and I don`t need to do anything else. The URL of the old image - bar-shadow.png, remains the same, right?

  • Alex Skrypnyk 6127 posts 23875 karma points MVP 7x admin c-trib
    Sep 23, 2013 @ 13:14
    Alex Skrypnyk
    0

    yes Petar

  • Petar 4 posts 24 karma points
    Sep 23, 2013 @ 13:42
    Petar
    0

    But I must am doing a mistake, because the images are not caching. You you please tell whether there are mistakes in my ImageGen.config?

    <ImageGenConfiguration>
        <Registration>
            <!-- ImageGen Professional is always available on localhost and *.local domains -->
            <Key domain="example.com">436DA8888A3BBC98662B23C6D1B635543E762854</Key>
            <Key domain="sample.com">55FD8FD97A199AB3082BC7DC11AE5F743B092C55</Key>
        </Registration>
        <HideDomains>false</HideDomains>
        <RemoteDomainWhiteList>
            <Domain>www.sample.com</Domain>
        </RemoteDomainWhiteList>

        <img src="/ImageGen.ashx?image=/images/bar-shadow.png&NoCache=false" />
        <img src="/ImageGen.ashx?image=/images/bg-logo.png&NoCache=false" />
        <img src="/ImageGen.ashx?image=/images/bg.png&NoCache=false" />

        <!-- FONT DEFINITIONS -->
        <Font Name="AvantGardeCE">
            <Filename Style="regular">/fonts/AGW_CE.ttf</Filename>
            <Filename Style="bold">/fonts/AGD_CE.ttf</Filename>
            <Filename Style="italic">/fonts/LTe52012.ttf</Filename>
            <Filename Style="bold, italic">/fonts/LTe52014.ttf</Filename>
        </Font>

        <!-- NAMED CLASSES, INCULDING THE SPECIAL 'DEFAULT' CLASS -->
        <Class Name="default" OverridesQueryString="true">
            <AllowUpsizing>false</AllowUpsizing>
            <MaxHeight>800</MaxHeight>
            <MaxWidth>800</MaxWidth>
        </Class>
        <Class Name="Thumbnail" OverridesQueryString="true">
            <InheritFromClass>default</InheritFromClass>
            <Width>200</Width>
            <Height>200</Height>
            <CachingTimeSpan>3600</CachingTimeSpan>
        </Class>
        <Class Name="CorporateFont" OverridesQueryString="true">
            <Font>AvantGardeCE</Font>
            <FontColor>000000</FontColor>
        </Class>
        <Class Name="LargeHeading" OverridesQueryString="true">
            <InheritFromClass>CorporateFont</InheritFromClass>
            <FontSize>53</FontSize>
            <FontColor>c6ff00</FontColor>
            <BgColor>76c11a</BgColor>
            <BoldOffset>1</BoldOffset>
        </Class>
       
        <Class Name="Cache" OverridesQueryString="true">
            <ImageBaseDir>http://businessservices.insero.dk/media/</ImageBaseDir>;
    <CachingTimeSpan>3600</CachingTimeSpan>
    </Class>

        <!-- FOLDER CLASSES -->
        <Class Folder="/myproducts" OverridesQueryString="true">
            <Height>100</Height>
        </Class>
        <Class Folder="[test|demo]folder" OverridesQueryString="true">
            <Border>10</Border>
            <Bordercolor>red</Bordercolor>
        </Class>
    </ImageGenConfiguration>

  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    Sep 25, 2013 @ 13:35
    Douglas Robar
    0

    Hi, Petar,

    There are a few misunderstandings going on. Let me try to clear them up for you.

    First, you're running ImageGen Basic (as the imagegen.ashx?version output shows) so you won't have the benefit of using the Professional features, such as Class and Font definitions in the imagegen.config file. When in Basic mode the entries in the imagegen.config file are ignored. That also means that places <img> tags in the imagegen.config file won't work either with ImageGen Basic because the entries in the imagegen.config file are only used with ImageGen Professional.

    Further, you should not have <img> tags in the imagegen.config file; they don't belong there and will either do nothing or would cause errors when using ImageGen Professional. The <img> lines should be removed from the imagegen.config file.

    What ImageGen does, is resize images according to the requested parameters and then cache the resized image so that the server never needs to do that work again. For instance, if you have an image on your website at /images/big-photo.png you could request that image in a browser at http://mydomain.com/images/big-photo.png and it would appear to the website visitor. Or you could place an <img src="/images/big-photo.png" /> tag in the HTML of a webpage on your site and when the webpage was viewed by a visitor the /images/big-photo.png image would appear. If the original image were too big you could add height or width parameters to the img tag <img src="/images/big-photo.png" width="100" /> and the browser would download the fullsize image but display it smaller on the screen. This wastes bandwidth and time to display the page and the quality of the browser's resizing might not be very good.

    That's just normal web behaviour and what happens without ImageGen.

    With ImageGen you can do better. You can resize the image on the server and send to the website visitor the high-quality smaller image. To do this, tell ImageGen what image and size you want and it will create the appropriate image. You can test this in your browser at http://mydomain.com/imagegen.ashx?image=/images/big-photo.png&width=100. Here you are instructing ImageGen to resize the original photo to 100px wide. ImageGen does the resizing work and caches the resulting image to the webserver so that if you request the same image and size again it can send the cached image, saving the cpu, memory, and time it takes to do the resizing. Cached images are save in a folder named 'cached' below the location of the original image. In our example, the original image is at /images/big-photo.png and the resized image will be found in the /images/cached folder.

    Just as you would create an <img src="/images/big-photo.png" width="100" /> tag in your HTML pages you would do the same thing with ImageGen. In order to display the 100px wide RESIZED image you would use ImageGen in the src="" tag like this: <img src="/imagegen.ashx?image=/images/big-photo.png&width=100" />

    I hope that clears up some confusion for you. ImageGen creates resized images and caches those resized images on the webserver for performance. There are many options you can use with ImageGen and I encourage you to look at the documentation.

    Two final notes... if you simply pass the original image to ImageGen but don't alter it with various ImageGen parameters (for instance, if you only had <img src="\imagegen.ashx?image=/images/big-photo.png" /> ImageGen will not cache a resized image because it didn't alter the original. Instead, it will simply send the original image to the website visitor.

    Also note that you don't need to include the &nocache=false parameter since that's the default setting. You'd only use the &nocache=true setting when debugging and never in a production environment. The documentation gives a full explanation of this setting if you're interested in the details. Otherwise, you needn't bother to include it in your ImageGen requests.

    cheers,
    doug.

Please Sign in or register to post replies

Write your reply to:

Draft