check if image is landscape or portrait

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Jonas Gunnarsson 44 posts 194 karma points

Mar 25, 2014 @ 17:58

To begin with, I am not so familiar with mvc and razor. 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>
    }

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

Copy Link

Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib

Mar 25, 2014 @ 21:06

1

Hello,

There is probably a library for this which you can use. Maybe this can help: http://stackoverflow.com/questions/2601587/how-to-tell-if-a-photo-was-taken-in-landscape-or-portrait-jpeg-net-metadata-or

I see that you are using uQuery.GetMedia(). This is an old API and it's better to use Umbraco.TypedMedia(). More info here: http://our.umbraco.org/documentation/Reference/Mvc/querying

Jeroen

Copy Link
Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib

Mar 25, 2014 @ 21:13

0

Hi Jonas

You should be able to fetch the dimensions of the image and then it should be a matter of deciding wether width is greater or smaller than the height to determine, if it's portrait or not.

Do you need a code example on this?

/Jan

Copy Link
Jonas Gunnarsson 44 posts 194 karma points

Mar 26, 2014 @ 08:56

0

Thanks Jeroen, I´m not quite sure how I can use the library in my project. But I'll check on Umbraco.TypedMedia ().

Hi Jan, I understand the concept and I have seen solutions in jQuery, and I could probably solve it tradiotinell. net. But I don´t understand how I can solve it here, so some code would be appreciated. Or least a kick in the right direction;-)

Thanks,
Jonas

Copy Link
Charles Afford 1163 posts 1709 karma points

Mar 26, 2014 @ 20:30

0

My guess is you will need the media url to create a .net Media object from that you could tell if it was landscape of portrait. Also if you use something like cropup that api will probably tell you :)

Copy Link
Tim 1193 posts 2675 karma points MVP 4x c-trib

Mar 28, 2014 @ 10:54
0
The typed media object for the images should contain properties for width and height, which you can use to check if the image is portrait or landscape. You can use something like:
```
var media = Umbraco.TypedMedia(mediaId);
if (media != null)
{
    int width = media.GetPropertyValue<int>("width");
    int height = media.GetPropertyValue<int>("height");
}
```
You can then compare width and height to see what format the image is in. You could even write an extension method so that you can use the check in all your views.
Copy Link

Jonas Gunnarsson 44 posts 194 karma points

Mar 28, 2014 @ 13:43

Thanks Tim, but unfortunately it doesn't work.

My code

@foreach (var mediaID in mediaID1)
{
    //var img = umbraco.uQuery.GetMedia(mediaID);
    var media = Umbraco.TypedMedia(mediaID);
    if (media != null)
    {
            int width = media.GetPropertyValue<int>("width");
            int height = media.GetPropertyValue<int>("height");


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

I just get class photo w2.

Edit: I tested to write out width and height, and I got 0.

Copy Link

Jonas Gunnarsson 44 posts 194 karma points

Mar 31, 2014 @ 09:46

I´ve solved it, just change from

int width = media.GetPropertyValue<int>("width");
int height = media.GetPropertyValue<int>("height");

int width = media.GetPropertyValue<int>("umbracoWidth");
int height = media.GetPropertyValue<int>("umbracoHeight");