SizePlus [Updated: 07/28/09]

Um…has no one ever replied to this? Strange that there’s no questions or comments after 130+ downloads. I found this to be almost exactly what I need, if you are still around I have a question.

That is, using your plug-in, is it possible to test if an image is portrait oriented or landscape oriented? Thanks.

is it possible to test if an image is portrait oriented or landscape oriented? Thanks.

Hey there!

Thanks for message… It has been a while now since I developed this plugin – I am glad to see that some folks are still finding it useful. 😊

Not sure if this will be helpful, but maybe this will work for you:

{if image-01 != ""}
    {exp:sizeplus loc="/images/uploads/{image-01}{file_name}{/image-01}"}
        {if sp_width > sp_height}
            Width is greater than height
            {sp_url}
        {if:else}
            Height is greater than width
            {sp_url}
        {/if}
    {/exp:sizeplus}
{/if}

Where “image-01” is my custom field…

In the above code example, I am using Mark Huot’s “File” extension.

Also, if you are only using this plugin for images, you might want to check out the Image Sizer plugin because it also gives you the width/height, plus it resizes and caches your images. Here is example that also uses the “File” extension:

{exp:imgsizer:size src="/images/uploads/{image-01}{file_name}{/image-01}" width="640"}
    {sized}
{/exp:imgsizer:size}

Not 100% positive, but I am sure you could say {if width > height}do somehting{if:else}Do something else{/if} using the image sizer plugin.

Now, if you do not need re-sizing of images, then maybe my plugin is a better pick… Just htought I would throw out an alternative. 😊

Is that of any help?

Thanks! Micky

It’s a lot of help, but I am still struggling with it. I think it has something to do with the scope of these variables, and my mix of image Sizer (which I love, and am using) and your plugin. I will post details on exactly what the problem is as soon as I understand even that much 😊 Thanks again.

It’s a lot of help, but I am still struggling with it. I think it has something to do with the scope of these variables, and my mix of image Sizer (which I love, and am using) and your plugin. I will post details on exactly what the problem is as soon as I understand even that much 😊 Thanks again.

Sounds good. 😊

If you feel like posting some code, I will do my best to help you problem solve.

Have a great day! Cheers, Micky

OK…It’s a bit like this… :-) Here is what I am starting with.

{exp:imgsizer:size src="{image-path}" width="400"}

<a href="http://{sized}" rel="/{categories limit=" title="{title}" class="gallery-image">{exp:imgsizer:size src="{image-path}" height="70" alt="{title}" id="image_{entry_id}" class="entry_img"}</a>
{/exp:imgsizer:size}

Problem is that certain landscape images become far too wide for an average browser viewport when sized to a height of 400. Not ALL landscape images exhibit this problem - but that’s complicating things for now. So let’s start with the assumption that we want to size all portrait images differently from all landscape images.

Back to the above example, I’m trying to add a PHP variable in the first line based on the dimensions of the image being linked to. I keep trying variations on the following:

{exp:sizeplus loc="{image-path}"}
    {if sp_width == sp_height}
        <?$constrain = 'height="400"' ;?>
    {if:elseif sp_width > sp_height }
        <?$constrain = 'width="800"' ;?>
    {if:else}
        <?$constrain = 'height="400"' ;?>
    {/if}
{/exp:sizeplus}

{exp:imgsizer:size src="{image-path}" <?echo $constrain;?>}

<a href="http://{sized}" rel="/{categories limit=" title="{title}" class="gallery-image">{exp:imgsizer:size src="{image-path}" height="70" alt="{title}" id="image_{entry_id}" class="entry_img"}</a>
{/exp:imgsizer:size}

Problem is it just spits out whatever variable I set last in my PHP block - I can reorder my if/else statements so that “width=800” comes last, and that’s what all images will be given. Something isn’t correct, could be my abysmal PHP skills.

Now that I’ve give you the basic gist of it. I will introduce the sad fact that what I actually need to do isn’t this cut and dry.

Example: An image which is 1200 pixels wide and 1000 pixels high, will be far too tall for the viewport if sized to 800 pixels wide - so it’s not be any means all landscape oriented images which should be constrained by width. Only those which when constrained by width do not exceed a height of 400 pixels :-S

The ultimate goal of course being to show images as large as possible without creating scrollbars in the majority of browsers running more or less full screen at a resolution of 1024 x 768)

So…are we having fun yet? Any advice or input you can offer would be really welcome.

Hey!

Testing code now.

I think the problem is with the PHP and the parsing order… I will try to help you find a solution. 😊

Thanks! M

Hi,

Looking at your example, I am a little confused about the nesting of the {exp:imgsizer:size} plugin… In the little testing that I have done, nesting that plugin yields unpredictable results (I would advise against doing it.) :(

With that said, would something similar to this work:

{assign_variable:weblog="hulse"}

{exp:weblog:entries weblog="{weblog}" dynamic="off" rdf="off" orderby="date" disable="member_data|trackbacks"}
    
    {if image-01 != ""}
        
        {exp:sizeplus loc="/images/uploads/{image-01}{file_name}{/image-01}"}
            
            {if sp_width > sp_height}
                
                 {exp:imgsizer:size src="/images/uploads/{image-01}{file_name}{/image-01}" width="800"}
                    
                    <a href="http://{sized}">_                        {sized}_                    </a>
                    
                {/exp:imgsizer:size}
                
            {if:else}
            
                
                 {exp:imgsizer:size src="/images/uploads/{image-01}{file_name}{/image-01}" height="400"}
                    
                    <a href="http://{sized}">_                        {sized}_                    </a>
                    
                {/exp:imgsizer:size}
                
            {/if}
            
        {/exp:sizeplus}
        
    {/if}
    
{/exp:weblog:entries}

Where “image-01” is your custom field with image URI…

There is a bit of redundancy in the above code, but I have found that you can run into problems (i.e. major headaches) when trying to mix advanced conditionals, PHP, and multiple plugins…

Let me know what you think… I can try to help you further if things are still not working. 😊

Thanks! Micky

Also, looking at this:

{exp:sizeplus loc="{image-path}"}
    {if sp_width == sp_height}
        <?$constrain = 'height="400"' ;?>
    {if:elseif sp_width > sp_height }
        <?$constrain = 'width="800"' ;?>
    {if:else}
        <?$constrain = 'height="400"' ;?>
    {/if}
{/exp:sizeplus}

On top of PHP probably not being the best solution for your situation (the parse order is an issue), it looks like you could re-work that conditional logic a little, and ditch the last “{if:else}”…

In other words, you are saying (please bear with me while I state the obvious):

IF WIDTH is exactly equal to HEIGHT : "height='400'"
ELSE IF WIDTH is greater than HEIGHT : "width='800'"
ELSE : "height='400'"

Maybe you could shorten that by saying:

IF WIDTH is greater than HEIGHT : "width='800'"
ELSE : "height='400'"

Actually, I think that explains why I changed up the IF/ELSE in my example code. :D

Thanks, and your example does work, very well in fact. And your simple but effective optimizations of my amateurish logic are also welcome.

Now, the hard part. This is actually the image which brought me to this problem in the first place…

http://www.flickr.com/photos/goodcompany/3681087845/sizes/o/

You see. Setting the height to 400 in Image Sizer works great for 98% of images I am dealing with. Portrait and square oriented images do fine of course. But because the majority of art canvases are somewhere between 4:3 and 16:9, most landscape oriented images also survive just fine. In other words, the majority of landscapes when sized to a height of 400 automatically have their widths reduced to a width of less than 950px (which would be the absolute max for viewing without scrollbars at 1024 x 768).

But then back to the image I’ve linked to, and you can see the problem. The original height is itself only just over 400 pixels…so sizing it down leaves us with an image much wider than 950.

Can you offer any input or advice on how to catch these (rare) cases either by using your plugin or via other means?

Here is the basic idea:

• Size to a height of 400 pixels if the resulting width will be 950 pixels or less

…and…

• Size to a width of 950 pixels if the resulting height will be 400 pixels or less

The goal being to get the largest possible image size that doesn’t exceed the user’s viewable area.

Does this sound a bit outlandish? Maybe it is. But I can’t see any way around it if the people uploading images shouldn’t consider at all the proportions of crop aspect of what they are uploading. Thanks again for your help.

Hey there!

I will have some more time later today to help you out (at work now), but here are a few things:

• The flickr image is in a private area… Even after I created an account, I still could not view. :(

• The image sizer plugin has an “auto” feature…

For example, here is how I am using it for a Photojournalist multimedia website:

{exp:imgsizer:size src="/mm/images/uploads/{image}{file_name}{/image}" auto="586"}
{sized}
{/exp:imgsizer:size}

Essentially, the “auto” parameter says “do not exceed this number in either direction.”

Maybe you could use the code I posted for widht/height if/else, but use “auto=”400”“/”auto=”800”“… Or something along those lines.

You could also do some math in advance…

In other words, using my plugin, you could get width/height, and then do some calculation to see if:

* Size to a height of 400 pixels if the resulting width will be 950 pixels or less …and… * Size to a width of 950 pixels if the resulting height will be 400 pixels or less

My math skills are escaping me at the moment, but I think that is what I would try. 😊

I will get back to you later after my work day! :D

Cheers, Micky

Thanks. The “auto” feature of Image Sizer is great, but it doesn’t help in this situation due to the fact that it will make the vast majority of landscape images too tall! (beyond 400px in height). The crux of the problem is really in assessing more than “if landscape, do this” or “if portrait, do this”, but digging into the exact aspect ratio of the image and performing an Image Sizer operation based on that info.

This was the image I was trying to show you earlier.

http://www.flickr.com/photos/goodcompany/3681087845/

When you give it a height of 400, it will be well over 1000 pixels in width (too wide!) - it responds well to fixing the width of course, but most landscapes become far too high when getting this treatment. (sigh).

I’ll need to dig into the math and get the exact values and do some calculations on those - not sure what the formula will look like but I’ll let you know if I crack it.

Hey there!

Sorry that I have not gotten back to you sooner… I have been sidetracked due to the 4th holiday and I am now on my vacation.

Anyway, I just thought of a possible solution for you.

My plugin allows you to specify variables on a per/entry basis:

OPTIONAL USER-DEFINED SINGLE VARIABLES:* Using the below URL as example: http://ellislab.com/images/uploads//path/to/folder/file.ext?querystring=foo&keepitbasic=true Based on the query string, you will then have access to two single variables, like so: 1: {spq_querystring}, 2: {spq_keepitbasic} Which will get translated to: 1: foo, 2: true Note: all query string variable names start with an “spq_” appension. *Please use this feature wisely.

For the images that need special handling, you setup a query string something like this:

?special=true

And, in your template, you could say:

{if (spq_special == "true") OR (sp_width > sp_height)}
{exp:imgsizer:size src="/images/uploads/{image-01}{file_name}{/image-01}" width="800"}
...

Heck, even better, maybe you could even use Mike Huot’s Checkbox Extension:

http://ellislab.com/forums/viewthread/38843/

And then setup a custom field checkbox where you say “Is this a special image?”:

{if (checkbox_special == "true") OR (sp_width > sp_height)}
{exp:imgsizer:size src="/images/uploads/{image-01}{file_name}{/image-01}" width="800"}
...

In other words, if the image needs special handling then you have your blogger check the “special” custom field. For example, this is from a blog where the blogger would choose to display a slideshow in a larger size:

It is not a fully dynamic solution, but I just thought I would throw that idea out there. 😊

M

It’s a great idea,…just have a custom field to flag the problematic images by hand - I’ll have to use this until I find a better one. The problem is of course you don’t want to leave an editor or a journalist to evaluate this on their own, when a machine could do the same and much more objectively and effectively.

Now it’s almost become something of a challenge I want to solve, seems so easy and straightforward on the face of it. Amazing that it should be so difficult to know the dimensions of your image and then be able to act on that knowledge 😉

Thanks for all your help. If you think of anything else let me know!

Thanks for all your help. If you think of anything else let me know!

I just slapped this code together:

http://sandbox.hulse.me/scripts/size.php

Here is a PHP function that you might find useful:

<?php
    
    function resized($x, $y, $t) {
        
        // Initialize:
        $return = array();
        // Percent:
        $return["percent"] = ($x > $y) ? ($t / $x) : ($t / $y);
        // Width:
        $return["width"] = round($x * $return["percent"]);
        // Height:
        $return["height"] = round($y * $return["percent"]);
        // Aspect ratio:
        $return["ratio"] = $x / $y;
        // Return array:
        return $return;
        
    }
    
?>

I call the above like so:

$meta = resized($width, $height, $target);

The function returns an array, so you can output the values like this:

<ol>
        <li>Width: <b><?php echo $meta["width"]; ?>px</b></li>
        <li>Height: <b><?php echo $meta["height"]; ?>px</b></li>
        <li>Percent of original: <b><?php echo round($meta["percent"], 3) * 100; ?>%</b></li>
        <li>Aspect ratio: <b><?php echo $meta["ratio"]; ?>:1</b></li>
    </ol>

You can check out the source code of my example page here:

http://sandbox.hulse.me/scripts/size.txt

Does that help you some?

Not tested, but maybe you could maybe use the above PHP function to determine the target width/height (you might have to tinker with your template’s parse order)… Depending on the return value(s), you could tell your script to spit out a re-sized image set at 800px wide or 400px tall.

Hmm, I wonder if it would be worth it to write a simple plugin for this? Any interest? Or, does the raw PHP suffice?

Cheers, Micky