Details Pages

Details pages are the templates that serve the “details” of individual dynamic content items such as news stories, events, galleries, forms, blog posts, and profiles.

Details pages are set per content type. In other words, all news stories on a LiveWhale-powered site appear in the same template by default. But, you can create custom details pages for groups (so that groups with unique site designs can have stories that appear in their own template) or even for widgets (so that special kinds of news items can always appear in a consistent template).

Organizing your details pages

Since LiveWhale 1.6.1, the default locations for your details pages are:

  • /_ingredients/templates/details/blogs.php
  • /_ingredients/templates/details/blurbs.php
  • /_ingredients/templates/details/events.php
  • /_ingredients/templates/details/forms.php
  • /_ingredients/templates/details/galleries.php
  • /_ingredients/templates/details/news.php
  • /_ingredients/templates/details/profiles.php
  • /_ingredients/templates/details/tags.php

If your files are at that location, no further configuration is needed.

If you’re using LiveWhale 1.6 or earlier (or if you don’t want to use the default _ingredients location), you can set the location of your details pages in livewhale/client/public.config.php:


Developing new details pages

If you are developing a new or significantly different details page, one of the easiest methods is to duplicate an existing details page closest to your need (of the matching content type of course) and then build and test your new page off-the-grid by requesting it directly:


In the above example, we request the details page directly and must also include a valid id for matching content to be displayed in the details page. Not providing the id will result in a 404 error page.

The main thing that tells LiveWhale it may use a particular file as a details page is putting <widget type="news_details" priority="high"/> somewhere on the page, changing “news” to another content type (profiles, forms, if necessary.

Details Page Variables

Since LiveWhale 1.6, details pages can be created with generic variables (details_name, details_thumbnail, details\body, etc.) that allow you to re-use content between details pages.

Name Code Type(s)
Name / Title <xphp var="details_name"/> or
<xphp var="details_title"/>
Image <xphp var="details_image"/> news, events, profiles, galleries
Gallery Images <xphp var="details_thumbnails"/> galleries
Body (includes profiles fields assigned to “body”) <xphp var="details_name"/> all
Sidebar (includes profiles fields assigned to “sidebar”) <xphp var="details_sidebar"/> profiles
Post <xphp var="details_post"/> blogs
Summary <xphp var="details_summary"/> news, events, galleries
URL <xphp var="details_url"/> news, events, profiles
Location <xphp var="details_location_title"/> all
Related Content <xphp var="details_related_content"/> all
Save and Share Links <xphp var="details_share"/> all
Last Modified <xphp var="details_last_modified"/> all
Last Editor <xphp var="galleries_last_editor"/> all

If your site predates LiveWhale 1.6, you might notice variables that are named for the content type (news_body, profiles_thumbnail, etc.). You can replace those with the generic details_ version, but LiveWhale 1.6+ remains backwards-compatible with the old style of variables.

You may want to use XPHP logic to only show certain fields if they exist:

<xphp content="true">
<if var="details_image"/>
<div class="news-page-images"><xphp var="details_image"/></div>

This is especially useful when displaying custom fields in profile details pages:

<xphp content="true">
<if var="profiles_12"/><!-- Class Year -->
<span>Class of <xphp var="profiles_12"/></span>

Configuring your details templates

There are currently three arguments (image_width, image_height, and image_crop) you may include inside your <widget type="{type}_details" priority="high"/> declaration to change how images are included on your details page.

<widget type="profiles_details" priority="high">
<arg id="image_width">250</arg>
<arg id="image_height">250</arg>

Note: setting image_width and image_height will crop images to those precise dimensions, unless you also include <arg id="image_crop">false</arg>.

LiveWhale 2.0 adds a new core gallery type called “default,” which is used when multiple images or a gallery are attached to an event, news story, profile, or blurb.

When you place it on your event details component using {{ image }} or on a news/profile/blurb details page using <xphp var="details_image" />, it will return:

  • A single image (if only one is attached)
  • An image that clicks to open a fullscreen slideshow (when multiple images are attached), including an icon overlay indicating that a gallery is present

To customize the appearance of the fullscreen overlay, you copy the folder
and start editing!

In default.scss, you can edit the variables to change the colors/sizing of the gallery overlay, or change the .lw_gallery--multiple &::after styles if you’d like to use your own icon or indication of when the image is linking to a gallery.

The core folder contains:

  • default.xml widget template containing the HTML markup of the gallery
  • default.scss stylesheet (automatically compiled to default.css)
  • default.es6 script (automatically compiled to default.js)

And if you’d like to replace the core default gallery with your own original version, you can create a new gallery called “default” in /_ingredients/themes/global/galleries/ containing its own .scss, .es6, and .xml configuration files modeled after the above core versions.