Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

Presswell Art Direction

开发者 presswell
benplum
更新时间 2026年10月15日 23:59
PHP版本: 7.4 及以上
WordPress版本: 7.1
版权: GPLv2 or later
版权网址: 版权信息

标签

image crop responsive images thumbnails focal point

下载

2.0.1 1.1.0 1.1.1 2.1.1 2.1.0 2.2.0 1.1.11 1.1.9 1.1.2 1.1.4 1.0.9 1.1.10 2.0.2 1.1.3 1.1.5 1.1.6 1.1.7 1.1.8 1.0.7 1.0.8 1.1.12 2.0.0

详情介绍:

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 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 ) 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() ) 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 ) 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: 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. 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. wp pwad cache-prime Generates thumbnails based on sitemap. wp pwad cache-prune Deletes cached thumbnails not referenced in sitemap. wp pwad cache-clean Deletes all cached thumbnails. wp pwad queue-status Shows resumable/remaining state for regenerator and cache queue runs.

安装:

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.

屏幕截图:

  • Art Directed Image block with a crop for each device.
  • Image block with image sets and the Art Direction panel.
  • Bulk regenerator queue with progress and status.
  • Settings screen for custom size and compatibility configuration.
  • Settings screen with various plugin tools.
  • Settings screen with internal debugger.

常见问题:

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.

更新日志:

2.2.0 2.1.1 2.1.0 2.0.2 2.0.1 2.0.0 1.1.11 1.1.10 1.1.9 1.1.8 1.1.7 1.1.6 1.1.5 1.1.4 1.1.3 1.1.2 1.1.1 1.1.0 1.0.9 1.0.8 1.0.7 1.0.6 1.0.5 1.0.4 1.0.3 1.0.0