Umbraco mvc - check if image is landscape or portrait

Question

To begin with, I am not so familiar with mvc. But I have built a portfolio in Umbraco 7.0.3 where I select images through a multiple media picker and then loops them out on the page. What I need help with is to check if the image is portrait or landscape, and based on the set two different classes.

<div id="container" class="photos clearfix">
    @{
        var mediaID1 = Model.Content.GetProperty("images").Value.ToString().Split(',');
    }

    @foreach (var mediaID in mediaID1)
    {
        var media = umbraco.uQuery.GetMedia(mediaID);
        <div class="photo">
            <a href="@media.GetImageUrl()" rel="shadowbox[gallery]"><img class="small-image" src="@media.GetImageUrl()" /></a>
        </div>
    }

</div>

Something like this

<div id="container" class="photos clearfix">

    @{
        var mediaID1 = Model.Content.GetProperty("images").Value.ToString().Split(',');
    }

    @foreach (var mediaID in mediaID1)
    {
        var media = umbraco.uQuery.GetMedia(mediaID);
        if(portratit)
        {
        <div class="photo">
            <a href="@media.GetImageUrl()" rel="shadowbox[gallery]"><img class="small-image" src="@media.GetImageUrl()" /></a>
        </div>
        }
        else
        {
        <div class="photo w2">
            <a href="@media.GetImageUrl()" rel="shadowbox[gallery]"><img class="small-image" src="@media.GetImageUrl()" /></a>
        </div>
        }
    }
</div>

Obviously, I understand that I can´t write like this, but just wanted to clarify what I'm after.

Thanks, Jonas

Answer 1

I got it work.

        @foreach (var mediaID in mediaID1)
    {

        var media = Umbraco.TypedMedia(mediaID);


        if (media != null)
        {
            int width = media.GetPropertyValue<int>("umbracoWidth");
            int height = media.GetPropertyValue<int>("umbracoHeight");


            if (@width < @height)
            {
                <div class="photo w2">

                    <a href="@media.Url()" rel="shadowbox[gallery]"><img class="small-image" src="@media.Url()" /></a>

                </div>

            }
            else
            {
                <div class="photo">
                    <a href="@media.Url()" rel="shadowbox[gallery]"><img class="small-image" src="@media.Url()" /></a>

                </div>
            }
        }
    }