• screenshot

    Responsive mosaic grid that fills the window with content.

  • screenshot

    Plenty of editable settings that require no HTML experience. See edits immediately in live preview.

  • screenshot

    Optional introductory cover title for albums, sets, essays and pages.

  • screenshot

    Large individual photo pages with pagination, EXIF and social sharing.

  • screenshot

    Full screen slideshow template for publishing a splash front page of featured content.

  • screenshot

    Responsive design that works with all current and future mobile devices.

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.

Next: Usage

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.

Style

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.

Style

Layout

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.

Layout

Site title

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:

Edit site title

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.

Site title size

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.

Grid

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:

Grid 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.

Template Grid columns
Album 5
Albums 3
Albums Archive 3
Contents 5
Contents Archive 5
Index 5
Favorites 5
Set 3
Sets 3

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%.

Grid variability

Content info

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.

Content titles

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.

Template Content titles
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.

Images

For a closer look at images and videos you have two display options: the Lightbox or the Content template.

Images

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.

Content settings

When checked the Lightbox is displayed instead and a few additional settings are displayed in the Theme view of the settings panel:

Lightbox settings

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.

Covers

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.

Cover

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.

Summary

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.

Version 2.6.4 Released 4 months ago

  • Fix footer social media icons from being clipped.

Version 2.6.3 Released 7 months ago

  • Fix album download to album template.

Version 2.6.2 Released 7 months ago

  • Move album download to album template.
  • Fix public page of password protected album.
  • Fix mobile search styling.

Version 2.6.1 Released 8 months ago

  • Added support for Google reCAPTCHA.

Version 2.6.0 Released 8 months ago

  • Added support for site search.

Version 2.5.0 Released 10 months ago

  • Added support for Rating plugin.

Version 2.4.7 Released 1 year ago

  • Added Greek translations.

Version 2.4.6 Released 1 year ago

  • Added album download option to Set pages

Version 2.4.5 Released 1 year ago

  • Added album download option to Albums page

Version 2.4.4 Released 1 year ago

  • Allow navigation to wrap beneath logo.
  • Added language option Hungarian.

Version 2.4.3 Released 1 year ago

  • Allow navigation to wrap beneath logo.
  • Added language option Hungarian.

Version 2.4.2 Released 1 year ago

  • Added language option Icelandic.
  • Add localized contact form messages.

Version 2.4.1 Released 1 year ago

  • Validate the site title's image URL

Version 2.4.0 Released 1 year ago

  • Added language options for Spanish, Italian, Polish, Russian, Dutch, Norwegian and Swedish.

Version 2.3.0 Released 1 year ago

  • Added language options for English, French or German.

Version 2.2.8 Released 2 years ago

  • Modified form styles for compliance with new contact form functionality.

Version 2.2.7 Released 2 years ago

  • Adding baseline form input styles.
  • Added login template for use with Password Protect plugin.

Version 2.2.6 Released 2 years ago

  • Updating gif spinner for retina screens.

Version 2.2.5 Released 2 years ago

  • Removed optimize legibility CSS property due to Windows/Chrome problem.

Version 2.2.4 Released 2 years ago

  • Added new "Light" theme style. Creates a more spacious content grid and smaller typography.
  • Added new settings to control whether current navigation links are underlined, a bold option for current links, plus case transforms for titles and links.
  • Added Droid Sans, Arvo, and Arimo as typeface options.
  • Fixed text wrap issue in the footer when viewed using Windows browsers.

Version 2.2.3 Released 2 years ago

  • Splitting padding adjustments for image titles into separate settings for mouseover / under display options.
  • Changing "Underneath" title option to "Fixed" in settings UI.

Version 2.2.2 Released 2 years ago

  • Now automatically hides footer on down scroll. Footer comes back on up scroll. Can toggle off in settings.
  • Caption layout fix for mobile.

Version 2.2.1 Released 2 years ago

  • Image overlay display improvements.
  • Overlay settings now visible for featured essay images in the grid layout.
  • Extended image cropping to featured essay images in the grid layout.

Version 2.2.0 Released 2 years ago

  • 2x Retina/HiDPI site title images are now supported. Note that this required changes to how site title images are handled, so if you currently have a site title image assigned, check it out after applying this update to ensure it looks okay!
  • Added feature albums splash template. Same as the "Splash" template in the current version of Regale except this one loads featured albums and loads album pages when albums are clicked.
  • Added "Inset" setting to control whether cover images extend to the left/right edges of the browser. Default is no inset.
  • Removed underlines from tags in cover images for in retrospect they didn't look so hot.
  • Cropping of images on the front (contents), album, contents and contents archive page now supported.
  • Added setting to hide lightbox share button.
  • Added letter-spacing setting for cover header text.

Version 2.1.9 Released 3 years ago

  • Changing minimum value of essay display limit to 1.
  • Better Firefox (OS X) font smoothing in black style.
  • Binding album cover image title and arrow to right key instead of down to prevent page scroll quirkiness.
  • Updating social share links for compatibility with Koken 0.18.
  • Factor top padding into album/set cover image height calculation.

Version 2.1.8 Released 3 years ago

  • Separate color settings for header and footer text and links. If you've made custom color changes check the theme after applying this update to see if additional edits are needed.
  • Fixed issue where splash footer display setting wasn't setting properly.
  • Fixed page scroll issue with cover image links in set template.
  • Fixed issue where the show content spinner setting was being applied.
  • Fixed issue where lightbox max width couldn't be set back to its default value.

Version 2.1.7 Released 3 years ago

  • Fixed navigation layout issue in the Splash template.

Version 2.1.6 Released 3 years ago

  • Making background of white lightbox style actually white.

Version 2.1.5 Released 3 years ago

  • Published dates now appear alongside essays on the essays index and archive page.
  • Spacing adjustments to social links on content pages.

Version 2.1.4 Released 3 years ago

  • Adding image loading spinner support to essays and pages.
  • Added setting to control visibility of album link on content page.
  • Column sizing touchups for mobile portrait view.

Version 2.1.3 Released 3 years ago

  • Added 'read more' link support to essays.
  • Added error.lens template for 404s, etc.
  • Pillar code cleanup.

Version 2.1.2 Released 3 years ago

  • Fixed cover link scroll problem.

Version 2.1.1 Released 3 years ago

  • Resolving Twitter share link issue.
  • Spinner work with cover backgrounds.
  • Mobile layout tweaks.

Version 2.1.0 Released 3 years ago

  • New cover title element for album, set, essay and page templates. Displays a large background image (primary cover for albums and sets, featured image for essays and pages) behind the content title, description and social media links.

Version 2.0.6 Released 3 years ago

  • Settings panel UI work.
  • Dropping text/caption size down a bit.
  • Adding support for new koken:meta tag.
  • Mobile menu fixes on Android.

Version 2.0.5 Released 3 years ago

  • Fixed Twitter album share link in album.lens.

Version 2.0.4 Released 3 years ago

  • Fixed improperly scaled images on mobile devices.
  • Video thumbnail overlays now fade-in after the underlying image loads.
  • Increased the hit area of the mobile menu button for improved interactivity.
  • Fixed mobile menu button long press on some android devices.

Version 2.0.3 Released 3 years ago

  • Splash page fix for issue that could cause slideshow not to load when the content spinner was disabled.

Version 2.0.2 Released 3 years ago

  • Fixed grid layout on iPad iOS 6 and earlier.
  • Tweak to ensure images embedded in essays scale responsively.
  • Added "Nothing" option for the Splash template's slideshow link. Slideshow doesn't receive a hyperlink when set.
  • Simplifying padding by removing a setting that wasn't necessary.
  • Vertical alignment tweaks for custom site title images.
  • Social media buttons now appear in the splash template, if enabled.

Version 2.0.1 Released 3 years ago

  • Resolved settings issue that caused console errors when the "Cool White" style was selected.
  • Resolved content page issue where images were still linked (to themselves) when lightbox links were turned off.

Version 2.0.0 Released 3 years ago

  • Completely rebuilt mosaic grid for improved column balancing and control.
  • New customizable image loading spinner. Color, size speed and more.
  • New lightbox view when grid images are clicked.
  • Splash page template enhanced with additional settings and link options.
  • Titles and captions for content pages, similar to albums.
  • Alternate black theme style added.