Site & theme widget

Featured Image

The post’s featured image, cropped to any ratio, with a fallback for posts without one.

Build it with your AI

“Show the featured image of the post in 16:9 with rounded corners at the top of the post template.”

Live demo

See it working

This is the real widget, not a picture

Every card above starts with a Featured Image widget showing the post’s image, inside a loop.

Settings

22 settings in three tabs

Every setting below is in the editor — and available to your AI through get_widget_schema.

Content

7 settings

Image

Resolution

Fallback image

Link

URL

Show caption

Loading

Alignment

Design

15 settings

Image

Width

Max width

Height

Aspect ratio

Object fit

Focus point

Border radius

Border

Shadow

CSS filters

Hover effect

Caption

Typography

Color

Alignment

Spacing

Behaviour

shared

On every element

Spacing & position

Background & border

Animations

Motion & effects

Scroll & mouse effects

Visibility

Conditions

Interactions

Attributes & CSS

Build it with AI

Just describe what you want

Your AI looks up the Featured Image settings over MCP and writes the element for you — real, editable and on brand.

Claude · connected to your site

You

Show the featured image of the post in 16:9 with rounded corners at the top of the post template.

Claude · using Uncoder

Done — it’s on your site and fully editable.

  • Featured Image added where you asked
  • Styled with your Design System
  • Checked on tablet and mobile
  • get_widget_schema
  • edit_elements
  • audit_page

What the AI writes

featured-image.jsonJSON
{
  "type": "loop-grid",
  "settings": {
    "loop_template": "<Post card template id>",
    "columns": 3,
    "columns_tablet": 2,
    "columns_mobile": 1,
    "query": {
      "source": "posts",
      "post_type": "post",
      "posts_per_page": 3,
      "orderby": "date",
      "order": "desc",
      "terms": ["category:5", "category:6", "category:7"]
    },
    "column_gap": { "size": 16, "unit": "px" },
    "row_gap": { "size": 16, "unit": "px" }
  }
}

Free · GPL · No account

Your next site is one prompt away

Install Uncoder, connect your AI and describe what you want. Every page it builds stays yours to edit.