Git Product home page Git Product logo

wp-intervention's Introduction

WP Intervention

WP Intervention provides on-demand image manipulation for WordPress via the Intervention Library.

Why?

Traditionally, WordPress only provides fairly basic image manipulation facilities (eg: resize, crop). But what if you need to do more with your images? This is where WP Intervention comes in.

With WP Intervention you have the full suite of PHP Intervention's powerful image manipulation tools at your finger tips including:

...and many more!

Resulting images are cached to avoid any further unnecessary processing.

How?

All image manipulation is provided by the PHP Intervention Library.

WP Intervention merely provides a wrapper around Intervention and a convenient global function for use with WordPress.

This Plugin is currently aimed at developers and aims to be fully customisable via liberal usage of WordPress filters.

Installation

  1. Download a copy of this repository.

  2. Unzip and place the resulting folder within your WordPress Plugins directory (typically wp-content/plugins).

  3. Activate the Plugin from within WP Admin.

Please note: you will not see any settings pages within WP Admin. This Plugin currently requires you to call the image helper functions manually (see Usage below).]

Requirements

  • PHP >=5.4
  • Fileinfo Extension

Supported Image Libraries

  • GD Library (>=2.0)
  • Imagick PHP extension (>=6.5.7)

Please refer to the Intervention Library for full details.

Usage

Getting Started

Basic Usage

WP Intervention exposes a global helper wp_intervention for use in your Theme.

The API for this is:

wp_intervention( string $src, array $intervention_args [, array $options] );

The first parameter ($src) is the source image to be processed. This can be either:

  • a file path to an image (eg: ~/public_html/web/wp-content/uploads/foo.jpg).
  • a publicly accessible URL (eg: https://example.com/wp-content/uploads/foo.jpg).

Intervention Arguments

The second $intervention_args parameter is an settings array which determines the transformations to be applied to the image.

WP Intervention supports the same API as the underlying Intervention Library. Indeed, under the hood the Plugin simply proxies all arguments as method calls to PHP Intervention.

In the associative settings array the key should be the Intervention transformation name (eg: fit, blur...etc) and the value should be the arguments to pass to that transformation.

Example Usage

// Define a source image
$original_img = "..."; // source image file path or URL here

// An array of args to be *invoked* on Intervention
$intervention_args = array(

	// http://image.intervention.io/api/fit
	'fit' => array(
		'100',
		'600'
	),

	// http://image.intervention.io/api/blur
	'blur' => 20,

	// http://image.intervention.io/api/rotate
	'rotate' => -45
);

// Call the global helper function
$img_src = wp_intervention( $original_image, $intervention_args );

Methods are invoked on the underlying Intervention library in the order defined in the arguments array.

Refer to the documentation to learn more about the capabilities of Intervention (hint: it's pretty fully featured!).

Options

Note: these are not the image manipulation arguments passed to the Intervention Library.

There are also various options which can be modified by passing a 3rd argument to the global function on a per use case basis.

wp_intervention( $original_image, $intervention_args, array(
	'quality' => 100,
	'cache'   => false, // be careful about modifying this (see below)
	'debug'   => true, // enable verbose debug mode
) );

Options Settings

quality

Type: Integer

Default: 80

Description: A image quality setting ranging from 0-100.

cache

Type: Boolean

Default: true

Description: Whether or not to cache this particular image. If false the image will be re-generated by Intervention on each request which may place undue load on your server. Use wisely...

debug

Type: Boolean

Default: value of WP_DEBUG constant or (if not defined) false.

Description: Enable verbose debugging mode. Will throw and enable exceptions which would otherwise be silently caught by the wrapper. Useful for debugging.

Overriding the Default Options

The default settings for the options (see above) can be overidden globally by filtering on the hook wpi_default_options. For example

function modify_default_options( $options ) {
	$options['cache'] = false;
    return $options;
}
add_filter( 'wpi_default_options', 'modify_default_options' );

Image Driver Configuration

Intervention allows you to configure either GD or Imagick as the primary image driver. By default this is GD but you can overide this by filtering on the wpi_driver hook.

function modify_wpi_driver( $driver ) {
	$driver = 'imagick';
    return $driver;
}
add_filter( 'wpi_driver', 'modify_wpi_driver' );

Note if you pass an unsupported driver then this is your problem...

Caching

WP Intervention will cache generated images on disk to avoid repeatedly processing images. By default the cache resides at:

/wp-content/uploads/intervention/cache/

Note: the exact path may vary depending on the settings of your individual WordPress installation.

Altering the default cache location

If for any reason you need to change the default location of the cache you can filter on the wpi_cache_directory hook.

function modify_wpi_cache_dir( $dir ) {
	$dir = '/some/random/location/you/need/to/set/';
    return $dir;
}
add_filter( 'wpi_cache_directory', 'modify_wpi_cache_dir' );

You are responsible for ensuring this path is writable by PHP and publicly accessible.

Cache Garbage Collection

WP Intervention automatically removes cached images that have not been accessed for 24hrs.

To do this each time a cached image is accessed by WP Intervention it's timestamp is updated via PHP's touch() method. A WP Cron job then runs every hour checking for any "stale" images that are older than 24hrs. Any matching images are deleted.

If for any reason you need to alter the duration cached files are allowed to reside on disk before they become stale, then you can filter on the wpi_clean_outdate_cache_files_period hook.

function modify_wpi_cache_files_period( $period ) {
	$period = 604800; // 1 week
    return $period;
}
add_filter( 'wpi_clean_outdate_cache_files_period', 'modify_wpi_cache_files_period' );

Similarly if you need to alter how often the cron job reoccurs then you can filter on wpi_clean_outdate_cache_files_cron_recurrance.

function modify_wpi_clean_outdate_cache_files_cron_recurrance( $recurrance ) {
	$recurrance = 'twicedaily';
    return $recurrance;
}
add_filter( 'wpi_clean_outdate_cache_files_cron_recurrance', 'modify_wpi_clean_outdate_cache_files_cron_recurrance' );

Contributing

Contributions to the WP Intervention Plugin are welcome. Please make a pull request!

License

WP Intervention Plugin is licensed under the MIT License.

Intervention Image is licensed under the MIT License. Copyright 2014 Oliver Vogel

wp-intervention's People

Contributors

getdave avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

wp-intervention's Issues

Update cache file hash function

$serialize = $file_pathinfo['filename'] . '-' . crc32( serialize( $args ) );

crc32 is faster than hash so update to use that when creating unique file names

Avoid revealing Plugin usage in image urls

Currently, the generated images have a URL which has the string intervention/cache in it. This is because that's the direct structure.

Try and obfuscate this path in order that malicious actors can't use this to discern the prescence of this Plugin.

Lets see if I got this right...

Hi

I run the web site: https://www.easywebdesigntutorials.com
The uploads folder contains 2688 images. 1 original and additional 4 duplicates in thumbnail, medium, large and another defined size through the theme.

It would be great to just use the original image and remove all the duplicates.

The dilemma today is that using a small % for an huge image upload for a thumbnail the thumbnail would still be a "big" kb size.

I am looking into creating a new tutorial for this specific issue. Perhaps the WP Intervention plugin could do the magic that is needed to defining sizes in a "soft" (% size way) instead of using a "hard" (duplicate the original image into many smaller images way). So that I can define sizes through the functions file and the plugin would automatically on the fly create the image sizes I need. Also adjusting the kb sizes of the images.

I would like to personally test this out for my tutorial site and see how it works.

Improve usage docs to include full installation instructions

Currently docs are abit under developed.

  • Add the composer config:
"require": {
    "getdave/wp-intervention": "1.1.0"
},
"repositories": [
    {
        "type": "vcs",
        "url": "https://github.com/getdave/wp-intervention"
    }
]
  • Link to articles about WordPress and Composer.
  • Add note about security plugins sometimes blocking requests to image URLs.

Can't use anonymous functions inside arrays

Hi. I can't seem to make this work:

$intervention_args = array(
	'resize' => array( 300, 220 ),
	'blur' => 20,
	'text' => array(
		'bla bla',
		50,
		50,
		function( $font ) {
			$font->color( '#FFFFFF' );
		}
	),
	'rotate' => -90
);

$img_src = wp_intervention( $post_image, $intervention_args );

Everything works fine except the function inside the array of the 'text' argument. It generates the following error:

Catchable fatal error: Object of class Closure could not be converted to string in /home/asd/public_html/site/wp-content/plugins/wp-intervention-develop/src/intervention-wrapper.php on line 167

When I remove the function, everything including the 'text' argument works properly. What am I missing here?

File name does not depend of quality

Hello @getdave,

I'm trying to create a on-demand image resizing with Wordpress and your plugin helps me a lot ๐Ÿ‘ .

I can access to URLs like this BASE_URL/app/uploads/2020/02/food-photographer-i-david-fedulov-X92WLoaQ1_o-unsplash.jpg/?width=500&quality=80 with different widths to generate and get different images but changing quality parameter always return the same image.

I think it is because quality parameter is never used in file name creation, so the cached version is returned.

Maybe it should be pushed to $args array here

private function set_cache_file_path() {
// Strip PHP callables out of the args
$args = $this->strip_callables( $this->intervention_args );
// Sort the array by key to ensure consistency of caching filename
ksort( $args );
$file_pathinfo = pathinfo( $this->src );
$ext = $file_pathinfo['extension'];
$new_filename = $file_pathinfo['filename'] . '-' . crc32( $this->r_implode( $args, '-' ) ) . '.' . $ext;
// Enable filtering of the filename on a per file basis
$new_filename = apply_filters( 'wpi_cache_file_name', $new_filename, $file_pathinfo['filename'], $ext, $args );
$this->cache_file_path = WP_Intervention::get_cache_dir() . $new_filename;
}

Someting like :

$args['quality'] = $this->options['quality'];

on line 135.

I can make a PR or add detailed code if you want more infos on my use case.

Adding a constraint to resize

Hi,
Thanks for the plugin! It works great.
Is it possible to include a callback function to constrain the aspect ratio?
I am trying to resize the image to a height of 400px while maintaining the aspect ratio for the width.
Here's how it's done with plain Intervention: http://image.intervention.io/api/resize
Thanks.

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.