Images

An image in Pixel is a design: a canvas with elements on it, the conditions that decide where it is used, and a name. Pixel renders a file from it for each post that needs one.

The image library

Images lists every design with its name, canvas size and number of elements, newest first, 25 to a page, with a search field; the search and the page are part of the address (q and paged), and a search that finds nothing says so in the table. Before the first image exists it shows a short explanation with Create image instead. From there you can:

• Create image: give the image a name. It starts as a 1200 × 630 white canvas with one text element.
• Edit an image, which opens it in the editor.
• Delete an image, which asks first and then removes the design and its conditions; it cannot be undone.

The editor

The editor’s toolbar switches between three views, and beside them Delete image removes the image after asking first; it cannot be undone.

Design

The design view has three columns: Structure, the list of elements on the left; the canvas in the middle; and the inspector for the selected element, or for the canvas when nothing is selected, on the right.

There are three kinds of element:

• Text, with its font, size, weight, style, line height, letter spacing, alignment, transform and colour. See How text works.
• Image, whose source is a URL typed in, an image chosen from the WordPress media library, or an image from dynamic data such as the post’s featured image. It fits its box by covering or containing. A source is an http or https address, or a path to a file of the site such as /wp-content/uploads/…, and the file must be a PNG, JPEG, GIF, BMP, WebP or self-contained SVG image; any other source is left empty.
• Section, a box for backgrounds, borders and rounded corners.

Every element has a position, a size, padding, opacity, a background (a solid colour or a gradient) and a border. Elements can be duplicated, locked against accidental moves, and deleted; changes can be undone and redone. The canvas settings hold its size, its background and the safe margin. How the canvas behaves while you edit – guides, snapping, the Shift step – is set per user in Canvas.

Conditions

Where the image is used: as the Open Graph or Twitter Card image, as the featured image, or in the block editor sidebar, and for which pages. See Conditions.

Templates

A gallery of 259 starter designs, filterable by format and by tags. Use template replaces the canvas settings and elements of the open image with the template’s; the image keeps its name and its conditions. The change stays unsaved until you save.

Preview data and previewing

The editor shows dynamic data from a post you pick in its preview data list, which searches every post type as you type and keeps the post saved with the design. Preview image renders the current, unsaved design on the server for that post, exactly as Pixel will render it, and is the way to check the final result; see Rendering differences.

Saving

Changes stay unsaved until you press Save, which replaces the stored design and confirms with “Image saved.”; images already rendered from the old design are rendered again the next time they are needed. Discard, beside Save, returns the editor to the saved design. Both are available only while something has changed.

Unsaved changes stay with the workspace tab: you can open another screen or another image and come back to them, and the browser asks before a reload or a closed window would lose them.

The image ID

PHP functions, the shortcode and WP-CLI refer to an image by its ID: the number at the end of the editor’s address (…/images/123), also listed by wp sleek pixel image list.