A number of parameters are accepted by all or nearly all IMG Processor shortcodes. The shared parameters source
and output
are described first. Parameters shared by all shortcodes other than [img_info/]
are described next – output_dpi
, output_type
, and output_file
. Unique options and behaviors are described with each shortcode.
source
All IMG Processor shortcodes require a source image to function. The location of that image file can be specified either in the shortcode’s source
attribute, or in the shortcode’s body. The following statements are equivalent.
[img_info source="{file|url}" /]
[img_info]{file|url}[/img_info]
The source image can be located on your WordPress server (local) or on any other accessible server (remote). Local paths can be absolute or relative. Given a relative path (3rd example below), the plugin will search for the file using the locations specified in Settings > IMG Processor > Local Image Search Paths
.
remote file: | [img_info]http://abc.de/remote/image.jpg[/img_info] |
local file: | [img_info]/var/www/html/wp-content/uploads/image.jgp[/img_info] |
local file: | [img_info]wp-content/uploads/image.jgp[/img_info] |
If the source image is not found, a placeholder is used. The default is a simple grey box. It can be changed in Settings > IMG Processor > Placeholder Image
.
output
All IMG Processor shortcodes accept the output
attribute to select and tailor results. If omitted, the default is output="img"
. The most-used output
options are listed here, in order of complexity.
output="url"
: image path
output="url"
returns the cached image’s location, relative to server’s document root. In this example, the value is used as the src
value for an <img/>
tag.
<img src="[img_fit output='url' height='200']atest.gif[/img_fit]" height="200" />
![](/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_0_200.gif)
<img src="/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_0_200.gif" height="200" />
output="img"
: default <img/>
output="img"
is the default for all IMG Processor shortcodes. The result is an <img/>
tag which displays the image on the page.
[img_fit output="img" width="200" height="200"]atest.gif[/img_fit]
![atest.gif](/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_200_200.gif)
<img src="/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_200_200.gif" width="142" height="200" alt="atest.gif" />
output="html"
: custom <img/>
output="html"
allows the default <img/>
tag to be customized by adding any of the following six (6) shortcode options. If the shortcode attribute is set, a corresponding <img/>
attribute is added to the HTML result.
img-id="{css-name}"
alt="{image-description}"
(default: src filename)title="{image-title}"
style="{css-styles}"
decoding="{auto|async|sync}"
(default: async)loading="{eager|lazy}"
[img_fit output="html" width="200" height="200" alt="IMG-ALT" title="IMG-TITLE"]atest.gif[/img_fit]
![IMG-TITLE IMG-ALT](/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_200_200.gif)
<img alt="IMG-ALT" title="IMG-TITLE" decoding="async" src="/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_200_200.gif" width="142" height="200"/>
output="figure"
: custom <figure/>
, <img/>
, and <figcaption/>
output="figure"
extends output="html"
, wrapping the <img/>
in <figure>..</figure>
tags and, optionally, adding <figcaption>..</figcaption>
tags. This follows the behavior of WordPress’s “Image” block. The following four (4) options are available.
figure-id="{css-name}"
figure-class="{css-classnames}"
caption="{image-caption}"
caption-class="{css-classnames}"
[img_fit output="figure" width="200" height="200" alt="IMG-ALT" title="IMG-TITLE" caption="CAPTION" figure-class="wp-block-image has-custom-border" style="border-width:1px;border-radius:6px"]atest.gif[/img_fit]
![IMG-TITLE IMG-ALT](/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_200_200.gif)
<figure class="wp-block-image has-custom-border"><img alt="IMG-ALT" title="IMG-TITLE" style="border-width:1px;border-radius:6px" decoding="async" src="/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_200_200.gif" width="142" height="200"/><figcaption class="wp-element-caption"/>CAPTION</figcaption></figure>
output="info"
: image details <ul/>
output="info"
is a development and debugging aid. It returns details for the result image formated as an HTML list. Any single value from that list can be returned by using its name. For instance, output="url"
returns the image’s location; output="bytes"
returns the file’s size; output="datetime"
returns the file’s modification date; etc.
[img_fit output="info" width="200" height="200"]atest.gif[/img_fit]
- img:
- file: /srv/plugins.tenandtwo.com/htdocs/wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_200_200.gif
- url: /wp-content/uploads/image-cache/1d2cf16c/atest_gif/fit_200_200.gif
- width: 142
- height: 200
- type: GIF
- content_type: image/gif
- readable: 1
- writeable: 1
- bytes: 32317
- resolution: 0,0
- datetime: 2024-06-10 22:59:22
- dir: /srv/plugins.tenandtwo.com/htdocs/wp-content/uploads/image-cache/1d2cf16c/atest_gif/
- basename: fit_200_200.gif
- name: fit_200_200
- ext: gif
- alt: atest.gif
- _usage:
- cli-command:
wp img_process fit --output="info" --width="200" --height="200" --output_type="GIF" --output_dpi="0" /wp-content/uploads/image-source/atest.gif
- api-nocache:
<img src="/wp-content/plugins/tenandtwo-img-processor/api.php?source=%2Fwp-content%2Fuploads%2Fimage-source%2Fatest.gif&transform=fit&width=200&height=200&output_type=GIF&output_dpi=0&output_nocache=1" width="142" height="200" alt="atest.gif" />
- wp-shortcode-img:
[img_fit output="img" width="200" height="200" output_type="GIF" output_dpi="0"]/wp-content/uploads/image-source/atest.gif[/img_fit]
- wp-shortcode-html:
[img_fit output="html" img-id="IMG-ID" alt="ALT" title="TITLE" style="STYLE" decoding="auto|async|sync" loading="eager|lazy" width="200" height="200" output_type="GIF" output_dpi="0"]/wp-content/uploads/image-source/atest.gif[/img_fit]
- wp-shortcode-figure:
[img_fit output="figure" figure-id="FIGURE-ID" figure-class="FIGURE-CLASS" caption="CAPTION" caption-class="CAPTION-CLASS" img-id="IMG-ID" alt="ALT" title="TITLE" style="STYLE" decoding="auto|async|sync" loading="eager|lazy" width="200" height="200" output_type="GIF" output_dpi="0"]/wp-content/uploads/image-source/atest.gif[/img_fit]
- cli-command:
output="json"
: image details JSON
output="json"
is similar to output="info"
except the details are encoded as a JSON string. The value can be passed to Javascript, and then parsed to recreate the info array.
<script language="javascript">
var $mydata = JSON.parse('[img_fit output="json" width="200" height="200"]atest.gif[/img_fit]');
console.log($mydata);
document.write('<pre>');
document.write('\n url = ' + $mydata.url);
document.write('\n width = ' + $mydata.width);
document.write('\n height = ' + $mydata.height);
document.write('\n bytes = ' + $mydata.bytes);
document.write('</pre>');
</script>
output_dpi
The resolution for processed images is configured in Settings > IMG Processor > Cache File Resolution
. Images can be cached with the original resolution, or automatically reduced to a maximum of 72 DPI. Individual shortcodes can override the setting.
output_dpi="72"
: max resolutionoutput_dpi="0"
: no max
output_type
The format for processed images is configured in Settings > IMG Processor > Cache File Type
. Images can be cached in the original format, or in a common format. Individual shortcodes can override the setting.
output_type="{jpg,gif,png,webp}"
output_file
Normally, the name and location for cached image is determined automatically. The starting location is specified in Settings > IMG Processor > Cache Directory
, and then the final path depends on the src
, transform
type, and applied options. Individual shortcodes can override the setting.
output_file="{/full/path/to/image.type}"