Giter VIP home page Giter VIP logo

codeigniter-advanced-images's Introduction

CodeIgniter Advanced Images

An advanced image resize/cropping controller that will resize your images on the fly from preset dimensions.

Installation

  1. Download the files from github and place the in their corresponding folder (or use spark).
  2. Make sure you are using the .htaccess mod_rewrite: http://codeigniter.com/wiki/mod_rewrite
  3. Rename the controller and the media folder to your liking. (must be the same name)
  4. Add a custom route to your config/routes.php file. This will redirect all "non-existing-file" request to the media controller's resize method:
    $route['media/(:any)'] = 'media/resize/$1';
  5. Optional: autoload the image_helper by adding it to $autoload['helper'] array in your config/autoload.php file.

Configuration

In your config/images.php file you need to specify what preset sizes you will be using for your images:

/*
|--------------------------------------------------------------------------
| Image Preset Sizes
|--------------------------------------------------------------------------
|
| Specify the preset sizes you want to use in your code. Only these preset 
| will be accepted by the controller for security.
|
| Each preset exists of a width and height. If one of the dimensions are 
| equal to 0, it will automatically calculate a matching width or height 
| to maintain the original ratio.
|
| If both dimensions are specified it will automatically crop the 
| resulting image so that it fits those dimensions.
|
*/

$config["image_sizes"]["square"] = array(400, 400);
$config["image_sizes"]["rectangle"] = array(600, 400);
$config["image_sizes"]["long"] = array(200, 600);
$config["image_sizes"]["wide"] = array(600, 200);

$config["image_sizes"]["small"] = array(300, 0);
$config["image_sizes"]["medium"] = array(500, 0);
$config["image_sizes"]["large"] = array(800, 0);

Each preset has a width and a height. If one of the dimensions are equal to 0, it will automatically calculate a matching width or height to maintain the original ratio. if you specify both dimensions it will automatically crop the resulting image so that it fits those dimensions.

Library

The resize and crop logic is grouped in a library that extends CodeIgniter's 'image_lib' and adds a 'fit' function. You can use this library to resize and crop an image to fit the specified dimensions like this:

$config["source_image"] = '/path/to/image/mypic.jpg';
$config['new_image'] = '/path/to/new/image/newpic.jpg';
$config["width"] = 100;
$config["height"] = 100;
				
$this->load->library('image_lib', $config);
$this->image_lib->fit();

The function will return TRUE on sucess or FALSE on failure. Error messages can be read like the normal library with the display_errors() method.

When an image is cropped, the center axis is used by default. If you want to override this behaviour you can specify your own x_axis and y_axis.

Configuration options:

  • image_library: Sets the image library to be used.
  • library_path: Sets the server path to your ImageMagick or NetPBM library. If you use either of those libraries you must supply the path.
  • source_image: Sets the source image name/path. The path must be a relative or absolute server path, not a URL.
  • dynamic_output: Determines whether the new image file should be written to disk or generated dynamically. Note: If you choose the dynamic setting, only one image can be shown at a time, and it can't be positioned on the page. It simply outputs the raw image dynamically to your browser, along with image headers.
  • quality: Sets the quality of the image. The higher the quality the larger the file size.
  • new_image: Sets the destination image name/path. You'll use this preference when creating an image copy. The path must be a relative or absolute server path, not a URL.
  • width: Sets the width you would like the image set to.
  • height: Sets the height you would like the image set to.
  • x_axis: Sets the X coordinate in pixels (after resizing) for image cropping. For example, a setting of 30 will crop an image 30 pixels from the left.
  • y_axis: Sets the Y coordinate in pixels (after resizing) for image cropping. For example, a setting of 30 will crop an image 30 pixels from the top.

Usage

To resize and crop the images to the preset sizes you need to load the image_helper. This helper has a function image($path, $preset) that will translate a preset to a generated path that contains the dimensions for the controller or that will take you directly to the image if it has already been resized.

Use this helper in your view files like this:

<img src="<?php echo image("media/smiles.png", "wide"); ?>" alt="smiles" />

This will eventually translate into:

<img src="media/smiles-600x200.png" alt="smiles" />

The reason I add the dimensions to the original filename instead of the preset name is because when you would change the preset's dimensions, it would still load images with the old dimensions that were already generated instead of the new dimensions.

codeigniter-advanced-images's People

Contributors

jenssegers avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.