Images & Media

Images & Media

An image should improve the story, not create another production workflow.

A photograph can establish the mood of an article. A diagram can explain an idea faster than a paragraph. A featured image can make a Post recognizable wherever it appears, from a compact listing to a shared link.

But the same image rarely belongs in every context at the same size and shape. Preparing separate files for article bodies, page headers, cards, and social previews quickly becomes repetitive work.

VerdinCore approaches this as part of publishing rather than as a separate design task: choose the image and its role; let the media pipeline prepare the appropriate outputs.

Different images, different jobs

VerdinCore treats images according to where they are used. This distinction is important: a photograph inside an article has different requirements from a wide cover image or a graphic used by a reusable Content Block.

Image role

How VerdinCore handles it

What the publisher gains

Featured image for a Post

Generates small, medium, and large AVIF versions, plus a JPEG image for sharing

One upload can support article headers, post listings, and social previews

Featured image for a Page

Generates its own set of differently proportioned AVIF versions and a JPEG sharing image

Page headers can use layouts tailored to different screen sizes

Image within an article

Creates responsive AVIF versions while retaining the image's proportions

The article can offer suitable image sizes across screen widths

Image within a Content Block

Stores an accepted original image without resizing or conversion

Structured visual assets can keep their supplied format

These are purpose-built processing paths, not a collection of manual export options presented to the writer. They allow the publishing interface to stay relatively simple while the application does more work behind the scenes.

Featured images: give each publication a visual identity

Posts and Pages both support featured images, but they do not have to display them in the same way.

For a Post, a featured image may appear above the article and in smaller cards or lists elsewhere on the site. For a Page, the featured image may serve as a more expansive background or header element. VerdinCore maintains separate image presets for these contexts instead of assuming one crop fits every layout.

In the editor, Featured image has a dedicated upload area. Choose a file or drag it onto the drop zone. Once the upload succeeds, a preview appears in the form; the image can also be cleared from that content item.

((Screenshot from VerdinCore Admin > Edit Post > Featured image: open a demonstration Post titled "Designing Better Publishing Workflows" with a visually strong, landscape featured image already uploaded. Frame the Featured image panel so its preview and the "Choose image" and "Clear image" controls are visible, with enough surrounding editor UI to establish context. Capture at approximately 1300 × 950. Use non-sensitive sample content. Suggested caption: "A featured image is assigned directly within the Post editor."))

One source, several destinations

The media configuration illustrates how deliberately the outputs are separated:

Output

Featured Post

Featured Page

Small

450 × 253 AVIF

768 × 896 AVIF

Medium

976 × 549 AVIF

1440 × 960 AVIF

Large

1952 × 1098 AVIF

2560 × 1080 AVIF

Social sharing

1200 × 630 JPEG

1200 × 630 JPEG

Featured variants are fitted to their target dimensions and centrally cropped when required. That makes image composition worth thinking about: place important subjects where they will survive different aspect ratios, especially for Page headers. The current upload workflow does not expose a manual crop or focal-point selector.

The supplied frontend theme uses responsive images for Post covers and separate picture sources for Page covers. Exact placement and styling remain decisions of the active theme.

((Screenshot from two published demonstration pages on a VerdinCore-powered site: capture a Post showing its featured photograph above the article, and a Page showing a featured photograph in the larger header treatment. Present these as two separate source screenshots intended to be placed together in the article, each around 1400 × 900, using the same visual subject if possible to demonstrate the different treatments. Suggested caption: "Posts and Pages use featured images differently, with dedicated image outputs for each context."))

Images inside the article

Not every image belongs at the top of a page. An author might need to place a screenshot between two instructions, add a photograph to support a story, or put a diagram immediately after the concept it explains.

The visual editor includes an Insert image panel with an upload area and two editorial fields:

  • Alt text describes the image for readers using assistive technology and serves as an alternative when the image cannot load.

  • Caption provides visible context, attribution, or an explanation beneath the image when needed.

The image is inserted into the document as a figure, with a caption element when one is supplied. Selecting an existing image also allows its details to be edited through the same panel.

((Screenshot from VerdinCore Admin > Edit Post > Insert image: open a demonstration article with a paragraph before the insertion point and show the image popover after uploading a sample photograph. Keep the uploaded preview, "Alt text", optional "Caption", and "Insert image" controls visible. Use realistic alt text such as "Close-up of a notebook beside a laptop" and a short caption. Capture at approximately 1600 × 950. Suggested caption: "Images can be inserted with accessible descriptions and optional captions without leaving the editor."))

Responsive without manual exports

Article images are processed into small, medium, and large AVIF versions, with configured bounding sizes of 512, 1024, and 2048 pixels. Unlike featured cover images, these versions are resized to fit within the target bounds while keeping their aspect ratio. They are not forced into square crops.

VerdinCore adds responsive srcset and sizes information to managed article images, allowing the browser to select an appropriate available resource for the layout. The editor's image markup also uses lazy loading.

The practical benefit is straightforward: the author does not have to export three versions, upload each one, and handwrite responsive HTML merely to illustrate a paragraph.

Good image handling should reduce the number of files an author has to think about, not the quality of the story an author can tell.

Social sharing is part of the image workflow

A featured image is not only a design choice on the website. It can also represent an article or Page when someone shares its link.

For Posts and Pages with a featured image, VerdinCore generates a 1200 × 630 JPEG sharing variant. The application's metadata service uses the corresponding image URL in its Open Graph metadata. If the content has no featured image, the system uses the active theme's default sharing image.

This gives the website an explicit image to offer to services that read Open Graph metadata. The final preview still depends on the external service, its cache, and how it handles the supplied metadata.

It also means the writer can focus on choosing an appropriate image rather than producing a second file solely for link sharing.

A media library with an operational purpose

Uploaded images are not treated only as anonymous files on disk. VerdinCore maintains media records and exposes a Media page in the administration dashboard.

The current library view displays previews alongside the original filename, media collection, uploader, and creation and update timestamps. It supports filtering by collection and uploader, plus sorting by date, filename, or collection.

This is useful for understanding what has been uploaded and how the assets are organized. It is a management and inspection view, not a claim that the editor includes a universal media-reuse picker or a built-in photo-editing studio.

((Screenshot from VerdinCore Admin > Dashboard > Media: display a populated media list with examples from the Featured Post, Featured Page, and Content collections. Include the "Uploaded By", "Collection", and "Sort Order" filters as well as the preview and filename columns. Capture at approximately 1600 × 950. Hide personal usernames, identifiers, and sensitive filenames. Suggested caption: "The media dashboard provides visibility into uploaded assets, their purpose, and their origin."))

Handling images after the publication changes

Content is edited, images are replaced, and Posts are sometimes deleted. VerdinCore includes maintenance routines that identify unreferenced featured images, article images, and Content Block images and remove their stored files and records.

These are scheduled maintenance operations, not an assertion that every unused file disappears immediately after an edit. Recoverable, soft-deleted content is considered when identifying whether associated media is still in use.

That kind of housekeeping is easy to overlook in a feature list, but it matters when a content system runs for years.

Less image preparation, more publishing

There is no need to turn every writer into an image-processing specialist. A sensible media system should know that a cover, an inline illustration, and a social preview have different jobs.

VerdinCore encodes those distinctions into its workflow: context-specific variants, responsive article images, captions and alternative text, social sharing assets, and media oversight. The details can evolve with the product, but the objective remains the same: remove repetitive technical decisions from the act of publishing.

Continue exploring: The Visual Editor · Posts & Pages · Reusable Content Blocks