Regale takes "do more with less" to heart. Its layout and typography is super minimal and not over-designed so your content has the viewer's full attention. This theme is an excellent choice for photographers who need a clean, easy to navigate portfolio site of their work.
What's new in 2.0
- Completely rebuilt mosaic grid layout engine.
- Smooth, dynamic page loading and browsing.
- Large cover images and titles for collections, essays and pages.
- Full screen "splash" slideshow for welcoming visitors with featured content or featured albums.
- Customizable image loading spinner animations (color, size, etc).
- Lightbox image viewing from within album and photostream pages.
- Better scaling of portraits on content page so entire image is always visible.
- Optional album title and description header on album pages.
- Archive template for browsing albums and sets by tag/category.
- Additional built-in color styles and typography options.
More notable features
- Responsive mosaic grid for content indexes and albums.
- Easily configurable number of grid columns and spacing for a custom look.
- Grid titles and captions that may appear on mouseover, underneath or none at all.
- Images dynamically load as you scroll.
- Like and Tweet buttons with option to link Facebook button to your Facebook page.
- Individual photo/video permalink page.
- Essay and Page support.
- Compatible with all tablets and mobile devices.
- Customizable background and text colors.
Updates and support
- All 2.0 theme updates are free.
- Fully supported by Koken.
Lots of people use Regale right out-of-the-box without any customization. Nonetheless, we've include a wide range of editable settings for those who'd like to tweak the theme more to their liking. Like all Koken themes, edits to Regale's layout, typography, color and everything else is handled through an integrated settings panel that requires no coding or HTML experience.
Let's take a look at all the major settings you'll find in Regale.
Regale offers four simple color schemes that may be selected in the Style dropdown: "White" (the default), "Black", "Cool White" and "Warm White". These alter the background and type color of every page on your site.
The Layout section controls the proportions of every page. Header height and Footer height control the height of each area respectively, Inside pad controls the amount of space between header/footer text and the edge of the browser window, Inside spacing controls the amount of space between header/footer links, and Content offset pushes the content area away from the header. The latter is helpful for those applying separate colors to each area.
Text works best for Regale's site title because the header area is thin, but images can work too if sized appropriately. To change from text to a custom image, look for the Site title area of the theme settings panel and change Type to Image, like so:
Regale's header will then display a recommended height for your site title image. This is calculated using the interior space of the header, times two. Why times two? Because in order for your logo to appear sharp on Retina/HiDPI screens it needs to be twice the size you'd normally create. Regale will scale the 2x image down to half its height using the Regular height (desktops, tablets) and Mobile height (smartphones) slider values, as indicated below.
For example, if Regale recommends a height of 44px, you may create a 44px tall image in Photoshop, Illustrator, or any other graphics editor. Width can be any value you want. Save the image (PNG recommended), then upload it to either a folder on your web server or anywhere the image file can be linked to directly. Copy the absolute (http://) URL to the image, then paste the URL into the Image URL field. Next, set Regular height to half the height of the image file height (e.g. 44px / 2 = 22px). You may then set Mobile height underneath to the same height or smaller if you'd prefer the image a bit smaller on smartphones.
Note that the recommended image height is only a recommendation. Feel free to create any height you want to suit your header design. Just remember to always create the image at twice the value of Regular height for the sharpest results on all screen sizes.
The grid is the underlying foundation of Regale and is used in multiple templates to display content. To customize, first navigate to the page you want to edit inside Site, then click on Template at the top of the theme settings panel. There you'll find the following options:
Desktop cols, Tablet cols and Mobile cols controls the number of grid columns used on each respective screen size. More columns equals smaller images, fewer columns equals larger images. By default, Regale presents albums and sets using fewer columns for larger images. The following table shows the values each template uses.
Spacing controls the amount of negative space, in pixels, between each grid item. Increase this for a looser grids with smaller images, decrease for tighter grids with larger images.
Variability assigns non-uniform column widths to make the grid a bit less predictable. When set to None (the default) every column is the same width (eg, 5 columns = 20% each). When Odd, Even or Random is selected an Amount slider appears underneath to control the degree of non-uniformity to apply. So for example if you picked Random and set Amount to 5%, the 5 columns would then have widths like 18.6%, 22.6%, 17.6%, 22.6%, and 18.6%. No matter what you choose, they'll always add up to 100%.
Album, image and video titles may be displayed in the grid. Their general properties are edited for every template through the Content info section of the Template view in settings. Here you can adjust their color, alignment, size and padding.
How content info appears depends on the template you're viewing. This is controlled through the Show titles option (see figure above). Its options include None, Mouseover and Fixed. The following table shows the default settings for each template.
|Albums, Albums Archive, Set, Sets||Mouseover|
|Album, Contents, Contents Archive, Favorites, Index||None|
Editing this for one template in the table above will apply the setting to all related templates too.
Note: When Mouseover is selected and a page is viewed on a mobile device the theme will automatically switch to Fixed because hover isn't supported.
For a closer look at images and videos you have two display options: the Lightbox or the Content template.
All content pages -- Album, Contents, Contents Archive, Favorites and Index -- share the same setting, so checking or unchecking the Launch lightbox when clicked setting will be applied to each template.
When unchecked (default), image clicks load the Content template. The Template area of the settings panel will then display these options. Check or uncheck the content properties you'd like the page to display.
When checked the Lightbox is displayed instead and a few additional settings are displayed in the Theme view of the settings panel:
You may choose between Black and White lightbox styles as well as control how large images are displayed. This is 1600 by default, but you may slide this up for larger images on big screens or down for images that don't obscure the page underneath.
View an album, set, essay or page and the Template panel will display options for Cover. This publishes a large preview image and title above the content grid. Albums and sets display their primary cover image, titles and descriptions while essays and pages display featured images, titles and excerpts. Note that enabling covers for an album, set, essay or page will enable covers for all related content appearing in the same template.
Type includes three options for albums/sets: None (the default), Text and Image. Text displays the collection's title, description, metadata and social share links using only text. Image displays the same but with the collection's primary cover image underneath and more typographic style.
When viewing an essay or page, Type includes options for None (the default) and Image. Image displays the essay/page featured image underneath its title, excerpt, metadata and social share links.
Image offers a range of presentation options:
- Align - Position of text above the image.
- Background - Applies a color between the image and text.
- Text - Color of the collection info text.
- Title min size - Smallest possible point size for title (mobile).
- Title max size - Largest possible point size for title (desktops).
- Width - Width of collection info on desktops and tablets.
- Padding vert - Applies padding above/below the collection info.
- Padding Horiz - Applies padding left/right the collection info.
This concludes our overview of Regale's most notable settings. Hopefully it will provide some creative inspiration as you use the theme to create your site. If you have questions about the theme, post a question to our discussions page or contact Koken support directly.
When you do publish your site, consider sharing it with us! We might include it on this page for others to check out. Simply click on "Examples" in the sub-navigation above and look for the share link box.