Copied to clipboard

Flag this post as spam?

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


  • Steve 472 posts 1216 karma points
    Jan 28, 2014 @ 16:20
    Steve
    0

    Adding Macro Property for width and height for ImageGen

    I have a lightbox (colorbox) macro and would like to use a parameter to specify the hight and width of the images being sized by ImageGen within my macro. Here is what I am working from.

    @{
        if (!String.IsNullOrEmpty(Parameter.slideFolder)){
            var slideFolder = Library.MediaById(Parameter.slideFolder);
            var slideTitle = Library.MediaById(Parameter.slideTitle);
        <ul class="gallery">
                @foreach(var slide in slideFolder.Children) {
                <li>
            <a class="slideGroup" href="@slide.umbracoFile" title="@slide.name" ><img src="https://edit-wwwprep.rose-hulman.edu/media/1013416/slide-controls-overlay.png" /><img src="/[email protected]&width=350&height=auto" /></a> 
                </li>
                }
        </ul>
                }
    }

     

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Jan 28, 2014 @ 17:01
    Jeavon Leopold
    1

    Hi Steve,

    How about something like this?

    @{
        if (!string.IsNullOrEmpty(Parameter.slideFolder)){
            var slideFolder = Library.MediaById(Parameter.slideFolder);
            var slideTitle = Library.MediaById(Parameter.slideTitle);
    
            var width = string.IsNullOrEmpty(Parameter.width) ? "350" : Parameter.width;
            var height = string.IsNullOrEmpty(Parameter.height) ? "auto" : Parameter.height;
    
        <ul class="gallery">
                @foreach(var slide in slideFolder.Children) {
                <li>
            <a class="slideGroup" href="@slide.umbracoFile" title="@slide.name" ><img src="https://edit-wwwprep.rose-hulman.edu/media/1013416/slide-controls-overlay.png" /><img src="/[email protected]&width=@width&height=@height" /></a> 
                </li>
                }
        </ul>
                }
    }
    

    Jeavon

  • Steve 472 posts 1216 karma points
    Jan 28, 2014 @ 17:12
    Steve
    0

    On the variable width and height do I have to have the? 350 and the? Auto I just want a blank field that I can enter in the macro

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Jan 28, 2014 @ 17:16
    Jeavon Leopold
    0

    Yes, I just put those as defaults in case the parameters were optional, you need to add the parameters to the macro in the Umbraco UI also.

    If you know the parameters will always have a value, then change to:

    var width = Parameter.width;
    var height = Parameter.height;
    
  • Steve 472 posts 1216 karma points
    Jan 28, 2014 @ 18:31
    Steve
    0

    Jeavon,

    After adding your changes, the script will not load on the page. What should the parameters be set at in the macro? I've tried both, number and text.

     

     

     I have one other question related to this. If I wanted to overlay a transparent .png that would take on the same size as the values entered for the ImageGen parameters how would I go about that?

  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Jan 28, 2014 @ 19:00
    Jeavon Leopold
    0

    Hi Steve,

    So you managed to add the parameters to the macro and can enter their values when you add the macro to your template?

    Could you please post the <umbraco:macro from your template?

    I'm not sure exactly what you mean with regard to the transparent.png, is that using ImageGen's overlayImage parameter?

    Jeavon

  • Steve 472 posts 1216 karma points
    Jan 28, 2014 @ 19:47
    Steve
    0

    Jeavon,

    Got it working with your code. I have no idea why it didn't work the first time.

    In reguards to the transparent.png:

    I have a lightbox here - http://edit-wwwprep.rose-hulman.edu/16243.aspx,  that I've added a transparent .png over the thumbnail that the lightbox creates using css background, but I saw that ImageGen has a property called OverlayImage. I would really like to have the transparent .png resize with the values inputed into the macro for width and height, so I am asking if using this syntax for the razor would accomplish the resize. Thanks!

    <img src="/[email protected]&width=@slideWidth&height=@slideHeight&OverlayImage="https://edit-wwwprep.rose-hulman.edu/media/1013416/slide-controls-overlay.png" />
    
  • Steve 472 posts 1216 karma points
    Jan 28, 2014 @ 21:33
    Steve
    0

    Well, It appears that the overlayImage feature is only available on the professional version, not the basic. I feel kinda silly, as I found a simple solution with adding an extra img above the generated thumbnail and applied the same ImageGen code using the properties from the macro. Here is the final razor script:

    @{
        if (!String.IsNullOrEmpty(Parameter.slideFolder)){
    
            var slideFolder = Library.MediaById(Parameter.slideFolder);
            var slideTitle = Library.MediaById(Parameter.slideTitle);
            var slideWidth = string.IsNullOrEmpty(Parameter.width) ? "350" : Parameter.width;
            var slideHeight = string.IsNullOrEmpty(Parameter.height) ? "auto" : Parameter.height;
    
        <ul class="gallery">
            @foreach(var slide in slideFolder.Children) {
        <li>
            <a class="slideGroup" href="@slide.umbracoFile" ><img src="/ImageGen.ashx?image=/media/1013416/slide-controls-overlay.png&width=@slideWidth&height=@slideHeight" /><img src="/[email protected]&width=@slideWidth&height=@slideHeight" /></a>  
            </li>
                }
        </ul>
                }
    }
    @* ----  insert title="@slide.name" --- into a tag to enable slide titles by image node name --- *@
  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Jan 28, 2014 @ 21:46
    Jeavon Leopold
    0

    Yes, but I don't think ImageGen resizes the OverlayImage so you need to have different sizes available or some logic to work which overlay image to use based on your slideWidth, e.g.

    var overlayPath = string.Format("/media/1013416/slide-controls-overlay{0}.png", slideWidth);
    <img src="/[email protected]&width=@slideWidth&height=@slideHeight&OverlayImage=@overlayPath" />
    

    Assuming a slideWidth of 300, it would request a OverlayImage at the path /media/1013416/slide-controls-overlay300.png

  • Steve 472 posts 1216 karma points
    Jan 28, 2014 @ 22:28
    Steve
    100

    I looked into this, and ImageGen does, in fact, change the size of the overlay using the same parameters as the slideHeight and slideWidth that are used for the thumbnail image resize. Thanks for all your help Jeavon!

    Final, Final Razor:

    @{
        if (!String.IsNullOrEmpty(Parameter.slideFolder)){
            var slideFolder = Library.MediaById(Parameter.slideFolder);
            var slideTitle = Library.MediaById(Parameter.slideTitle);
            var width = string.IsNullOrEmpty(Parameter.slideWidth) ? "350" : Parameter.slideWidth;
            var height = string.IsNullOrEmpty(Parameter.slideHeight) ? "auto" : Parameter.slideHeight;
        <ul class="gallery">
            @foreach(var slide in slideFolder.Children) {
            <li>
                <a class="slideGroup" href="@slide.umbracoFile" ><img src="/ImageGen.ashx?image=/media/1013416/slide-controls-overlay.png&width=@width&height=@height" /><img src="/[email protected]&width=@width&height=@height" /></a>  </li>
                }
        </ul>
                }
    }
    @* ----  insert title="@slide.name" --- into a tag to enable slide titles by image node name --- *@
  • Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib
    Jan 28, 2014 @ 22:35
    Jeavon Leopold
    1

    Ah cool, all good then!

Please Sign in or register to post replies

Write your reply to:

Draft