WPSI II - Tabla de Parámetros

De Lab - Darío Ferrer

This article has an english version: WPSI II - Parameters Table


Introducción

Con WP Smart Image resulta sencillo configurar las imágenes que se muestran en tu sitio web. La sintaxis de los parámetros es la misma que viene con Wordpress de forma nativa. Para combinar los distintos parámetros y valores, basta con expresarlos así: 

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

Puedes utilizar los distintos parámetros en el orden que desees, asignándole los valores correspondientes.

Tipos de parámetros

WP Smart Image II te ayuda a configurar imágenes y enlaces utilizando una sola estiqueta. Para ello existen parámetros exclusivos de cada elemento, así como parámetros globales o comunes:

Para saber los valores globales por defecto puedes revisar el artículo WPSI II - Valores predeterminados

Tabla de parámetros

Parámetros comunes
Parámetro Valor Comportamiento
showtitle
  • 0
  • 1
  • img
  • link

Activa/desactiva el atributo "title" en imágenes y/o enlaces:

  • 0: Deshabilita el atributo title para imágenes y enlaces.
  • 1: Activa el atributo title para imágenes y enlaces.
  • img: Activa el atributo title sólo para imágenes.
  • link: Activa el atributo title sólo para enlaces.

Por defecto: 1.

Ejemplo:

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

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
quotes
  • null
  • single

Cambia las comillas de los atributos en simples o dobles:

  • null (sin configurar): Comillas dobles.
  • single: Comillas simples.

Por defecto: null.

Ejemplo:

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

Resultado:

<a title='titulo enlace' href='http://sitio.com/ruta-al/articulo.html'><img src='http://sitio.com/ruta-a-la/imagen-1.jpg' alt='texto alt' title='titulo img' /></a>

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
array
  • 0
  • 1

Devuelve el resultado como un array en lugar de darle salida directa. Especialmente útil cuando se utiliza el parámetro number para extraer varias imágenes por entrada. En tal caso el parámetro array permite personalizar el formato HTML que acompañará a cada una de éstas.

Nota: el parámetro array sólo funciona con get_wpsi(), ¡nunca con wpsi()!. El motivo es simple: ¿Para qué hacer un echo a un array?.

Por defecto: 0.

Ejemplo 1:

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

print_r($var);
?>

Resultado:

Array
(
  [0] => <img src="http://sitio.com/ruta-a-la/imagen-1.jpg" alt="some alt 1" title="some title 1" />
  [1] => <img src="http://sitio.com/ruta-a-la/imagen-2.jpg" alt="some alt 2" title="some title 2" />
  [2] => <img src="http://sitio.com/ruta-a-la/imagen-3.jpg" alt="some alt 3" title="some title 3" />
)


Ejemplo 2 [ Nota que estamos usando get_wpsi() en lugar de wpsi() ]:

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

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

Resultado:

<div class="someclass"><img src="http://sitio.com/ruta-a-la/imagen-1.jpg" /></div>
<div class="someclass"><img src="http://sitio.com/ruta-a-la/imagen-2.jpg" /></div>
<div class="someclass"><img src="http://sitio.com/ruta-a-la/imagen-3.jpg" /></div>


Ejemplo 3. Vamos a intentar algo un poquito más complejo: Construiremos una especie de galería tomando el atributo title como título y el atributo alt como texto.

<?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>';
}
?>

Resultado:

<div class="someclass" style="background: url(http://sitio.com/ruta-a-la/imagen-1.jpg);">
  <h3>Título imagen 1</h3>
  <p>Texto alternativo para la imagen 1</p>
</div>
<div class="someclass" style="background: url(http://sitio.com/ruta-a-la/imagen-2.jpg);">
  <h3>Título imagen 2</h3>
  <p>Texto alternativo para la imagen 2</p>
</div>
<div class="someclass" style="background: url(http://sitio.com/ruta-a-la/imagen-3.jpg);">
  <h3>Título imagen 3</h3>
  <p>Texto alternativo para la imagen 3</p>
</div>

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetros de la imagen
Parámetro Valor Comportamiento
size
  • mini
  • med
  • big
  • full
  • custom[número]

Afecta el tamaño de la imagen:

  • mini: Tamaño miniatura.
  • med: Tamaño medio.
  • big: Tamaño grande.
  • full: Tamaño full.
  • custom[número]: Te muestra el tamaño personalizado que previamente has fijado desde Max Image Size Control plugin Debes instalar y configurar previamente este plugin antes de utilizar el parámetro. De lo contrario recibirás una imagen tamaño Medio.

Por defecto: mini

Ejemplo:

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

Ejemplo usando Max Image Size Control plugin:

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

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
type
  • link
  • single
  • url
  • direct

Afecta la presentación de la imagen:

  • link: Imagen con enlace al artículo.
  • single: Imagen sin enlace.
  • url Sólo URL de la imagen.
  • direct: Imagen enlazada a su versión full.

Por defecto: link

Ejemplo:

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

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
wh
  • css
  • html

Agrega atributos de ancho y alto a la imagen. Suponiendo que la imagen mide 100px X 100px:

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

Por defecto: null

Ejemplo:

<?php wpsi('wh=css') ?>
 
Parámetro Valor Comportamiento
class [Cualquier valor]

Permite añadir clases CSS a la imagen.

Por defecto: null

Ejemplo:

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

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
cid [Cualquier valor]

Permite añadir una ID a la imagen

Por defecto: null

Ejemplo:

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

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
element
  • id
  • title
  • alt
  • mimetype
  • width
  • height

Este parámetro literalmente corta la imagen en pedazos, permitiéndote mostrar cada uno de éstos de forma separada. Extremadamente útil en algunos casos.

  • id: ID de imagen
  • title: Título de la imagen
  • alt: Texto alternativo
  • mimetype: Tipo de imagen (ejemplo: jpg, png, gif)
  • width: Ancho
  • height: Alto

Por defecto: null

Los valores width y height son devueltos en forma de cifras absolutas para un mejor radio de acción de la función. Por ejemplo, si deseas imprimir 300px obtendrás 300 de forma dinámica y debes escribir px manualmente.

Ejemplo:

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

El código anterior mostrará, por ejemplo, "image/png"

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
alt
  • [Cualquier valor]
  • el_title
  • el_alt

Define el atributo alt en imágenes:

  • [Cualquier valor]: Todas las imágenes dentro del loop tendrán el alt especificado en este valor.
  • el_title: Todas las imágenes dentro del loop tomarán el mismo título de sus respectivas entradas para el atributo alt.
  • el_alt: Asigna los datos correspondientes a la imagen alt como parte del atributo.

Por defecto: null. La imagen toma el alt de su propio campo wp_attachment_image_alt (2.9.X y 3.0.X), post_excerpt (2.8.X) o post_title (si los anteriores están vacíos). En caso de imágenes predeterminadas, ésta tomará el alt de la configuración del Panel de Opciones.

Ejemplo 1:

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

Ejemplo 2:

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

Ejemplo 3:

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

Ejemplo 4:

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

Ejemplo 5:

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

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
title
  • [Cualquier valor]
  • 'el_title'

Define el atributo title en imágenes:

  • [Cualquier valor]: Todas las imágenes dentro del loop tendrán el título especificado en este valor.
  • el_title: Todas las imágenes dentro del loop tomarán el mismo título de sus respectivas entradas.
  • el_alt: Asigna los datos correspondientes a la imagen alt como parte del atributo.

Por defecto: null. La imagen toma el título de su propio campo post_title. En caso de imágenes predeterminadas, ésta tomará el título de la configuración del Panel de Opciones.

Ejemplo 1:

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

Ejemplo 2:

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

Ejemplo 3:

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

Ejemplo 4:

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

Ejemplo 5:

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

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
custom
  • 'custom=at1,val1|at2,val2'

Agrega atributos personalizados a la imagen

Las sintaxis de custom y acustom varían levemente respecto al resto de los parámetros siendo, sin embargo, de un uso muy sencillo. Cada atributo/valor debe ir separado de una coma (,) agregando luego un separador (|) para el siguiente juego atributo/valor:

atributo1,valor1|atributo2,valor2|atributo3,valor3... (etc)

Puedes agregar tantos atributos como desees.

Por defecto: null.

Ejemplo 1:

<?php wpsi('custom=miAtributo,mi-valor|otroAtributo,otro-valor') ?>

Resultado:

[...] miAtributo="mi-valor" otroAtributo="otro-valor" [...]

Ejemplo 2:

<?php wpsi('custom=miAtributo,mi-valor-'. get_the_ID() .'|otroAtributo,'. get_the_title()) ?>

Resultado:

[...] miAtributo="mi-valor-123" otroAtributo="Título de la entrada o página" [...]

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetros del enlace
Parámetro Valor Comportamiento
aclass [Cualquier valor]

Permite añadir clases CSS al enlace.

Por defecto: null

Ejemplo:

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

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
aid [Cualquier valor]

Permite añadir una ID al enlace

Por defecto: null

Ejemplo:

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

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
rel [Cualquier valor]

Permite añadir el atributo rel al enlace

Por defecto: null

Ejemplo:

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

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
atitle
  • [Cualquier valor]
  • 'el_title'

Define el atributo title en los enlaces:

  • [Cualquier valor]: Todos los enlaces (de las imágenes) dentro del loop tendrán el título especificado en este valor.
  • 'el_title': Todos los enlaces (de las imágenes) dentro del loop tomarán el mismo título de sus respectivas entradas.

Por defecto: null. El enlace toma el título del campo post_title de la imagen. En caso de imágenes predeterminadas, el enlace tomará el título de la configuración del Panel de Opciones.

Ejemplo 1:

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

Ejemplo 2:

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

Ejemplo 3:

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

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
target
  • blank
  • parent
  • self
  • top
  • js

Agrega al enlace el atributo target:

  • self: La URL enlazada abrirá en la misma ventana (Valor predeterminado).
  • blank: La URL enlazada abrirá en una nueva ventana.
  • parent: La URL enlazada abrirá en el marco padre.
  • top: La URL enlazada abrirá usando el total de espacio de la ventana.
  • js: La URL enlazada abrirá en una nueva ventana mediante javascript. Útil para sitios con DTD Estricto.

Por defecto: null

Ejemplo:

<?php wpsi('target=blank') ?>
 
Parámetro Valor Comportamiento
targetname
  • Nombre del marco

Agrega al enlace el atributo "target" personalizando el nombre del marco. Éste anula el parámetro target si ambos (target y targetname) están presentes:

  • Nombre del marco: La URL enlazada abrirá en el marco cuyo nombre sea el mismo que hayas configurado aquí.

Por defecto: null

Ejemplo:

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

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
acustom
  • 'atrib1,valor1|atrib2,valor2...'

Agrega atributos personalizados al enlace

Las sintaxis de custom y acustom varían levemente respecto al resto de los parámetros siendo, sin embargo, de un uso muy sencillo. Cada atributo/valor debe ir separado de una coma (,) agregando luego un separador (|) para el siguiente juego atributo/valor:

atributo1,valor1|atributo2,valor2|atributo3,valor3... (etc)

Puedes agregar tantos atributos como desees.

Por defecto: null.

Ejemplo:

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

Resultado:

[...] onclick="javascript('algo')" onmouseover="this.otracosa()" [...]

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Parámetro Valor Comportamiento
ref
  • [Cualquier valor]

Agrega un referer al enlace, de manera que el programador pueda manipular su comportamiento mediante el método GET.

  • La estructura de URL resultante es perfectamente compatible con URLs amigables.
  • Gracias a la inclusión de la metaetiqueta rel="canonical" (nativa de Wordpress) los robots de buscadores no incurren en el doble indexado de contenido -o al menos eso dice el manual de Google-.

Por defecto: null

Ejemplo:

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

Resultado (Observa la estructura de la URL):

<a title='titulo enlace' href='http://sitio.com/ruta-al/articulo.html?ref=modulo'><img src='http://sitio.com/ruta-a-la/imagen-1.jpg' alt='texto alt' title='titulo img' /></a>

[ Top ]    Parámetros comunes: showtitle, quotes and array    Parámetros de la imagen: size, type, wh, class, cid, element, alt, title and custom    Parámetros del enlace: aclass, aid, rel, atitle, target, targetname, acustom and ref
Obtenido de "http://www.lab.darioferrer.com/doc/index.php?title=WPSI_II_-_Tabla_de_Par%C3%A1metros"