Skip to content

Latest commit

 

History

History
71 lines (50 loc) · 2.82 KB

README.md

File metadata and controls

71 lines (50 loc) · 2.82 KB
Raw

resimagecrop - RESS based solution for cropping images for responsive design

Purpose

There are many solutions out there for responsive images, and this is just another one.

Disclaimer

This is most definitely a work in progress and lots of things can be done to improve it. Take it as a "proof of concept"

Features

  • RESS based
  • Allows cropping of images based on percentage x and y co-ordinates to aid art direction
  • Images can also be scaled
  • Created images are saved to aid caching (thanks to @tadywankenobi)
  • MIT license

Installation

  • Place resimagecrop.php in the root directory of your website (or anywhere else to be honest).
  • Use it.

Usage

Use resimagecrop.php in the src attribute of an img element with the following parameters:

  • image the relative link to the original local image file
  • x the percentage x co-ordinate value within the original image where a crop should begin
  • y the percentage y co-ordinate value within the original image where a crop should begin
  • w the pixel width of the original image that is to be cropped
  • h the pixel height of the original image that is to be cropped
  • sc the decimal scaling factor of the resulting image

Examples

<img src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=15&y=20&w=550&h=450" alt="A view of Saumur Castle in the Loire Valley in France" />

This is interpreted as: Take image img/saumur-castle-loire-valley-france.jpg and begin cropping it with dimensions 550x450 pixels, beginning from 15% from the top and 20% from the left.

<img src="resimagecrop.php?image=img/saumur-castle-loire-valley-france.jpg&x=15&y=20&w=550&h=450&sc=0.2" alt="A view of Saumur Castle in the Loire Valley in France" />

This is interpreted as: Take image img/saumur-castle-loire-valley-france.jpg and begin cropping it with dimensions 550x450 pixels, beginning from 15% from the top and 20% from the left, and scale the resulting image by a factor of 0.2 (20%).

Recommendations

It is recommended to use this in conjunction with something like Scott Jehl's picturefill script which will allow you to specify different images for different media queries.

Demos

Known Issues

  • Currently only returns JPGs
  • Doesn't save image file and therefore caching is not facilitated
  • Probably lots of other stuff that you clever people will notice and point out to me.