Presswell Art Direction

Descrición

Presswell Art Direction gives editors and developers a consistent way to manage image sizing and cropping in WordPress. Define custom sizes, set focal points, and generate non-core thumbnails only when they are actually needed.

Features

  • Control image cropping with focal points
  • Define custom image sizes and nested thumbnail variants
  • Select custom image sizes directly in the WordPress editor
  • Show a different crop on desktop, tablet, and mobile with the Art Directed Image block
  • Use image sets and focal points in the core Image block
  • Dynamically generate non-core thumbnails on demand
  • Run batch regeneration from a dedicated Media tool
  • Use Endpoint Mode when filename-based 404 handoff is unavailable
  • Import/export size definitions

Focal Point Cropping

Set a focal point for Media Library images to control how custom crops are framed. Mark the visual subject once, and generated thumbnails stay centered on the correct area.

Custom Size Management

Use the settings UI to define and edit custom image sizes. Registered sizes become available when inserting images in the block editor and classic editor workflows.

Block Editor

The Art Directed Image block shows a different image set on desktop, tablet, and mobile, switching at the same breakpoints as the editor’s device preview. Turn on Image Block Support to use your image sets in the core Image block too: its Resolution lists your sets, it serves their real crops instead of CSS aspect ratios, and its sidebar has the focal point editor.

Dynamic Generation + Endpoint Mode

Presswell Art Direction avoids generating every custom size at upload time. WordPress core sizes are generated normally, while custom sizes are generated when requested in templates or by URL.

If filename-based 404 image requests do not reach WordPress (common in some NGINX/server setups), enable Endpoint Mode (/pwad-image/?id=...&size=...). The plugin includes an automatic compatibility check in wp-admin.

Regenerator

The Regenerator screen (Media -> Regenerate Thumbnails) builds a queue and processes images in batches, with progress metrics and retry handling for failed jobs. You can choose exactly which sizes should be regenerated.

Documentation

Public APIs

pwad_add_image_size( $args )

  • $args (array) (required) – Keyed array containing name, key, height, width, crop (optional), and optionally thumbnails values.
  • Thumbnail keys are prefixed with parent’s key like [size]-[thumbnail].

Example:

pwad_add_image_size( array(
  'name' => 'Square',
  'key' => 'square',
  'width' => '1200',
  'height' => '1200',
  'crop' => true,
  'thumbnails' => array(
    array(
      'name' => 'Medium',
      'key' => 'medium',
      'width' => '800',
      'height' => '800',
    ),
    array(
      'name' => 'Small',
      'key' => 'small',
      'width' => '400',
      'height' => '400',
    ),
  ),
) );

pwad_get_image_sizes()

Returns all currently-available sizes (WordPress defaults + plugin/theme sizes + Presswell Art Direction sizes/thumbnails).

Example:

$sizes = pwad_get_image_sizes();

pwad_get_image( $attachment_ID, $size_key, $attr = array() )

  • $attachment_ID (int) (required) – ID of image attachment
  • $size_key (string) (required) – Image size identifier (thumbnail, large, my-size, my-size-mobile, etc.)
  • $attr (array) (optional) – HTML attributes passed to the rendered image element

Returns an image tag.

Example:

$square_large = pwad_get_image( $img_ID, ‘square’ );
$square_small = pwad_get_image( $img_ID, ‘square-small’, array( ‘class’ => ‘hero-image’ ) );

pwad_get_image_src( $attachment_ID, $size_key )

  • $attachment_ID (int) (required) – ID of image attachment
  • $size_key (string) (required) – Image size identifier (thumbnail, large, my-size, my-size-mobile, etc.)

Returns a keyed array containing the file, url, path, height, width, and mime-type values.

Example:

$square_large = pwad_get_image_src( $img_ID, ‘square’ );
$square_small = pwad_get_image_src( $img_ID, ‘square-small’ );

Actions

pwad/image_generated

Fires immediately after a custom crop file is generated so themes/plugins can queue optimizers or post-processing.

Arguments:

  • $data[‘attachment_id’] (int) – Attachment ID.
  • $data[‘size_key’] (string) – Requested size key.
  • $data[‘size_data’] (array) – Registered/requested size definition used for generation.
  • $data[‘source_file’] (string) – Source file path from attachment metadata (relative upload path).
  • $data[‘generated_file’] (string) – Generated filename for the new crop.

Example:

add_action( ‘pwad/image_generated’, function( $data ) {
// Example: queue optimization when a new crop is created.
if ( ! empty( $data[‘attachment_id’] ) && ! empty( $data[‘generated_file’] ) ) {
do_action( ‘my_optimizer/queue’, $data );
}
} );

Filters

pwad_status_rows

Add or change rows in the status table on the Debug tab.

  • $rows (array) – Rows, each an array with label (string), value (string), and status (ok, warning, or empty). Rows without a string label and value are skipped.

Example:

add_filter( ‘pwad_status_rows’, function( $rows ) {
$rows[] = array( ‘label’ => ‘Image CDN’, ‘value’ => ‘Connected’, ‘status’ => ‘ok’ );
return $rows;
} );

WP-CLI

wp pwad regenerate

Regenerates thumbnails.

  • --queue-per-page=<int> (default 200)
  • --batch-size=<int> (default 25)
  • --target-seconds=<float> (default 5)
  • --resume-last=<0|1> (default 0, continue the last interrupted queue)

wp pwad cache-prime

Generates thumbnails based on sitemap.

  • --sitemap=<url> (optional, auto-detects from robots.txt/common sitemap endpoints)
  • --page-limit=<int> (default unlimited)
  • --image-limit=<int> (default unlimited)
  • --delay-ms=<int> (default 250)
  • --timeout=<float> (default 10)
  • --retries=<int> (default 2)
  • --include-external=<0|1> (default 0)
  • --force-endpoint=<0|1> (default 0)
  • --report-csv=<path> (optional, writes per-URL status/error report; relative paths are saved privately in wp-content/uploads/pwad-logs/)
  • --dry-run=<0|1> (default 0)
  • --resume-last=<0|1> (default 0, continue the last interrupted prime run)

wp pwad cache-prune

Deletes cached thumbnails not referenced in sitemap.

  • --sitemap=<url> (optional, auto-detects from robots.txt/common sitemap endpoints)
  • --batch-size=<int> (default 200)
  • --max-images=<int> (default unlimited)
  • --page-limit=<int> (default unlimited)
  • --image-limit=<int> (default unlimited)
  • --timeout=<float> (default 10)
  • --grace-days=<int> (default 0, uses file modified time)
  • --include-external=<0|1> (default 0)
  • --force-endpoint=<0|1> (default 0)
  • --report-csv=<path> (optional, writes per-file keep/delete report; relative paths are saved privately in wp-content/uploads/pwad-logs/)
  • --dry-run=<0|1> (default 1)
  • --resume-last=<0|1> (default 0, continue the last interrupted prune run)

wp pwad cache-clean

Deletes all cached thumbnails.

  • --batch-size=<int> (default 200)
  • --max-images=<int> (default unlimited)
  • --include-default=<0|1> (default 0)
  • --dry-run=<0|1> (default 1)
  • --resume-last=<0|1> (default 0, continue the last interrupted clean run)

wp pwad queue-status

Shows resumable/remaining state for regenerator and cache queue runs.

Privacy

Presswell Art Direction does not send image data to external services. It processes image metadata and generated variants within your WordPress environment.

Capturas

Blocks

Este plugin proporciona 1 bloque.

  • Art Directed Image An image that shows a different crop on desktop, tablet, and mobile.

Instalación

Install via the WordPress plugin installer, or manually upload the plugin directory to wp-content/plugins/.

Configuration

  1. Activate the plugin.
  2. Navigate to Settings -> Art Direction.
  3. Configure custom image sizes, focal point behavior, and compatibility mode as needed.
  4. Use Media -> Regenerate Thumbnails when you need to pre-build or refresh generated variants.

Preguntas frecuentes

How do I set a focal point?

When viewing an image in the media library click the ‘Set Focal Point’ button. Use the size dropdown to change the crop preview. Click and drag the blue focal point marker to identify the subject of the image. When finished, click the ‘Save Focal Point’ button to update the focal point settings and clear the image thumbnail cache for regeneration.

Why should I use focal points?

Focal points let you control crop framing across many sizes without manually defining crop coordinates for every variant.

Why use dynamic image generation?

Themes often register many custom sizes, but only a subset are used on the live site. Dynamic generation creates only the thumbnails that are actually requested.

What is Endpoint Mode (Compatibility Mode)?

Endpoint Mode serves generated images through a WordPress endpoint when your server does not pass filename-based 404 image requests to WordPress. The plugin can auto-enable this mode when compatibility checks fail.

How do I regenerate images in bulk?

Open Media -> Regenerate Thumbnails and run the regenerator, or run wp pwad regenerate from WP-CLI.

Why would I delete all cached images?

When migrating a large site it is beneficial to delete any generated image sizes to speed up the data transfer. Images will be re-generated dynamically when requested from the new location.

How does it work with the Image block?

Turn on Image Block Support under Settings -> Art Direction. The Image block’s Resolution then lists your image sets (with core’s Thumbnail, Medium, Large, and Full Size) instead of every generated size, and srcset serves each set’s smaller sizes. Pick a set to choose the image’s shape: it uses the set’s real crop, cut around the image’s focal point.

The block’s Art Direction panel shows which set is in use and lets you drag the image’s focal point without leaving the editor, with any set’s crop outlined on the image (it starts with the block’s Resolution). Saving rebuilds the image’s crops around the new point; the focal point belongs to the image, so it applies everywhere the image is used.

The Image block’s aspect ratio presets are removed, so shapes come from your sets rather than CSS crops; other blocks keep the theme’s presets. Image blocks that already use an aspect ratio matching a set are served that set’s crop, and other aspect ratios are centred on the image’s focal point. Nothing is changed in saved posts, so turning the setting off returns everything to how it was.

How do I show a different crop on phones and tablets?

Add the Art Directed Image block. Choose an image, then pick an image set for Desktop, Tablet, and Mobile in the block’s sidebar; tablet uses the desktop crop and mobile uses the tablet crop unless you choose another. Choosing a device also switches the editor’s preview, so the canvas shows the crop you’re working on. The block outputs a <picture> element, so browsers download only the crop that fits the screen.

The breakpoints come from WordPress itself (480px for mobile and 782px for tablet by default, or your theme’s settings.viewport in theme.json), so crops switch exactly where the editor’s device preview and the theme’s responsive styles do. The block has the same focal point editor as the Image block, plus alt text, a caption, alignment, and a transform to and from the Image block.

What does the Debug tab show?

Settings -> Art Direction -> Debug has a status table covering how images are generated and served (Smart Cache, Compatibility Mode, missing file requests, the image editor, the uploads folder, and custom sizes), focal points, the last regenerator and cache command runs, and any conflicting plugins. It also has an image debugger that shows every size and URL for one image, and the private debug log.

Comentarios

8 de Xuño de 2020
Really easy to use, and integrated perfectly with the front end of the site without any extra javascript or CSS required. Perfect add-on.
19 de Decembro de 2018
Tested a load of "so called" image crop tools. This is the only one I've found that: 1. Works with theme image sizes! (that was enough to clinch it for me) 2. Easy to use in the media management 3. Easy to manually set the focal position for each image and override as needed. This plugin (20181219) is only 54kb in size and worth 5*'s. Not sure why no one else has reviewed it. So easy to select which image size you want to adjust, then set the focus point and job done. Nice one guys.
Ler todas as 2 opinións

Colaboradores e desenvolvedores

“Presswell Art Direction” é un software de código aberto. As seguintes persoas colaboraron con este plugin.

Colaboradores

Traduce “Presswell Art Direction” ao teu idioma.

Interesado no desenvolvemento?

Revisa o código, bota unha ollada aorepositorio SVN, ou subscríbete ao log de desenvolvemento por RSS.

Rexistro de cambios

2.2.0

  • Added the Art Directed Image block, which shows a different image set on desktop, tablet, and mobile.
  • Added Image Block Support: the Image block lists your image sets under Resolution, uses their real crops instead of CSS aspect ratios, and has an Art Direction panel for previewing crops and setting the focal point.
  • Added a status table to the Debug tab showing how images are generated and served, focal points, and recent regenerator and cache runs.
  • Updated the debug log viewer to match other Presswell plugins.
  • Fixed queue tables being left behind when a site is deleted from a Multisite network.
  • Fixed the image debugger not listing deleted files after clearing an image’s cache.
  • Requires WordPress 6.6 or later.

2.1.1

  • Fixed various UI inconsistencies.

2.1.0

  • Fixed issue with default size generation.
  • Fixed various performance and security issues.
  • Added debug functionality and improved logging.
  • Removed legacy focal point migration tools.

2.0.2

  • Fixed warnings with empty filenames.

2.0.1

  • Added pwad/image_generated action for post-processing.

2.0.0

  • Added dedicated regenerator screen.
  • Added compatibility mode (NGINX support).
  • Added debug logging.
  • Added CLI commands.
  • Complete overhaul of codebase.

1.1.11

  • Added alt text support to get_image_src.

1.1.10

  • Fixed url mismatch.

1.1.9

  • Fixed filesize warning.

1.1.8

  • Adjusting multisite rewrite rules.

1.1.7

  • Added multisite support.

1.1.6

  • Fixed duplicate path on original image.

1.1.5

  • Fixed erroneous array key.

1.1.4

  • Fixed empty array.

1.1.3

  • Fixed errors and warnings.

1.1.2

  • Fixed issue with thumbnail sizes that match the original upload’s dimensions.

1.1.1

  • Reading real image sizes.

1.1.0

  • New image regeneration method.

1.0.9

  • Fixed issue with erroneous crops.

1.0.8

  • Fixed empty image data array.

1.0.7

  • Fixed issue with character encoding in filenames.

1.0.6

  • Added ability to disable smart caching.

1.0.5

  • Fixed permalink protocol mismatch.

1.0.4

  • Fixed media modal issue.
  • Added Elementor support.

1.0.3

  • Fixed updater issue.

1.0.0

  • First public release.