One of the main features of the theme is the ability to create a series of geolocalized entries called Trips.
As you’ll see, the name isn’t all that important, since having such connection between hierarchical content and its location on a map can open up all kinds of interesting possibilities.
What is a "Trip"?
A "Trip" is an entry of the relative post type "trip". A trip can have multiple "Stops", and each stop can be geolocalized on a map.
Also, Blog posts can be linked to a Trip and its Stops.
Creating and editing a Trip
When you’re in the Trip editing screen, you’ll find various layout options in the "Options" tab of the "Theme options" metabox.
Trips support the very same slideshow/page header background and page builder functionality that is shared throughout the theme. In addition to that, each Trip can display a map of its Stops.
In the Trip editing screen you’ll find two tabs, called "Trip map" and "Trip stops" that will allow you to edit the trip data.
In the "Trip map" tab, you’ll find various options to edit what the Trip map will look like. Most of the options are self explaining, and are generally based on the Google Maps API specification.
Make sure to specify the Google Maps API key under Theme Options > General, in order for Google Maps to work both frontend and backend.
The coolest option is the one called "Map style". This will allow you to deeply customize the map appearance, in terms of colors and information shown. You can get a better idea of what you can achieve with map customization by going to Snazzy Maps.
Just pick the style you like the most, and copy/paste it in the "Map style" textarea, and the theme will do the rest.
Trip Stops data can be edited through the "Trip stops" tab. After clicking on the "Add new stop" button, you’ll be presented with a variety of options concerning the Trip Stop data.
In its simplest form, a Stop is identified by a "Label" and a set of coordinates. Adding a Stop to a Trip will result in a new marker on the map (if the Stop "Show on map" option is set to "Yes"), and a new block in page (if the Stop "Show in page" option is set to "Yes").
A stop can have a custom "Description" which is displayed when the Trip Stop is present in page, and can have its own custom "Marker icon" when it is shown on the map (a small-to-medium sized transparent PNG will do).
In the "Pictures" tab of the Stop editing modal, you’ll be able to add a series of pictures to the Trip Stop.
Trip Stops also have several layout variants ("Layout" tab), and can be specified a background image ("Background" tab).
Concerning layouts, here’s a quick breakdown of what they do:
- Full screen image: the background image is stretched wide to cover the entire stop width and height.
- Full screen image, centered text: same as above, but with text center aligned.
- Mosaic centered: the Stop pictures are arranged in a mosaic view (see below), and aligned to the center of the screen.
- Mosaic left: the Stop pictures are arranged in a mosaic view (see below), and aligned to the left of the screen, with text on the right.
- Mosaic right: the Stop pictures are arranged in a mosaic view (see below), and aligned to the right of the screen, with text on the left.
- Image on the left: left aligned image that stretches till the left margin of the viewport.
- Image on the right: right aligned image that stretches till the right margin of the viewport.
Additionally, each Stop can take the whole viewport dimension in height, to create a vertical one-page slide layout effect.
Blog posts that are linked to the Trip Stop are shown below the Stop title and description in a list format. Even when they’re present, they can be hidden by checking the "Hide posts" option.
Also, whether posts are shown or not, you can make the Stop automatically display a "View gallery" button, that shows all featured images and gallery images of blog posts associated to the Stop in a lightbox format.
In the "Layout" tab, under the "Mosaic options" section, you’ll find specific options concerning the appearance of Stop pictures when a Mosaic layout is selected.
Mosaic layouts are composed using the jQuery Photoset Grid plugin.
The "Gutter" option allows you to control the spacing between images, and the "Image size" option allows you to choose the images dimensions. The "Module" option is the one that’ll determine the mosaic layout: if you have six pictures, entering a module of "231" will produce two images in the first row, three in the second, and one in the last row of the mosaic.
When using a mosaic layout, make sure to load images that are properly dimensioned so that image size generation won’t fail. (e.g. if images aren’t big enough, cropping will fail and will result in a kind of broken layout).
Linking blog posts to a Trip Stop
In the blog post editing screen, look for the "Trip" tab in the "Theme options" metabox and fill both the "Trip" and "Trip stop" select.
When a blog post is associated to a Trip and a Stop, it will be shown in the stop posts’ list in the Trip page.
Also, posts belonging to a Trip will display the Trip itinerary, which is a list of the Trip’s stops, in their sidebar.
Trips global options
You can access the Trips global options from the theme’s "Theme options" panel located under the "Appearance" menu in the WordPress admin.
You’ll be able to edit the URL slug for Trip entries, and the text of the "Show Map" button in the Trip page.