Please login or register.

Login with username, password and session length
Advanced search  

Author Topic: A ridiculously easy-to-use PHP script for resizing images the smart way  (Read 1932 times)

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web

Quote
The major advantage of this script is that it allows me to resize and crop any image on my website without touching the actual image or writing any code. I upload each image once at a high enough resolution and can then reuse it at any size I want, anywhere I want. It doesn’t matter if the images are in a post, on a page, or in a template file–it just works. All of the magic is done through the query string part of the URL in the src attribute of the img  tag.
Quote
With such a tool, you can upload a large image once, and then just ask for the right format in your templates. Great for news/content sites who use one image in 2-4 different formats (small thumbnail, medium thumbnail, page display, full picture…).

I don’t see a lot of CMSs that offer such image manipulation possibilities. And even when they do, the content producer needs to use the tool in the right way or some things might not work. With Smart Image Resizer, you can fix this at the webdesigner level (in the website’s templates, for instance).
Dudes tell us what ya think of it. => http://shiftingpixel.com/2008/03/03/smart-image-resizer/
It works real fine. Give it a try.
That could make a nice add-on, hum?

Fred K

  • Still trying to learn stuff
  • ULTIMATE member
  • ******
  • Karma: 130
  • Posts: 2728
    • Personal

I use this trick from time to time (depending on the nature and exposure of the site) except I use CSS to do the same 'manipulation'. E.g upload one large version of the images, then use CSS dimensions to set various width/height values for different contexts. Obviously the large version shouldn't be *too* heavy, but other than that I don't see any real drawbacks with it. Example:

Code: [Select]
img.full {width:100%; height:auto;}
.thumb img {width:160px; height:auto;}
#navigation a img {width:64px; height:auto;}

Personally I feel that image properties, same as container or text properties, are better off handled by CSS than PHP or Javascript. But that's just my opinion. As a concept, smart-image-resizer is good.
Logged

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web

You are right: most of the times using HTML and CSS is enough.
I've tested it just to see since I'm not going to use it.
I just thought of a Mod which would automatically create this kind of thumb for being displayed on the home page. So you'ld have the vignette on the home page and when on the article page, the real size one.

Sven

  • ULTIMATE member
  • ******
  • Karma: 88
  • Posts: 2029
  • Chasing MY bugs!
    • hiseo.fr - rédacteur Web

I use this trick from time to time (depending on the nature and exposure of the site) except I use CSS to do the same 'manipulation'. E.g upload one large version of the images, then use CSS dimensions to set various width/height values for different contexts. Obviously the large version shouldn't be *too* heavy, but other than that I don't see any real drawbacks with it. Example:
Code: [Select]
img.full {width:100%; height:auto;}
.thumb img {width:160px; height:auto;}
#navigation a img {width:64px; height:auto;}
I reminds me of a trick to display kinda litebox with no framework:
the HTML:
Code: [Select]
<div class="thumb">
<a href ="javascript:void(0)" onclick="document.getElementById('large') .style.display='block';document.getElementById('small') .style.display='block'">
<img src="image.jpg" alt="" /></a>
</div>
<div id="large" class="window_content">
<img src="image.jpg" alt="" class="full" />
<a href="javascript:void(0)" onclick="document.getElementById('large').style.display='none'; document.getElementById('small') .style.display='none'">Fermer la fenêtre</a>
</div>
<div id="small" class="window_obscur"></div>
and the CSS part:
Code: [Select]
div.thumb img {width:160px; height:auto;}

div.vign{float:left;margin-right:8px;border-top:4px solid #FC0;border-right:4px solid #FC0;border-bottom:1px solid #FC0;.border-bottom:4px solid #FC0;border-left:4px solid #FC0;padding:0;background:#FC0}

.window_obscur{z-index:99;display: none;position: fixed;top: 0%;left: 0%;width: 100%;height: 100%;
-moz-opacity: 0.8; opacity:.80;filter: alpha(opacity=80);background:#000}

.window_content{z-index:100;position:absolute;display:none;overflow:auto;border-top:16px solid #FC0;border-right:16px solid #FC0;border-bottom:14px solid #FC0;border-left:16px solid #FC0;background:#FC0;overflow:hidden}

.window_content a{display: block;font-size:1.6em;font-weight: bold;color:#000;background: #FFCC00 no-repeat left 84%;padding-left: 30px;padding-top:10px;text-decoration: none}

.window_content a:hover{background: #FFCC00 no-repeat left 84%;color:#999}
A litebox with no framework with 1 image. Not sure, but I think I did'nt receive any complaint (it was 2 years ago for a friend).