Usar tamaños de imagen personalizados en tu tema y cambiar el tamaño de las imágenes existentes

Spanish (Español) translation by Steven (you can also view the original English article)

En este tutorial, aprenderás cómo generar imágenes de tamaño personalizado para usar en tu tema de WordPress. ¿Por qué usar tamaños de imagen personalizados? Por lo tanto, no tendrás que editar cada imagen que cargues en la Biblioteca multimedia. De esta forma, cada imagen cargada obtendrá todos los tamaños de imagen personalizados de manera automática. Se puede insertar en la publicación o página usando la Galería de medios o desde el bucle. Continúa leyendo para descubrir cómo.

Paso 1 Definir tamaños de imagen personalizados

Para que tu tema admita tamaños de imagen personalizados, debes editar el archivo functions.php que se encuentra en tu carpeta de temas. Abre el archivo functions.php de tu tema y verifica si tienes una línea similar a esta:

1	add_action( 'after_setup_theme', 'function_name' );

Este gancho o 'hook' es llamado durante la inicialización de un tema. Generalmente se utiliza para realizar acciones básicas de configuración, registro e inicialización de un tema, donde "nombre_de_la_función" es el nombre de la función que se llamará.

Si encontraste una línea como esa, busca también el método con el mismo nombre que el segundo parámetro de ese método add_action.

Si no puedes encontrar una línea similar, debes agregarla y también crear un nombre de método como el segundo parámetro:

1	add_action( 'after_setup_theme', 'setup' );
2	function setup() {
3	// ...
4	}

Ahora, para habilitar las miniaturas de la publicación para tu tema, agrega las siguientes líneas en el método definido anteriormente:

function setup() {
	// ...
	
	add_theme_support( 'post-thumbnails' ); // This feature enables post-thumbnail support for a theme
	// To enable only for posts:
	//add_theme_support( 'post-thumbnails', array( 'post' ) );
	// To enable only for posts and custom post types:
	//add_theme_support( 'post-thumbnails', array( 'post', 'movie' ) );
	
	// Register a new image size.
	// This means that WordPress will create a copy of the post image with the specified dimensions
	// when you upload a new image. Register as many as needed.
	// Adding custom image sizes (name, width, height, crop)
	add_image_size( 'featured-image', 620, 200, true );
	
	// ...
}

Paso 2 Visualización de imágenes con tamaños personalizados

Insertar una imagen de tamaño personalizado en la publicación con la Galería de medios

Para insertar una imagen dentro de una publicación o página desde la galería de medios, inserta el siguiente filtro en el archivo functions.php:

add_filter( 'image_size_names_choose', 'custom_image_sizes_choose' );
function custom_image_sizes_choose( $sizes ) {
	$custom_sizes = array(
		'featured-image' => 'Featured Image'
	);
	return array_merge( $sizes, $custom_sizes );
}

Lo que hace este código es fusionar los tamaños de imagen personalizados con el definido en WordPress, por lo que el resultado será la imagen a continuación.

Insertar una imagen de tamaño personalizado dentro del bucle

Para mostrar, por ejemplo, la imagen que se nombró como "imagen destacada" o "featured-image", dentro del bucle debes agregar estas líneas:

<?php
if ( has_post_thumbnail()):
	the_post_thumbnail( 'featured-image', array( 'class' => 'featured-image' ) );
endif;
?>

Esto verificará si la publicación/página tiene alguna imagen adjunta y generará una etiqueta <img> que muestra la imagen en el tamaño deseado.

Paso 3 Cambiar el tamaño de las imágenes existentes

Para esta tarea hay un complemento llamado Regenerate Thumbnails que te puede ayudar. Esto puede regenerar todo, un lote o imágenes individuales. Si cambias el tamaño de las imágenes y las regeneras, las imágenes con las dimensiones anteriores no se eliminarán.

Ejemplo

Digamos que te gustaría hacer uso de esta función dentro de tu tema. Desde la carpeta /wp-content/themes/nombre-del-tema, abre functions.php con tu editor de texto favorito. Si tu tema no tiene una acción after_setup_theme definida, debes agregar una. El código para los tamaños de imagen personalizados se agregará a ese método definido.

Nota: estos son nombres de tamaño de imagen reservados: thumb, thumbnail, medium, large, post-thumbnail. Agregar un tamaño de imagen personalizado con un nombre reservado anulará sus valores predefinidos.

add_action( 'after_setup_theme', 'setup' );
function setup() {
	// ...
	
	add_theme_support( 'post-thumbnails' ); // This feature enables post-thumbnail support for a theme
	add_image_size( 'header', 600, 200, true ); // header image
	add_image_size( 'custom-size1', 400, 200 ); // 400 pixel wide and 200 pixel tall, resized proportionally
	add_image_size( 'custom-size2', 400, 200, true ); // 400 pixel wide and 200 pixel tall, cropped
	
	// ...
}

Editando los archivos content.php o content-single.php o content-page.php, puedes mostrar la imagen con el tamaño apropiado para el encabezado de la publicación colocándola debajo o debajo del título de la publicación.

<h1><?php the_title(); ?></h1>
<?php
if ( has_post_thumbnail()):
	the_post_thumbnail( 'header' );
endif;
the_content();
?>

Para que los otros dos tamaños personalizados se puedan elegir desde la Galería multimedia, agrega el siguiente filtro:

add_filter( 'image_size_names_choose', 'custom_image_sizes_choose' );
function custom_image_sizes_choose( $sizes ) {
	$custom_sizes = array(
		'custom-size1' => 'My custom size 1',
		'custom-size2' => 'My custom size 2'
	);
	return array_merge( $sizes, $custom_sizes );
}

Un ejemplo de la vida real de cómo funciona esto y cómo se puede usar: gurde.com

Referencias

Cómo generar una galería con tamaños de imagen personalizados y agregar algo de JavaScript para ampliar las imágenes y cambiar entre ellas (mouse y teclado).