SizePlus [Updated: 07/28/09]
Development and Programming
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
Thanks, I’ve been on holiday but I am dying to try both suggestions - I did discover that basically any image which wherin width/height > 2 is likely to cause problems. But it should be possible to be more precise. We’re still aiming for…
- 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
I am gonna play with the promising PHP you banged out and see what I can do. Also be fun to see what kind of overhead this produces on a gallery of 50 or 60 small thumbnails 😊 Thanks again for your help.
I’ve got something to work, by changing PHP to parse on output - something I know you suggested in the beginning, something I tried and for some reason didn’t work then. It worked this time.
I decided the tipping point ratio was around 2.2
{exp:sizeplus loc="{image-path}"}
<? $img_width = "{sp_width}"; $img_height = "{sp_height}"; ?>
<? if (round($img_width / $img_height, 2) < 2.2){;?>
{exp:imgsizer:size src="{image-path}" height="400"}
{embed="includes/edit_link" weblog_id="{weblog_id}" entry_id="{entry_id}"}
<a href="http://{sized}" rel="/{categories limit=" title="{title}" class="gallery-image">{exp:imgsizer:size src="{image-path}" height="55" alt="{title}" id="image_{entry_id}" class="entry_img"}</a>
{/exp:imgsizer:size}
<?}else{?>
{exp:imgsizer:size src="{image-path}" width="800"}
{embed="includes/edit_link" weblog_id="{weblog_id}" entry_id="{entry_id}"}
<a href="http://{sized}" rel="/{categories limit=" title="{title}" class="gallery-image">{exp:imgsizer:size src="{image-path}" height="55" alt="{title}" id="image_{entry_id}" class="entry_img"}</a>
{/exp:imgsizer:size}
<?};?>
{/exp:sizeplus}I wish it were possible to just switch in the width or height constraint, as both blocks are otherwise identical - and must be maintained identically over time (kind of annoying), but definitely a worthwhile tradeoff from forcing editors to consider the dimensions and flag the ones which posed problems.
Thanks a ton for your feedback and help as I wrestled with this. If you have any comments or optimizations, you’re welcome to fire away.
…<snip>… It worked this time.
Cool! Glad you got it working finally! 😊
I decided the tipping point ratio was around 2.2 …<snip>…
Sweet. Yah, I am glad that using the aspect ratio helped… I have never tried that before, but seems like a decent way to gauge things.
…<snip>… but definitely a worthwhile tradeoff from forcing editors to consider the dimensions and flag the ones which posed problems.
Yah, I agree. 😊
Thanks a ton for your feedback and help as I wrestled with this. If you have any comments or optimizations, you’re welcome to fire away.
Sure thing. I am glad to help. 😊
I do not see anything wrong with your code… But if you are interested, here is how I would have wrote it:
{exp:sizeplus loc="{image-path}"}<?php $img_width = '{sp_width}'; $img_height = '{sp_height}'; ?>{/exp:sizeplus}
<?php if (round($img_width / $img_height, 2) < 2.2) { ?>
{exp:imgsizer:size src="{image-path}" height="400"}
{embed="includes/edit_link" weblog_id="{weblog_id}" entry_id="{entry_id}"}
<a href="http://{sized}" rel="????" title="{title}" class="gallery-image">{exp:imgsizer:size src="{image-path}" height="55" alt="{title}" id="image_{entry_id}" class="entry_img"}</a>
{/exp:imgsizer:size}
<?php } else { ?>
{exp:imgsizer:size src="{image-path}" width="800"}
{embed="includes/edit_link" weblog_id="{weblog_id}" entry_id="{entry_id}"}
<a href="http://{sized}" rel="????" title="{title}" class="gallery-image">{exp:imgsizer:size src="{image-path}" height="55" alt="{title}" id="image_{entry_id}" class="entry_img"}</a>
{/exp:imgsizer:size}
<?php } ?>Hope the rest of your project goes smoothly. 😊
Cheers, Micky
Oh, I did not notice this before, but it looks like the “rel=” part of your code did not translate via the forums… I think that if you post code with nested quotes, you need to escape them properly:
” <– outside double quote. ’ <– inside single quote –> ’ outside double quote –> “
In other words:
{ee:tag foo="{ee:tag foo='single-quotes'}"}Also, I am not sure if I would nest the image sizer plugin like you are doing… But if it works, then it works! :D
My main concern with nesting the image sizer plugin is that the image sizer variables could pollute each other? Well, maybe not… Esp. if you keep the second image sizer call as self-closing?
Anyway, cheers!
Micky
>>> Plugin Updated <<<
Download v1.1 from first post in this thread.
Example 01:
{exp:sizeplus loc="/images/uploads/cache/megan-v50-0x640.jpg"}
URL: {sp_url}
{if sp_domain != ''}
Domain: {sp_domain}
{if:else}
NO DOMAIN
{/if}
Base: {sp_base}
{if sp_width != ''}
Width: {sp_width}
{if:else}
NO WIDTH
{/if}
{if sp_height != ''}
Height: {sp_height}
{if:else}
NO HEIGHT
{/if}
Name: {sp_name}
Extension: {sp_ext}
{if sp_ratio > 0}
Ratio: {sp_ratio}
{if:else}
RATIO <= 0
{/if}
{if sp_flash}
Show Flash
{if:else}
NOT FLASH
{/if}
{if spq_foo1 != ''}
{spq_foo1}
{if:else}
spq_foo1 NOT SET
{/if}
{if spq_foo2 == 'baz'}
{spq_foo2}
{if:else}
spq_foo2 NOT BAZ
{/if}
{/exp:sizeplus}Output 01:
URL: /home2/hulseme/public_html/images/uploads/cache/megan-v50-0x640.jpg NO DOMAIN Base: /images/uploads/cache/ Width: 640 Height: 640 Name: megan-v50-0x640 Extension: jpg Ratio: 1 NOT FLASH spq_foo1 NOT SET spq_foo2 NOT BAZ
Example 02:
{exp:sizeplus loc="http://hulse.me/images/uploads/cache/megan-v50-0x640.jpg?foo1=bar&foo2=baz"}
URL: {sp_url}
{if sp_domain != ''}
Domain: {sp_domain}
{if:else}
NO DOMAIN
{/if}
Base: {sp_base}
{if sp_width != ''}
Width: {sp_width}
{if:else}
NO WIDTH
{/if}
{if sp_height != ''}
Height: {sp_height}
{if:else}
NO HEIGHT
{/if}
Name: {sp_name}
Extension: {sp_ext}
{if sp_ratio > 0}
Ratio: {sp_ratio}
{if:else}
RATIO <= 0
{/if}
{if sp_flash}
Show Flash
{if:else}
NOT FLASH
{/if}
{if spq_foo1 != ''}
{spq_foo1}
{if:else}
spq_foo1 NOT SET
{/if}
{if spq_foo2 == 'baz'}
{spq_foo2}
{if:else}
spq_foo2 NOT BAZ
{/if}
{/exp:sizeplus}Output 02:
URL:?foo1=bar&foo2=baz Domain: http://hulse.me Base: /images/uploads/cache/ Width: 640 Height: 640 Name: megan-v50-0x640 Extension: jpg Ratio: 1 NOT FLASH bar baz
New features:
- {sp_ratio}: This returns the aspect ratio.
- {sp_domain}: Returns the domain name/path.
- {sp_base}: Base path from root of server. I thought this would be handy for flash embeds (i.e.: params.base = “/assets/media/flash/box-shredz/”;)
Changes/fixes:
- I changed up the {url} a tad… See above for how it behaves.
- Plugin handles full urls better. See above.
Post here if you have any questions/concerns/comments/bugs to report.
Thanks! M
UPDATE: SizePlus 1.1.5
See first post for download.
I added a new single variable:
{sp_root}… which outputs the root url.
{sp_url}… now outputs the url you passed into the plugin. This variable can be useful like so:
{exp:sizeplus loc="/images/uploads/{image-01}{file_name}{/image-01}"}{sp_url}{/exp:sizeplus}Essentially, {sp_url} saves you from having to type the path twice.
Updated example usage:
{exp:sizeplus loc="/images/uploads/cache/megan-v50-0x640.jpg"}
URL: {sp_url}
Root: {sp_root}
{if sp_domain != ''}
Domain: {sp_domain}
{if:else}
NO DOMAIN
{/if}
Base: {sp_base}
{if sp_width != ''}
Width: {sp_width}
{if:else}
NO WIDTH
{/if}
{if sp_height != ''}
Height: {sp_height}
{if:else}
NO HEIGHT
{/if}
Name: {sp_name}
Extension: {sp_ext}
{if sp_ratio > 0}
Ratio: {sp_ratio}
{if:else}
RATIO <= 0
{/if}
{if sp_flash}
Show Flash
{if:else}
NOT FLASH
{/if}
{if spq_foo1 != ''}
{spq_foo1}
{if:else}
spq_foo1 NOT SET
{/if}
{if spq_foo2 == 'baz'}
{spq_foo2}
{if:else}
spq_foo2 NOT BAZ
{/if}
{/exp:sizeplus}… outputs this:
URL: /images/uploads/cache/megan-v50-0x640.jpg Root: /home2/hulseme/public_html/images/uploads/cache/megan-v50-0x640.jpg NO DOMAIN Base: /images/uploads/cache/ Width: 640 Height: 640 Name: megan-v50-0x640 Extension: jpg Ratio: 1 NOT FLASH spq_foo1 NOT SET spq_foo2 NOT BAZ
And this:
{exp:sizeplus loc="http://www.google.com/intl/en_ALL/images/logo.gif"}
URL: {sp_url}
Root: {sp_root}
{if sp_domain != ''}
Domain: {sp_domain}
{if:else}
NO DOMAIN
{/if}
Base: {sp_base}
{if sp_width != ''}
Width: {sp_width}
{if:else}
NO WIDTH
{/if}
{if sp_height != ''}
Height: {sp_height}
{if:else}
NO HEIGHT
{/if}
Name: {sp_name}
Extension: {sp_ext}
{if sp_ratio > 0}
Ratio: {sp_ratio}
{if:else}
RATIO <= 0
{/if}
{if sp_flash}
Show Flash
{if:else}
NOT FLASH
{/if}
{if spq_foo1 != ''}
{spq_foo1}
{if:else}
spq_foo1 NOT SET
{/if}
{if spq_foo2 == 'baz'}
{spq_foo2}
{if:else}
spq_foo2 NOT BAZ
{/if}
{/exp:sizeplus}… outputs this:
URL:Root: