Overlays and Icons for Quick Visual Cues #

Icons and overlays let visitors assess animals at a glance without reading every field. Used well, they speed up browsing and draw attention to important traits.

Overlays vs Icons #

Choosing What to Overlay #

Overlays are the first thing visitors see. Reserve them for information that should influence whether someone clicks:

• Yes: Special needs, adoption pending, new arrival, altered status
• No: Color, weight, ID number – these belong in field details

Use overlay_filter to control which fields appear as overlays:

[pmp-search type="adopt" overlay="enable" overlay_filter="SpecialNeeds,New,AdoptionPending" overlay_position="1"]

Overlay Positioning #

Eight positions are available (1-8, clockwise from top-left). Choose based on your template:

• Position 1 (top-left): Most visible – use for critical status
• Position 3 (top-right): Good for badges that shouldn’t compete with the name
• Position 5 (bottom-right): Subtle placement for supplementary info

Icon Count and Sizing #

Too many icons create visual noise. Recommended limits:

• Search results: 3-4 icons maximum
• Detail pages: 5-6 icons maximum
• Overlays: 2-3 maximum per photo

Adjust icon sizes in Display Options > Icon Sizes or per page with icon_size.

Color Coordination #

Icon and overlay colors can be customized per context (search vs detail) in the Colors tab. Use colors that contrast with your photo backgrounds for visibility.

Tips #

• Overlays on photos grab attention – use sparingly for maximum impact
• Icons below content are scanned, not read – keep to traits visitors filter on
• Test with real photos – some overlay positions obscure important parts of the image
• On mobile, overlays and icons scale down – verify they’re still readable

Next Steps #

• Understanding Overlays — Full overlay configuration reference
• Understanding Pet Icons — How icons work
• Icon Size Customization — Control icon display sizes
• Customizing Icon Display — Colors and advanced configuration