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

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

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;

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?

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

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" />

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 --- *@

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

Ah cool, all good then!

is working on a reply...