Advanced Image Controls
Comprehensive styling system for Radio and Checkbox fields with image options. 288 possible combinations with layouts, labels, check styles, and hover effects.
Overview
The Advanced Image Controls system transforms standard Radio and Checkbox fields into visually stunning, interactive selection interfaces. With 6 layout options, 6 label display modes,6 check styles, and 8 hover effects, you can create 288 unique combinationsto perfectly match your brand and user experience goals.
Visual Image Options
Add images to radio buttons and checkboxes for intuitive visual selection
Flexible Layouts
Inline, stacked, and responsive grid arrangements (2, 3, 4 columns)
Interactive Effects
Engage users with smooth animations and hover effects
Pro Tip
The Advanced Image Controls work best with high-quality images that are consistent in style and dimensions. Consider using square images (1:1 aspect ratio) for the most versatile layouts.
Activating Advanced Image Controls
- Edit your Radio or Checkbox field in the Form Builder
- Enable "Use Images for Options" - this unlocks the Advanced Image Controls section
- Add images to your field options using the WordPress Media Library
- Configure the Advanced Image Controls in the collapsible panel
Image Layout Options
Control how your images and labels are arranged with five distinct layout options:
🔄 Inline Layout
Places images and labels side by side in a horizontal arrangement. Best for forms with limited vertical space.
CSS Class: .wfb-layout-inline
Best For: Compact forms, horizontal lists
Mobile: Maintains horizontal layout on mobile devices
📚 Stacked Layout
Displays images above their corresponding labels in a vertical stack. Ideal for image-focused selections.
CSS Class: .wfb-layout-stacked
Best For: Product catalogs, visual selections
Mobile: Maintains stacked layout for consistency
🎯 Grid Layouts
Organize options in responsive grid formations with 2, 3, or 4 columns.
Grid 2 Columns
.wfb-layout-grid-2Grid 3 Columns
.wfb-layout-grid-3Grid 4 Columns
.wfb-layout-grid-4📱 Responsive Behavior:
- • Grid 4 → Grid 2 on tablets
- • Grid 3 → Grid 2 on tablets
- • Grid 2 → Single column on mobile
Label Display Options
Choose from six different ways to display option labels:
👁️ Show Label
Default behavior - displays labels normally alongside images.
.wfb-label-showUse: Standard forms where text clarity is important
🚫 Hide Label
Completely hides option labels for image-only selections.
.wfb-label-hideUse: Visual catalogs, icon selections
💬 Tooltip on Hover
Shows labels as tooltips when users hover over images.
.wfb-label-tooltipUse: Clean interfaces with contextual information
📌 Overlay on Image
Displays labels overlaid on bottom of image with semi-transparent background.
.wfb-label-overlayUse: Modern, magazine-style layouts
🏷️ Badge in Corner
Shows label as a small badge in the top-right corner of image.
.wfb-label-badgeUse: Product galleries, e-commerce stores
⬇️ Bottom Center
Centers label below the image with clear separation.
.wfb-label-bottomUse: Portfolio displays, image galleries
Check Style Options
Control how selection indicators appear:
☑️ Standard Radio/Checkbox
Classic browser-native controls positioned at top-left
✓ Checkmark Icon
Large checkmark icon overlay when selected
🔲 Border Highlight
Colored border around selected images (customizable)
🌈 Overlay Effect
Semi-transparent color overlay on selection
🎚️ Toggle Switch
Modern toggle switch positioned at top-right
⭕ None (Hide)
No visual indicator (rely on other visual cues)
Hover Effects
Add interactivity with eight smooth hover animations:
Image Styling Options
🖼️ Image Fit
- Cover: Fill entire area (may crop)
- Contain: Fit within area (may show gaps)
- Fill: Stretch to fit
📐 Border Radius
- None: 0px (square corners)
- Small: 4px
- Medium: 8px
- Large: 16px
- Round: 50% (circle)
📏 Image Spacing
- Tight: 8px
- Normal: 16px
- Relaxed: 24px
- Loose: 32px
Best Practices
✅ Do's
- ✓ Use consistent image dimensions
- ✓ Optimize images for web (compress)
- ✓ Test on mobile devices
- ✓ Use descriptive alt text
- ✓ Choose appropriate layouts for content
- ✓ Consider accessibility (color contrast)
❌ Don'ts
- ✗ Don't use inconsistent image sizes
- ✗ Don't upload huge unoptimized files
- ✗ Don't use too many columns on mobile
- ✗ Don't hide labels without tooltips
- ✗ Don't combine conflicting effects
- ✗ Don't forget keyboard navigation
Troubleshooting
Images not displaying?
- Verify images are uploaded to Media Library
- Check "Use Images for Options" is enabled
- Ensure image URLs are valid and accessible
- Clear browser cache and reload page
Layout looks broken on mobile?
- Grid layouts automatically adjust for mobile
- Test with different viewport sizes
- Consider using Grid 2 or Stacked on mobile
- Check image spacing settings
Hover effects not working?
- Verify hover effect is selected in settings
- Check for conflicting custom CSS
- Test on desktop (hover doesn't work on mobile)
- Ensure JavaScript is enabled