A display template determines how your API data is presented to visitors on your website. API Press includes multiple built-in templates to suit different content types and layouts. This article helps you choose the right template and customize its appearance.
Available Templates
Each template has a specific purpose and works best with certain types of data. Choose the one that best matches how you want to display your information.
List Template
Best for: Product listings, blog posts, team members, any tabular data arranged vertically.
What it displays: Each item in a row format with optional image, heading, subheading, excerpt, link, button, and badge.
Common uses:
- Product catalogs
- News/blog posts
- Team member directories
- Event listings
List Template Fields: The List template includes the following customizable fields:
| Field | Type | Description |
|---|---|---|
| Image | URL | Optional image displayed on the left side of each list item |
| Heading | Text (Required) | Main title or name of the item |
| Subheading | Text | Secondary text below the heading (category, date, etc.) |
| Excerpt | Text | Description or preview text |
| Link URL | URL | Where the item links to when clicked |
| Button Label | Text | Text displayed in the action button (e.g., “View Details”, “Buy Now”) |
| Badge | Text | Small tag or label (e.g., “New”, “Sale”, “Popular”) |
JSON Template
Best for: Technical output, debugging, raw data display.
What it displays: Raw API response formatted as readable JSON code.
Common uses:
- Testing API integration
- Developer documentation
- Raw data output
PHP Array Template
Best for: Developer output, debugging, raw array display.
What it displays: API response formatted as PHP array syntax.
Common uses:
- Development and debugging
- Verifying API response structure
HTML Template
Best for: Complete custom control
What it displays: Outputs HTML markup wrapped around each key and value so it can be styled using CSS
Common uses:
- Custom HTML designs
- Advanced styling
Note: The HTML template requires knowledge of HTML and how to output API field values. This is an advanced option for developers.
Cards Template (PRO)
Best for: Visual display of items in a grid layout, team members, portfolio projects, products.
What it displays: Items arranged in columns with card-style containers, typically with image and text stacked vertically.
Common uses:
- Portfolio galleries
- Team member cards
- Product showcases
- Service offerings
Table Template (PRO)
Best for: Tabular data, pricing tables, comparison charts, structured information with multiple columns.
What it displays: Data in traditional table format with rows and columns, header row, organized data presentation.
Common uses:
- Pricing tables
- Feature comparisons
- Schedules and timetables
- Data comparisons
Gallery Template (PRO)
Best for: Image-focused content, photo galleries, visual portfolios.
What it displays: Grid of images with optional captions or overlays.
Common uses:
- Photo galleries
- Portfolio projects with images
- Visual product catalogs
Slider Template (PRO)
Best for: Featured content, testimonials, featured products, one-at-a-time showcase.
What it displays: One item at a time with navigation arrows and dot indicators to browse through items.
Common uses:
- Featured products
- Testimonial rotators
- Hero image galleries
- Featured articles
Carousel Template (PRO)
Best for: Horizontal scrolling content, featured items, infinite scroll effect, logo carousel.
What it displays: Multiple items visible at once in a horizontal carousel that scrolls left and right.
Common uses:
- Related products
- Logo sliders (sponsors, partners)
- Featured items showcase
Accordion Template (PRO)
Best for: FAQs, expandable content, detailed information organized by category.
What it displays: Collapsible sections where users click to expand and view details.
Common uses:
- FAQs
- Product specifications
- Service descriptions
- Documentation
List Template Settings
The List template (free version) includes multiple customization options to adjust the appearance:
Style
Choose the overall visual style:
- None – Minimal styling, just the content
- Classic – Traditional list appearance with borders and separation
- Minimal – Clean, modern look with subtle spacing
- Modern – Contemporary design with shadows and rounded corners
Image Settings
Image Shape: Choose how images appear:
- Square – Standard rectangular shape
- Rounded – Slightly rounded corners
- Circle – Perfect circle (useful for avatars/profiles)
Image Size: Set the width and height in pixels (default: 80px). Larger images take more space but show more detail.
Spacing
Row Gap: Space between each list item in pixels (default: 12px). Increase for more breathing room, decrease for compact display.
Show Dividers: Display dividing lines between items for visual separation. Toggle on/off based on preference.
Text Clamping
Control how many lines of text display before truncating:
Subheading Lines: Maximum lines for subheading text (default: 1). Set to 2-3 for longer subheadings.
Excerpt Lines: Maximum lines for excerpt/description text (default: 3). Higher numbers show more text.
Note: Text that exceeds the line limit is cut off with an ellipsis (…).
Badge Position
Position the badge (small label) on the list item:
- Over – Overlaid on the image in the corner
- Beside – Next to the heading text
Link Entire Row
When enabled, clicking anywhere on the list item (not just the button) follows the link. Useful for making the entire item clickable.
Choosing the Right Template
Quick decision guide:
| Data Type | Best Template | Why |
|---|---|---|
| Blog posts / News | List or Cards | Shows title, image, and excerpt clearly |
| Products with images | Cards or Gallery | Visuals are important for product browsing |
| Team members | Cards | Professional appearance with photos |
| Pricing or specs | Table | Structured data needs structured display |
| FAQs | Accordion | Organized, saves space, expandable |
| Featured content | Slider | One item at a time, focused attention |
| Logos/Partners | Carousel | Horizontal scrolling works well for logos |
| Simple lists | List | Efficient, reads like traditional list |
Next Steps
After choosing your template:
- Configure the template settings to match your preferred appearance
- Move to the next article: Mapping API Fields to connect your API data to the template
- Display the result on your site using shortcode or template tags