Media · Gutenberg
Photo Card block for WordPress
A styled media card with a prominent photo, category tag, title, excerpt, and meta information.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A styled media card with a prominent photo, category tag, title, excerpt, and meta information.
Inspector panels on this block: Content, Meta, Layout. Those titles come from index.js, not from a shared template.
Behavior controls: “Aspect Ratio” options: 16 / 9, 4 / 3, 3 / 2, 1 / 1, 2 / 1; “Layout” options: Vertical (image top), Horizontal (image side); “Image Side” options: Left, Right.
Photo Card has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Media → search “Photo Card” (block name `blockenberg/photo-card` in block.json). Style it in the sidebar after insert.
How to use Photo Card block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Photo Card”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Content. Set “Image URL”, “Image Alt”, “Aspect Ratio”, “Show Category”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Image URL | Text field in the inspector. Saved as `imageUrl`. |
| Image Alt | Text field in the inspector. Saved as `imageAlt`. |
| Aspect Ratio | Select control; the chosen value is saved on the block. Options: 16 / 9; 4 / 3; 3 / 2; 1 / 1; 2 / 1. block.json default: 16/9. Saved as `aspectRatio`. |
| Show Category | On/off toggle in the inspector. On by default. Saved as `showCategory`. |
| Category | Text field in the inspector. block.json default: Technology. Saved as `category`. |
| Content — Title | Text field in the inspector. block.json default: The Future of Web Development Starts Today. Saved as `title`. |
| Show Excerpt | On/off toggle in the inspector. On by default. Saved as `showExcerpt`. |
| Excerpt | Text field in the inspector. block.json default: Explore how modern tooling, AI-assisted coding, and component-driven design are reshaping the way we build for the web.. Saved as `excerpt`. |
| Show Author | On/off toggle in the inspector. On by default. Saved as `showAuthor`. |
| Author | Text field in the inspector. block.json default: Alex Morgan. Saved as `author`. |
| Show Date | On/off toggle in the inspector. On by default. Saved as `showDate`. |
| Date | Text field in the inspector. block.json default: 25 Feb 2026. Saved as `date`. |
| Show Read Time | On/off toggle in the inspector. On by default. Saved as `showReadTime`. |
| Read Time | Text field in the inspector. block.json default: 5 min read. Saved as `readTime`. |
| Show Link | On/off toggle in the inspector. On by default. Saved as `showLink`. |
| Link URL | Text field in the inspector. Saved as `linkUrl`. |
| Link Text | Text field in the inspector. block.json default: Read article →. Saved as `linkText`. |
| Layout | Select control; the chosen value is saved on the block. Options: Vertical (image top); Horizontal (image side). block.json default: vertical. Saved as `layout`. |
| Image Side | Select control; the chosen value is saved on the block. Options: Left; Right. block.json default: left. Saved as `imageSide`. |
| Border Radius | Numeric range control in the inspector. Range 0–32. block.json default: 14. Saved as `borderRadius`. |
| Content Padding | Numeric range control in the inspector. Range 12–56. block.json default: 20. Saved as `padding`. |
| Page Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Colors — Border | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
| Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Body Text | Color control in the inspector. block.json default: #6b7280. Saved as `textColor`. |
| Meta Text | Color control in the inspector. block.json default: #9ca3af. Saved as `metaColor`. |
| Category Background | Color control in the inspector. block.json default: #6366f1. Saved as `categoryBg`. |
| Category Text | Color control in the inspector. block.json default: #ffffff. Saved as `categoryColor`. |
| Link | Color control in the inspector. block.json default: #6366f1. Saved as `linkColor`. |
| Image Placeholder | Color control in the inspector. block.json default: #e5e7eb. Saved as `imagePlaceholderBg`. |
When this is the right block
- A styled media card with a prominent photo, category tag, title, excerpt, and meta information — that is the job of Photo Card, not a generic content block.
- Use it when you need the editor control labeled “Image URL”, which exists on this block’s inspector.
- It matches pages about photo, card, article.
- Inserter grouping: video, animation, and rich media sections.
Notes from the implementation
Static block: markup is saved in post content; no PHP render callback in this folder.
FAQ
How do I add the Photo Card block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Photo Card”. It sits under Media. After insert, open Content and set “Image URL”, “Image Alt”, “Aspect Ratio”, “Show Category”.
What makes Photo Card different from other Blockenberg blocks?
A styled media card with a prominent photo, category tag, title, excerpt, and meta information. Inspector labels on this block include “Image URL”, “Image Alt”, “Aspect Ratio”, “Show Category”.
Is the Photo Card Gutenberg block free?
Yes. Photo Card ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Photo Card to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Content, Meta, Layout).
Related media blocks
Image Box
A clickable image card with overlay title, hover effects, and a link.
Image Filter
Upload an image and apply real-time CSS filter adjustments — brightness, contrast, saturation, hue, blur, sepia, grayscale, and more. Choose from presets or build a custom look. Optionally expose live filter sliders to visitors.
Hotspot Image
Image with interactive hotspot pins that reveal tooltips on hover or click.
Image Accordion
Expandable image panels that stretch open on hover or click — ideal for showcasing portfolios, services, or locations.
Image Cards
A responsive grid of rich cards with images, category tag, title, description and CTA. Perfect for blog previews, portfolio, services or team showcases.
Image Collage
Creative overlapping image composition with up to 5 images, custom rotations, positions, frames and a floating overlay card. Perfect for hero and about sections.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Photo Card from the Gutenberg inserter.