Copied to clipboard

Flag this post as spam?

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


  • Peter Alcock 106 posts 169 karma points
    Dec 22, 2011 @ 10:27
    Peter Alcock
    0

    Imagegen in Razor?

    Hi all,

    I have a carousel that uses a certain media type as the slides which are stored in a folder.

    The trouble is if the image uploaded is say 800x600 it will display each image at its full size, I want to display them in 670x330 inside the holder. Is there anything similar to imagegen that can be used in razor that will do this?

    Cheers

  • alimac 177 posts 345 karma points
    Dec 22, 2011 @ 11:06
    alimac
    0

    There's no reason you can't use imagegen with razor. All you're doing is creating a link to the imagegen imagehandler file with querystring parameters. 

  • Peter Alcock 106 posts 169 karma points
    Dec 22, 2011 @ 11:09
    Peter Alcock
    0

    Cool thanks Al, reckon you could give me an example? heres the razor code i am using below, trying out the nivoslider (can you tell im new to umbraco!)

    @*

    NivoSlider for Umbraco - version 0.5 (04/10/2011)
    Author: Andrés Valor
    Released under the MIT licence: http://www.opensource.org/licenses/mit-license.php

    *@

    @using umbraco.MacroEngines

    <script type="text/javascript" src="/scripts/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="/scripts/jquery.nivo.slider.pack.js"></script>
    @{
        var nodes = @Model.MediaById(@Parameter.nivoFolder);

    <script type="text/javascript">
        $(window).load(function() {
            $('#@nodes.Name').nivoSlider({
              effect:@{
                System.Text.StringBuilder effects = new System.Text.StringBuilder("'");
                foreach (dynamic img in nodes.Children)
                {
                    if (img.nivoSliderEffect == String.Empty)
                    {
                        effects.Append("random,");
                    }
                    else
                    {
                        effects.Append(img.nivoSliderEffect + ",");
                    }
                }
                effects.Remove(effects.Length - 1,1);
                effects.Append("'");           
                @Html.Raw(effects.ToString());
              },         
              slices:@nodes.Children.Items.Count,
              boxCols:@(String.IsNullOrEmpty(Parameter.nivoBoxCols) ? "8" : Parameter.nivoBoxCols),
              rowCols:@(String.IsNullOrEmpty(Parameter.nivoRowCols) ? "4" : Parameter.nivoRowCols),
              animSpeed:@(String.IsNullOrEmpty(Parameter.nivoAnimSpeed) ? "500" : @Parameter.nivoAnimSpeed),
              pauseTime:@(String.IsNullOrEmpty(Parameter.nivoPauseTime) ? "3000": @Parameter.nivoPauseTime),
              startSlide:@(String.IsNullOrEmpty(Parameter.nivoStartSlide) ? "0" : @Parameter.nivoStartSlide),                    
              directionNav:@(String.IsNullOrEmpty(Parameter.nivoDirectionNav) ? "false" : (Parameter.nivoDirectionNav=="1" ? "true" : "false")),
              directionNavHide:@(String.IsNullOrEmpty(Parameter.nivoDirectionNavHide) ? "false" : (Parameter.nivoDirectionNavHide=="1" ? "true" : "false")),
              controlNav:@(String.IsNullOrEmpty(Parameter.nivoControlNav) ? "false" : (Parameter.nivoControlNav=="1" ? "true" : "false")),                                       
              keyboardNav:@(String.IsNullOrEmpty(Parameter.nivoKeyboardNav) ? "false" : (Parameter.nivoKeyboardNav=="1" ? "true" : "false")),
              pauseOnHover:@(String.IsNullOrEmpty(Parameter.nivoPauseOnHover) ? "false" : (Parameter.nivoPauseOnHover=="1" ? "true" : "false")),
              manualAdvance:@(String.IsNullOrEmpty(Parameter.nivoManualAdvance) ? "false" : (Parameter.nivoManualAdvance=="1" ? "true" : "false")),
              captionOpacity:@(String.IsNullOrEmpty(Parameter.nivoCaptionOpacity) ? "0.8" : @Parameter.nivoCaptionOpacity),
              prevText:@(String.IsNullOrEmpty(Parameter.nivoPrevText) ? @Html.Raw("''") : @Html.Raw(String.Concat("'", Parameter.nivoPrevText, "'"))),
              nextText:@(String.IsNullOrEmpty(Parameter.nivoNextText) ? @Html.Raw("''") : @Html.Raw(String.Concat("'", Parameter.nivoNextText, "'")))
            });
        });           
    </script>
          
            <div id="@nodes.Name" class="nivoSlider">
           
                @foreach (dynamic img in nodes.Children)
                {
                    if (img.NodeTypeAlias != "NivoSliderImage")
                    {
                        continue;
                    }
                                   
                    System.Text.StringBuilder htmlNode = new System.Text.StringBuilder();
                   
                    if (img.HasValue("nivoSliderUrl"))
                    {
                        dynamic destNode = new DynamicNode(img.nivoSliderUrl);
                        htmlNode.Append("<a href=\""+destNode.NiceUrl+"\">");                   
                    }
                   
                    htmlNode.Append("<img src=\""+img.smallImage+"\" alt=\""+img.Name+"\"");
                   
                   
                    if (img.HasValue("nivoSliderCaption"))
                    {
                        htmlNode.Append(" title=\"#"+img.Name+"\"");                                  
                    }
                   
                    htmlNode.Append("/>");
                   
                    if (img.HasValue("nivoSliderUrl"))
                    {
                        htmlNode.Append("</a>");
                    }

                    htmlNode.AppendLine();
                    @Html.Raw(htmlNode.ToString());               
                }
                          
            </div>
           
        foreach (dynamic img in nodes.Children)
        {
            if (img.HasValue("nivoSliderCaption"))
            {
                    <div id="@img.Name" class="nivo-html-caption">
                        @Html.Raw(img.nivoSliderCaption)
                    </div>                         
            }
        }
    }

  • Sebastiaan Janssen 4899 posts 14655 karma points MVP admin hq
    Dec 22, 2011 @ 17:39
    Sebastiaan Janssen
    0

    The change to the following line should give you images that are all 300 pixels wide:

    htmlNode.Append("<img src=\"/imagegen.ashx?image="+img.smallImage+"\&amp;width=300" alt=\""+img.Name+"\"");
  • Peter Alcock 106 posts 169 karma points
    Dec 22, 2011 @ 17:46
    Peter Alcock
    0

    Hi Sebastian,

    Thanks for the reply, just tried using the line you gave but it's giving me this error on the page :( any ideas?

    Error loading Razor Script NivoSlider.cshtml
    c:\inetpub\wwwroot\iProMaster\macroScripts\NivoSlider.cshtml(73): error CS1009: Unrecognized escape sequence

    Cheers

    Pete

  • alimac 177 posts 345 karma points
    Dec 22, 2011 @ 18:05
    alimac
    1

    edit: oops

    I think you need to change it to:

    htmlNode.Append("<img src=\"/imagegen.ashx?image="+img.smallImage+"&amp;width=300\" alt=\""+img.Name+"\"");
  • Peter Alcock 106 posts 169 karma points
    Dec 22, 2011 @ 18:08
    Peter Alcock
    0

    Ey managed to get it just before you posted heh heh edited slighty to this which works

     htmlNode.Append("<img src=\"/imagegen.ashx?image="+img.umbracoFile+"&amp;width=670&amp;height=330\" alt=\""+img.Name+"\"");

    Thanks for the help couldnt have done it without yeh!

    Pete

  • Peter Alcock 106 posts 169 karma points
    Dec 22, 2011 @ 18:14
    Peter Alcock
    0

    Ey managed to get it just before you posted heh heh edited slighty to this which works

     htmlNode.Append("<img src=\"/imagegen.ashx?image="+img.umbracoFile+"&amp;width=670&amp;height=330\" alt=\""+img.Name+"\"");

    Thanks for the help couldnt have done it without yeh!

    Pete

  • Nick_K 2 posts 22 karma points
    Mar 07, 2012 @ 11:15
    Nick_K
    0

    I was able to use Razor with Imagen but I have a problem with caching!

    I got the code from one of the free screencasts:

    <ul class="galleryoverview" >
        @{
            foreach (var gallery in Model.Children)
            {
                if (gallery.HasValue("photos"))
                {
                    var MediaGalleryFolder = Library.MediaById(gallery.photos);
                    var noPhotos = MediaGalleryFolder.Children.Count();

                    //Get the first image in the folder
                    var imageNode = MediaGalleryFolder.Children.First();
                    var imageURL = imageNode.umbracoFile;
                       <li class="gallery-thumbnail-box">
                        <div class="gallery-thumbnail">
                        <a href="@gallery.Url">
                            <!-- Use ImageGen querystring to automatically generate a thumbnail & setup fallback image -->
                            <img src="/ImageGen.ashx?image=@imageURL&width=240@height=159&nocache=true&crop=resize&align=center&altImage=/img/no-image.png" alt="@gallery.Name"/>
                                <h1>
                                    @gallery.Name: @noPhotos
                                </h1>                          
                        </a>
                        </div>
                        </li>
                                   
                }
            }
        }
    </ul>

     

    My problem: If I change the parameters of ImageGen, let's say I want only width and no height:

    (<img src="/ImageGen.ashx?image=@imageURL&width=200&nocache=true&crop=resize&align=center&altImage=/img/no-image.png" alt="@gallery.Name"/>

    the change is not reflected to the actual url shown on site. For example, if I right click on a resized image from the browser and select "Show Image", then

    the URL is as follows:

    h**p://mywebsite/ImageGen.ashx?image=/media/4960/_DSC5671.jpg&height=173&width=173&crop=resize&align=center&altImage=/img/no-image.png.

    height=173&width=173 were the original parameters I used.

    I cleared the cache in the browser and republished the entire site after I made the change in the razor file but no avail.

    Could someone help me. What am i doing wrong? Is there a problem with ImageGen caching? You see, I already use &nocache=true as a parameter

     


  • Nick_K 2 posts 22 karma points
    Mar 07, 2012 @ 13:40
    Nick_K
    0

    In relation to the previous post of mine. Don't bother. I made a mistake. I was calling the action from a different .chhtml file than the one I had in front of me. Silly me. By the way, umbraco + imagegen=cool stuff!

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies