Hi Tony,

Perhaps this post you help you find the right approach:

https://our.umbraco.org/forum/developers/razor/49409-Check-if-image-is-landscape-or-portrait

And perhaps you should take a look at this blogpost http://umbraco.com/follow-us/blog-archive/2014/5/30/developing-a-website-with-responsive-images-using-the-umbraco-v714-image-cropper and the package called Slimsy https://our.umbraco.org/projects/website-utilities/slimsy

Hope this helps,

/Dennis

Hi Dennis

I'm using the image cropper - you gave me that link before and it got the cropper working. I just can't figure out how to see if the image is landscape or portrait. The idea being that if it is landscape - we get a large landscape image on the next page. If it is a portrait, then the large image is a portrait image. 

I have just tried:

@foreach(var page in CurrentPage.Children.Reverse().Take(5))

{

dynamic image=null;

if (page.HasValue("image"))

{                                         

            var dynamicMediaItem = Umbraco.Media(page.image);

<div class="content-page-wide-box">

int width = dynamicMediaItem.GetPropertyValue<int>("umbracoWidth");

           int height = dynamicMediaItem.GetPropertyValue<int>("umbracoHeight");

if (width >= height)

{

<div class="column w220">

           <img src="@dynamicMediaItem.GetCropUrl("foundation")" alt="@dynamicMediaItem.Name" style="padding:5px 5px 5px 5px"/>

</div>

}

else

{

<div class="column w220">

<img src="@dynamicMediaItem.GetCropUrl("portrait")" alt="@dynamicMediaItem.Name" style="padding:5px 5px 5px 5px"/>

</div>

}

<div class="column w220">

<center><span style="line-height: 1.4em; padding:5px 5px 5px 5px;font-size: 16px; font-weight: bold;">@page.Name</span></center>

</div>

<div class="column w220">

<span style="float:right; padding:10px 10px 10px 10px;">@page.summary</span>

</div>

<div class="column w470">

<p><a class="buttonGrey block w160" target="_blank" [email protected] rel="nofollow">@page.Name<span class="arrow"></span></a></p>

           </div>

</div>

}

}

Hi Tony

You'll need to have a look at the height and width to figure out, which state the image is in.

If the image height is greater than the width it's in portrait mode and if the image width is greater than the height it's landscape. That's all there should be to it I think :)

Hope this makes sense.

/Jan

Hi Jan

That's the problem I can't get the code to work for grabbing the width and height! My if statement appears on the front end with both images! 

Any ideas?

Thanks.

Tony

Hi Tony

Have you checked if the width and height variables get the correct values? What happens if you don't check for whether it's also equal to the height but just check if it's greater than the height?

/Jan

..Actually you should probably just check if the height is greater than the width and then render the code for the portrait mode otherwise just render landscape. Then you just need to check if(height > width).

/Jan

Hi Jan

I tried this:

if (page.HasValue("image"))

{                                         

            <div class="content-page-wide-box">

var dynamicMediaItem = Umbraco.TypedMedia(page.image);

int width = dynamicMediaItem.GetPropertyValue<int>("umbracoWidth");

            int height = dynamicMediaItem.GetPropertyValue<int>("umbracoHeight");

if (width < height)

{

<div class="column w220">

<img src="@dynamicMediaItem.GetCropUrl("portrait")" alt="@dynamicMediaItem.Name" style="padding:5px 5px 5px 5px"/>

</div>

<div class="column w220">

<center><span style="line-height: 1.4em; padding:5px 5px 5px 5px;font-size: 16px; font-weight: bold;">@page.Name</span></center>

</div>

<div class="column w220">

<span style="float:right; padding:10px 10px 10px 10px;">@page.summary</span>

</div>

<div class="column w470">

<p><a class="buttonGrey block w160" target="_blank" [email protected] rel="nofollow">@page.Name<span class="arrow"></span></a></p>

           </div>

}

else

{

<div class="column w220">

<img src="@dynamicMediaItem.GetCropUrl("foundation")" alt="@dynamicMediaItem.Name" style="padding:5px 5px 5px 5px"/>

</div>

<div class="column w220">

<center><span style="line-height: 1.4em; padding:5px 5px 5px 5px;font-size: 16px; font-weight: bold;">@page.Name</span></center>

</div>

<div class="column w220">

<span style="float:right; padding:10px 10px 10px 10px;">@page.summary</span>

</div>

<div class="column w470">

<p><a class="buttonGrey block w160" target="_blank" [email protected] rel="nofollow">@page.Name<span class="arrow"></span></a></p>

           </div>

}

But now the name 'dynamicMediaItem' does not exist in the current context. I thought the div might have been causing problems....

I have two crop sizes set up in the cropper in data types, so the idea is if width < height produce the portrait crop or else produce the landscape crop. I was trying to use Jonas' code from here https://our.umbraco.org/forum/developers/razor/49409-Check-if-image-is-landscape-or-portrait but it doesn't like it. Maybe because my image is coming from a foreach loop....

Thanks.

Tony

Hi Tony

I think it's perhaps a matter of placing the @ sign the proper places...but it's a bit hard to get the full code context from above since the default rich text editor in the forum does not do a good job about formatting it...so could you try to paste it into pastebin.com for instance or switch to using the mark down version of the editor in this forum?

A simple approach for debugging the code is to simply comment out all the lines and then start checking the code line for line and see where and when it breaks and then figure out what is the trigger.

/Jan

Hi Jan

I sent the code to pastebin here http://pastebin.com/7n5gF20C Or else here:

@foreach(var page in CurrentPage.Children.Reverse().Take(5)) { dynamic image=null; if (page.HasValue("image")) {

        var dynamicMediaItem = Umbraco.TypedMedia(page.image);
        int width = dynamicMediaItem.GetPropertyValue<int>("umbracoWidth");
        int height = dynamicMediaItem.GetPropertyValue<int>("umbracoHeight");



            if (width < height)
            {
                <div class="column w220">
                    <img src="@dynamicMediaItem.GetCropUrl("portrait")" alt="@dynamicMediaItem.Name" style="padding:5px 5px 5px 5px"/>
                </div>
                <div class="column w220">
                    <center><span style="line-height: 1.4em; padding:5px 5px 5px 5px;font-size: 16px; font-weight: bold;">@page.Name</span></center>
                </div>
                <div class="column w220">
                    <span style="float:right; padding:10px 10px 10px 10px;">@page.summary</span>
                </div>
                <div class="column w470">
                    <p><a class="buttonGrey block w160" target="_blank" [email protected] rel="nofollow">@page.Name<span class="arrow"></span></a></p>
                </div>
            }
            else
            {
                <div class="column w220">
                    <img src="@dynamicMediaItem.GetCropUrl("foundation")" alt="@dynamicMediaItem.Name" style="padding:5px 5px 5px 5px"/>
                </div>
                <div class="column w220">
                    <center><span style="line-height: 1.4em; padding:5px 5px 5px 5px;font-size: 16px; font-weight: bold;">@page.Name</span></center>
                </div>
                <div class="column w220">
                    <span style="float:right; padding:10px 10px 10px 10px;">@page.summary</span>
                </div>
                <div class="column w470">
                    <p><a class="buttonGrey block w160" target="_blank" [email protected] rel="nofollow">@page.Name<span class="arrow"></span></a></p>
                </div>  

            }


        </div>
    }

Hi Tony

Sorry I forgot to get back to you on this one - Glad you found the solution and thanks for sharing :)

/Jan

Hi Jan

No worries! I was off for a couple of days too - great to get some air!!

Thanks. Tony

is working on a reply...