EllisLab text mark
Advanced Search
1 of 2
1
   
SizePlus [Updated: 07/28/09]
Posted: 17 May 2007 08:54 PM
Joined: 2006-02-22
424 posts

My other plugins:

New! [RandPro, v.1] & [Random Image Display, Plus!, v2.1]

x2html: Converts XHTML to HTML

—————————————————

07/28/09: Plugin updated

SizePlus v.1.1.5
Download at bottom of this post.
Read more about 1.1.5 here.

—————————————————

SizePlus v.1

Several months ago, at my current part-time job, I was required to display different types of multimedia content (Quicktime, SlideShowPro, SoundSlides, and/or jpgs/gifs/pngs—all of varying sizes) on one single-entry (permalink/comments) page…

Until now, I was using several different custom fields and a bit of PHP in order to determine what is what and where what should go…

Long story short, I created the SizePlus plugin—now I can use one custom field and turn-off PHP in my template…

For me, this plugin makes my single-entry template(s) more manageable.

I have included an example template and dependent files in the SizePlus zip file.

Please feel free to ask questions here. I have not had a chance to fully test this plugin, so please let me know if you experience any troubles.

INTENDED USE:
Make it easier to display different types of multimedia content on single entry pages.

REQUIRED PARAMETERS:
“loc”: Here are a few different examples:
1. /location/from/root/to/folder/file.ext
2. http://www.foo.com/path/to/folder/file.ext
3. http://ellislab.com/asset/images/team-photo//path/to/folder/file.ext?querystring=1&keepitbasic=true

BASE/DEFAULT SINGLE VARIABLES:
“sp_flash”: TRUE/FALSE test for Flash-based content.
“sp_width”: Width, dynamically obtained.
“sp_height”: Height, dynamically obtained.
“sp_name”: File name without extension.
“sp_ext”: Extension.

OPTIONAL USER-DEFINED SINGLE VARIABLES:*
Using the below URL as example:
http://ellislab.com/asset/images/team-photo//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.

USAGE:

{exp:sizeplus loc="{custom_field}"}
{if sp_flash}Show Flash{if
:else}Do something else{/if},
Absolute URL{sp_url}Width{sp_width}Height{sp_height}Name{sp_name}Extension{sp_ext}
{
/exp:sizeplus} 

EXAMPLE OUTPUT:
Do something else, /images/random/foo.jpg, 811, 150, foo, jpg

NOTES:
- Image width/height is dynamically obtained.
- The query string feature should be used wisely. Keep it simple and avoid weird characters.
- Some file formats will not return a proper widht/height (i.e. quicktime .mov), this is where the query string comes in handy.
- I suggest using SWFobject to embed Flash.
- An unobtrusive SWFobject alternative (UFO).
- For simple quicktime (and Flash) embeds, use Objecty.
- Feel free to use this plugin in your CSS (some restrictions apply, ask questions here if curious)
- I posted some decent info about Flash and wmode here.
- Additionally, feel free to peruse my wishlists (hint hint, nudge nudge, know what I mean? Say no more!) LOL

File Attachments
sizePlus[v1].zip  (File Size: 89KB - Downloads: 485)
pi.sizeplus.1.1.5.zip  (File Size: 3KB - Downloads: 343)
 Signature 

EE2 Plugins: Eencode, Includee, Keywordz, x2html, SizePlus, APStylee

 
Posted: 28 June 2009 03:14 AM   [ # 1 ]   [ Rating: 0 ]
Avatar
Joined: 2005-02-28
59 posts

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.

 
Posted: 28 June 2009 09:15 PM   [ # 2 ]   [ Rating: 0 ]
Joined: 2006-02-22
424 posts
goodcompany - 28 June 2009 07:14 AM

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. smile

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}
            
<p>Width is greater than height</p>
            <
img class="spice" src="{sp_url}" width="{sp_width}" height="{sp_height}" alt="blog entry photo">
        
{if:else}
            
<p>Height is greater than width</p>
            <
img class="spice" src="{sp_url}" width="{sp_width}" height="{sp_height}" alt="blog entry photo">
        
{/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"}
    
<img class="spice" src="{sized}" width="{width}" height="{height}" alt="blog entry photo">
{/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. smile

Is that of any help?

Thanks!
Micky

 Signature 

EE2 Plugins: Eencode, Includee, Keywordz, x2html, SizePlus, APStylee

 
Posted: 30 June 2009 07:49 AM   [ # 3 ]   [ Rating: 0 ]
Avatar
Joined: 2005-02-28
59 posts

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 grin Thanks again.

 
Posted: 30 June 2009 01:20 PM   [ # 4 ]   [ Rating: 0 ]
Joined: 2006-02-22
424 posts
goodcompany - 30 June 2009 11:49 AM

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 grin Thanks again.

Sounds good. smile

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

Have a great day!
Cheers,
Micky

 Signature 

EE2 Plugins: Eencode, Includee, Keywordz, x2html, SizePlus, APStylee

 
Posted: 30 June 2009 07:12 PM   [ # 5 ]   [ Rating: 0 ]
Avatar
Joined: 2005-02-28
59 posts

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

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

<a href="{sized}" rel="/{categories limit=" class="gallery-image" title="{title}">{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="{sized}" rel="/{categories limit=" class="gallery-image" title="{title}">{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.

 
Posted: 01 July 2009 12:28 AM   [ # 6 ]   [ Rating: 0 ]
Joined: 2006-02-22
424 posts

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. smile

Thanks!
M

 Signature 

EE2 Plugins: Eencode, Includee, Keywordz, x2html, SizePlus, APStylee

 
Posted: 01 July 2009 01:10 AM   [ # 7 ]   [ Rating: 0 ]
Joined: 2006-02-22
424 posts

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="{sized}">
                        <
img class="spice" id="image_{entry_id}" class="entry_img" src="{sized}" width="{width}" height="{height}" alt="blog entry photo">
                    </
a>
                    
                
{/exp:imgsizer:size}
                
            {if
:else}
            
                
                 {exp
:imgsizer:size src="/images/uploads/{image-01}{file_name}{/image-01}" height="400"}
                    
                    
<a href="{sized}">
                        <
img class="spice" id="image_{entry_id}" class="entry_img" src="{sized}" width="{width}" height="{height}" alt="blog entry photo">
                    </
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. smile

Thanks!
Micky

 Signature 

EE2 Plugins: Eencode, Includee, Keywordz, x2html, SizePlus, APStylee

 
Posted: 01 July 2009 01:20 AM   [ # 8 ]   [ Rating: 0 ]
Joined: 2006-02-22
424 posts

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

 Signature 

EE2 Plugins: Eencode, Includee, Keywordz, x2html, SizePlus, APStylee

 
Posted: 02 July 2009 11:57 AM   [ # 9 ]   [ Rating: 0 ]
Avatar
Joined: 2005-02-28
59 posts

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.

 
Posted: 02 July 2009 01:35 PM   [ # 10 ]   [ Rating: 0 ]
Joined: 2006-02-22
424 posts

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"}
<img class="spice" src="{sized}" width="{width}" height="{height}" alt="Blog entry photo">
{/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. smile

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

Cheers,
Micky

 Signature 

EE2 Plugins: Eencode, Includee, Keywordz, x2html, SizePlus, APStylee

 
Posted: 02 July 2009 02:25 PM   [ # 11 ]   [ Rating: 0 ]
Avatar
Joined: 2005-02-28
59 posts

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.

 
Posted: 06 July 2009 12:35 AM   [ # 12 ]   [ Rating: 0 ]
Joined: 2006-02-22
424 posts

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:

http://sandbox.hulse.me/checkbox.png

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

M

 Signature 

EE2 Plugins: Eencode, Includee, Keywordz, x2html, SizePlus, APStylee

 
Posted: 06 July 2009 06:52 AM   [ # 13 ]   [ Rating: 0 ]
Avatar
Joined: 2005-02-28
59 posts

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 wink

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

 
Posted: 07 July 2009 12:17 AM   [ # 14 ]   [ Rating: 0 ]
Joined: 2006-02-22
424 posts
goodcompany - 06 July 2009 10:52 AM

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

 Signature 

EE2 Plugins: Eencode, Includee, Keywordz, x2html, SizePlus, APStylee

 
Posted: 07 July 2009 03:13 AM   [ # 15 ]   [ Rating: 0 ]
Joined: 2006-02-22
424 posts

One last thought I had… Could you use the aspect ratio to determine what to do with said image?

width/height = aspect ratio

Maybe if you determine what your median aspect ratio is, and then handle the image resizing accordingly?

Cheers,
M

 Signature 

EE2 Plugins: Eencode, Includee, Keywordz, x2html, SizePlus, APStylee

 
1 of 2
1