umbraco 7 image cropper and webforms - Using Umbraco 7

Simon steed 378 posts 690 karma points

Apr 30, 2014 @ 00:54

Umbraco 7 Image cropper and webforms?

Doing my head in, can't get a crop. Code below but this is a webforms U7 project so not able to use the MVC stuff so any suggestions how to get this working appreciated.

Scenario: Folder of images, need to display in a carousel slideshow but at the right crop - crop is called slideshow and another called thumbs for the nav. Simple eh, ermm no!

You will see two methods i've tried below - giving up for now as just can't fathom it but maybe some sleep will help :-)

@inherits DynamicNodeContext 
@using umbraco.MacroEngines
@{
    var media = Library.MediaById(1386);
    if (media != null && media.Children.Count() > 0)
    {
        <div class="container slideshow">
            <div class="row">
                <div class="col-xs-12 col-md-10 col-md-offset-1">
                
                    <div id="slider" class="flexslider mainImages">
                        <ul class="slides">
                            @foreach (var sliderPage in media.Children)
                            {
                                var imageUrl = Model.GetCropUrl(sliderPage, "section");

                                <li>
                                    <a class='gallery' href='@imageUrl' title="@sliderPage.Name">
                                        <img src="@imageUrl" alt="@sliderPage.Name" class="thumbnail img-responsive">
                                    </a>
                                </li>
                            }  
                        </ul>
                    </div> 
                    <div id="carousel" class="flexslider flexiThumbs">
                        <ul class="slides">
                            @foreach (var sliderPage in media.Children)
                            {
                                var thumbImageUrl = sliderPage.GetCropUrl("thumb");
                                <li>
                                    <img src="@thumbImageUrl" />
                                </li>
                            }
                        </ul>
                    </div>  
                </div>
            </div>
        </div>
    }
}

Copy Link

Bo Kingo Damgaard 157 posts 456 karma points

Apr 30, 2014 @ 06:59

Hi Simon

I never got it to work in a regular razor macro, only a Partial View Macro, but I guess thats not an option for you? Or can you put a Partial View Macro in a WebForms masterpage?

/Bo

Copy Link

Bo Kingo Damgaard 157 posts 456 karma points

Apr 30, 2014 @ 07:25

Hi Simon

In case you want to try PVM:

foreach(var item in Umbraco.Media(CurrentPage.SliderImages.Split(',')))
{
var crop = item.GetCropUrl("umbracoFile", "banner");
    <li>
        <image src="@crop" alt="" />
        @if (!String.IsNullOrEmpty(item.imageCaption) || !String.IsNullOrEmpty(item.imageText) ) {
            <div class="slide-caption">
                @if (!String.IsNullOrEmpty(item.imageCaption)) {
                    <h3>@item.imageCaption</h3>
                }
                @if (!String.IsNullOrEmpty(item.imageText)) {
                    <p>@item.imageText</p>
                }
            </div>
        }           
    </li>
}

My SliderImages property is a MNTP in this case

/Bo

Copy Link

Simon steed 378 posts 690 karma points

Apr 30, 2014 @ 08:51

Thanks Bo - i'll give it a try, can't understand though why a razor macro won't work though or not usable? Will update later :-)

Copy Link

Simon steed 378 posts 690 karma points

Apr 30, 2014 @ 09:38

Cheers Bo - got it sorted now, for anyone else, the final code as a partial view is below:

@inherits Umbraco.Web.Macros.PartialViewMacroPage

@{

    var mediaFolder = Umbraco.Media(1386);

    if (mediaFolder.Children.Any())

        <divclass="container slideshow">

            <div class="row">

                <divclass="col-xs-12 col-md-10 col-md-offset-1">

                    <divid="slider"class="flexslider mainImages">

                        <ul class="slides">

                            @foreach (var sliderPage in mediaFolder.Children)

                                var imageUrl = sliderPage.GetCropUrl("umbracoFile", "slideshow");

                                <li>

                                    <a class='gallery' href='@sliderPage.GetCropUrl("umbracoFile", "lightbox")' title="@sliderPage.Name">

                                        <img src="@imageUrl" alt="@sliderPage.Name" class="thumbnail img-responsive">

                                    </a>

                                </li>

                        </ul>

                    </div>

                    <divid="carousel"class="flexslider flexiThumbs">

                        <ul class="slides">

                            @foreach (var sliderPage in mediaFolder.Children)

                                var thumbImageUrl = sliderPage.GetCropUrl("umbracoFile", "thumb");

                                <li>

                                    <img src="@thumbImageUrl" />

                                </li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

Copy Link

Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib

Apr 30, 2014 @ 11:51

Good work! @Simon, I would recommend that you convert as many legacy "Razor Macros" to "Partial View Macros" as you can. You will see dramatic improvement in performance by doing so and you can just change the file in the macro from the old MacroScript to the Partial View Macro without having to change the template (masterpage).

Copy Link

is working on a reply...

Flag this post as spam?

Umbraco 7 Image cropper and webforms?