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
    Jonas Gunnarsson
    0

    Check if image is landscape or portrait

    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

  • Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib
    Mar 25, 2014 @ 21:06
    Jeroen Breuer
    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

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Mar 25, 2014 @ 21:13
    Jan Skovgaard
    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

  • Jonas Gunnarsson 44 posts 194 karma points
    Mar 26, 2014 @ 08:56
    Jonas Gunnarsson
    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 

  • Charles Afford 1163 posts 1709 karma points
    Mar 26, 2014 @ 20:30
    Charles Afford
    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 :)

  • Tim 1193 posts 2675 karma points MVP 3x c-trib
    Mar 28, 2014 @ 10:54
    Tim
    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.

  • Jonas Gunnarsson 44 posts 194 karma points
    Mar 28, 2014 @ 13:43
    Jonas Gunnarsson
    0

    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.

  • Jonas Gunnarsson 44 posts 194 karma points
    Mar 31, 2014 @ 09:46
    Jonas Gunnarsson
    100

    I´ve solved it, just change from

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

    to

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

    Thanks everyone for the help.

    /Jonas

Please Sign in or register to post replies

Write your reply to:

Draft