WPSI II - Parameters Table

De Lab - Darío Ferrer

Este artículo tiene una versión en español: WPSI II - Tabla de Parámetros

 

Overview

With WP Smart Image II you'll find very easy setting the images shown in your website. The parameter's sintax is the same than comes natively with Wordpress. You can combine the different parameters/values on this way: 

<?php wpsi('param1=value&param2=value&param3=value') ?>

You can sort the parameters as you wish, assigning the the corresponding values.

Types of parameters

WP Smart Image II te ayuda a configurar imágenes y enlaces de un solo golpe, por lo cual existen parámetros exclusivos para cada elemento, así como parámetros globales o comunes:

WP Smart Image II helps you to set images and links in a while, so there are different types of parameters for each element, as well as global parameters, and common parameters:

To know the default values, can revise this article: WPSI II - Default values

Parameters table

Common parameters
Parameter Value Behavior
showtitle
  • 0
  • 1
  • img
  • link

Enables/disables the title attribute on images and/or links:

  • 0: Disables title on both images and links.
  • 1: Enables title on both images and links.
  • img: Enables title only for images.
  • link: Enables title only for links

Default: 1.

Example:

<?php wpsi('showtitle=img') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
quotes
  • null
  • single

Toggles all attribute quotes between singles or doubles:

  • null (empty value): Double quotes.
  • single: Single quotes.

Default: null.

Example:

<?php wpsi('quotes=single') ?>

Result:

<a title='titulo enlace' href='http://website.com/path-to/article.html'><img src='http://website.com/path-to/image-1.jpg' alt='texto alt' title='titulo img' /></a>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
array
  • 0
  • 1

Returns the result as an array. Specially useful when the number parameter is used to extract several images per post. In this case, the array parameter allows customizing the HTML format included with each image.

Nota: the array parameter only works using get_wpsi(), never with wpsi()!. The reason is simple: Why to make an echo to an array?.

Default: 0.

Example 1:

<?php 
$var = get_wpsi('array=1&number=-1&type=single');

print_r($var);
?>

Result:

Array
(
 [0] => <img src="http://website.com/path-to/image-1.jpg" alt="some alt 1" title="some title 1" />
 [1] => <img src="http://website.com/path-to/image-2.jpg" alt="some alt 2" title="some title 2" />
 [2] => <img src="http://website.com/path-to/image-3.jpg" alt="some alt 3" title="some title 3" />
)

Example 2 [ Notice we are using get_wpsi() instead wpsi() ]:

<?php 
$var = get_wpsi('array=1&number=-1&type=single');

foreach($var as $v) {
 echo '<div class="someclass">'. $v .'</div>';
}
?>

Result:

<div class="someclass"><img src="http://website.com/path-to/image-1.jpg" /></div>
<div class="someclass"><img src="http://website.com/path-to/image-2.jpg" /></div>
<div class="someclass"><img src="http://website.com/path-to/image-3.jpg" /></div>

Example 3. Lets try something a little more complex: We'll construct a kind of gallery taking the title attribute as title and alt as description text.

<?php 
$var  = get_wpsi('array=1&number=-1&type=url');
$var[] = get_wpsi('array=1&number=-1&element=title');
$var[] = get_wpsi('array=1&number=-1&element=alt');

foreach($var as $v) {
 echo '
 <div class="someclass" style="background: url('. $v[0] .');">
  <h3>'. $v[1] .'</h3>
  <p>'. $v[2] .'</p>
 </div>';
}
?>

Result:

<div class="someclass" style="background: url(http://website.com/path-to/image-1.jpg);">
  <h3>Image Title 1</h3>
  <p>Alternate text of the image 1</p>
</div>
<div class="someclass" style="background: url(http://website.com/path-to/image-2.jpg);">
  <h3>Image Title 2</h3>
  <p>Alternate text of the image 2</p>
</div>
<div class="someclass" style="background: url(http://website.com/path-to/image-3.jpg);">
  <h3>Image Title 3</h3>
  <p>Alternate text of the image 3</p>
</div>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Image parameters
Parameter Value Behavior
size
  • mini
  • med
  • big
  • full
  • custom[number]

Sets the image size:

  • mini: Thumbnail.
  • med: Medium.
  • big: Large.
  • full: Full.
  • custom[number]: Sets the size to custom settings that you've configured from Max Image Size Control plugin Of course, you must previously install, activate and set that plugin.

Default: mini

Example:

<?php wpsi('size=med') ?>

Example usando Max Image Size Control plugin:

<?php wpsi('size=custom0') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
type
  • link
  • single
  • url
  • direct

How you want to get the image :

  • link: Image linked to article.
  • single: Single image without link.
  • url Only image URL.
  • direct: Image linked to its full version.

Default: link

Example:

<?php wpsi('type=url') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
wh
  • css
  • html

Adds width/height attributes to the image . Supposing the image has 100px X 100px:

  • css: style="width: 100px; height: 100px;"
  • html: width="100" height="100"

Default: null

Example:

<?php wpsi('wh=css') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
class [Any value]

Allows to add CSS classes to the image.

Default: null

Example:

<?php wpsi('class=foo') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
cid [Any value]

Allows to add an ID to the image.

Default: null

Example:

<?php wpsi('cid=bar') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
element
  • id
  • title
  • alt
  • mimetype
  • width
  • height

This parameter allows you to literally cutting the image in pieces, so you can show each one separately.

  • id: image ID
  • title: Image title
  • alt: Image alt
  • mimetype: Image mimetype (e.g.: jpg, png, gif)
  • width: Width
  • height: Height

Default: null

width and height values are retrieved as absolute numbers. E.g, if you whish to show 300px you will obtain 300 dinamically and you must to write px manually.

Example:

<?php wpsi('element=mimetype') ?>

Supposing the image is a PNG file, te above code will show "image/png"

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
alt
  • [Any value]
  • el_title
  • el_alt

Defines the alt attributes on images:

  • el_alt: Images will fill their alt with their own alt data.
  • el_title: Images will fill their alt with the post title.
  • [Any value]: Images will have the same alt attribute.

Default: el_alt.

Note: In case of default (generic) images, WPSI will take the predefined alt configured by you from the Settings panel.

Example 1:

<?php wpsi('alt=Hello Dolly') ?>

Example 2:

<?php wpsi('alt=el_title') ?>

Example 3:

<?php wpsi('alt=el_alt') ?>

Example 4:

<?php wpsi('alt=Imagen de el_title') ?>

Example 5:

<?php wpsi('alt=Imagen de el_alt') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
title
  • [Any value]
  • 'el_title'

Defines the title attributes on images:

  • el_alt: Images will fill their alt with their own alt data.
  • el_title: Images will fill their alt with the post title.
  • [Any value]: Images will have the same alt attribute.

Default: el_title.

Note: In case of default (generic) images, WPSI will take the predefined title configured by you from the Settings panel.

Example 1:

<?php wpsi('title=Hello Dolly') ?>

Example 2:

<?php wpsi('title=el_title') ?>

Example 3:

<?php wpsi('title=el_alt') ?>

Example 4:

<?php wpsi('title=Imagen de el_title') ?>

Example 5:

<?php wpsi('title=Imagen de el_alt') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
custom
  • 'attr1,val1|attr2,val2...'

Allows to add custom attributes to the image.

The custom and acustom syntax has a slight variation in comparison with the rest of the parameters. However they have a very simple use. Each attribute/value must to be separated by comma (,) then adding a separator (|) between attribute/value sets:

attribute1,value1|attribute2,value2|attribute3,value3... (etc.)

You can add many attributes as you wish.

Default: null.

Example 1:

<?php wpsi('custom=myAttribute,my-value|anotherAttr,another-value') ?>

Result:

[...] myAttribute="my-value" anotherAttr="another-value" [...]

Example 2:

<?php wpsi('custom=myAttribute,my-value-'. get_the_ID() .'|anotherAttr,'. get_the_title()) ?>

Result:

[...] myAttribute="my-value-123" anotherAttr="Post/Page Title" [...]

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetros del enlace
Parameter Value Behavior
aclass [Any value]

Allows to add CSS classes to the link.

Default: null

Example:

<?php wpsi('aclass=foo') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
aid [Any value]

Allows to add an ID to the link.

Default: null

Example:

<?php wpsi('aid=bar') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
rel [Any value]

Allows to add a rel attribute to the link.

Default: null

Example:

<?php wpsi('rel=foo') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
atitle
  • [Any value]
  • 'el_title'

Defines the title attribute on links:

  • [Any value]: Links will have the same title attribute.
  • 'el_title': Links will fill their title with the post title.

Default: null.

Note: In case of default (generic) images, WPSI will take the predefined title configured by you from the Settings panel.

Example 1:

<?php wpsi('atitle=el_title') ?>

Example 2:

<?php wpsi('atitle=Seguir leyendo el_title') ?>

Example 3:

<?php wpsi('atitle=Hello Dolly') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
target
  • blank
  • parent
  • self
  • top
  • js

Adds the target attribute to links:

  • self: Opens the linked URL in same window.
  • blank: Opens the linked URL in new window.
  • parent: Opens the linked URL in parent frame.
  • top: Opens the linked URL using the total area of the window.
  • js: Opens the linked URL in new window throught a little included javascript. Very useful if you have a DTD Strict website and want to preserve its standard.

Default: null

Example:

<?php wpsi('target=blank') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
targetname
  • Frame name

Adds the target attribute to links, but customizing the frame name. This one nullifies the target parameter if both target and targetname are present:

  • Frame name: Opens linked URL whose name you have specified here.

Default: null

Example:

<?php wpsi('targetname=foobar') ?>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
acustom
  • 'atrib1,valor1|atrib2,valor2...'

Adds custom attributes to the link.

The custom and acustom syntax has a slight variation in comparison with the rest of the parameters. However they have a very simple use. Each attribute/value must to be separated by comma (,) then adding a separator (|) between attribute/value sets:

attribute1,value1|attribute2,value2|attribute3,value3... (etc.)

You can add many attributes as you wish.

Default: null.

Example:

<?php wpsi('custom=onclick,javascript('something')|onmouseover,this.anotherThing()') ?>

Result:

[...] onclick="javascript('something')" onmouseover="this.anotherThing()" [...]

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parameter Value Behavior
ref
  • [Any value]

Adds a referer to the link, so the programmer will be able to handle its behavior through the GET method.

  • The structure of the resulting URL is perfectly compatible with friendly URLs.
  • Thanks to the including of metatag rel="canonical" (natively generated by Wordpress) the search engine bots are not commit the mistake of double indexing -or at least that tells the Google manual-.

Default: null

Example:

<?php wpsi('ref=module') ?>

Result (Watch the URL structure):

<a title='Link title' href='http://website.com/path-to/article.html?ref=module'><img src='http://website.com/path-to/image-1.jpg' alt='Image alt' title='Image title' /></a>

[ Top ]    Common parameters: showtitle, quotes and array    Image parameters: size, type, wh, class, cid, element, alt, title and custom    Link parameters: aclass, aid, rel, atitle, target, targetname, acustom and ref
Obtenido de "http://www.lab.darioferrer.com/doc/index.php?title=WPSI_II_-_Parameters_Table"