Mason



Theme Overview Back to Top

Mason is a responsive premium theme with full screen image galleries, and multiple page layout configurations and extra features to give your portfolio a bold an beautiful look.

Homepage Setup Back to Top

Mason comes with two separate templates for your homepage, they are labeled: Homepage Slides & Homepage Gallery, in the Page Template dropdown.

Mason's default homepage template (labeled 'Homepage Slides', in the Page Template dropdown) gives you the ability to create multiple "Slides" of content and images. Each slide consists of a background image (uses the Featured Image), as well as optional text or additional content.

The slides are created and edited in the 'Homepage Slides' section of the WordPress sidebar, and for each image/slide that you want to be displayed on the homepage, a new slide must be created in this section.


Creating Slides

You can create a new slide by clicking the Add New Slide** button at the top of the Homepage Slides section, OR by clicking *Add New Slide in the flyout menu that appears when you hover over the Homepage Slides item in the WordPress Sidebar. You can also edit any of your slides from the page shown below, by clicking on the title of your slide.



Once you've clicked the Add New Slide button you'll be presented with a page to edit your slide. This page should look very familiar since as Pages and Posts are edited the same way. There are 3 main components to each slide: The Background Image, The Title, and The Content. The only required item is the Background image, you do not have to use the title or the content, however you Should enter a title for your slide for consistency sake.

The image below shows the various fields and settings for each slide:

  1. The Slide Title - This is displayed in bold on the slide, if turned on.
  2. The Slide Content - You can add any text, images or other content here, just like a normal post or page. However you should refrain from adding lots of text or additional images and keep things to a minimum.
  3. The Featured Image - This is where you set the Background or Main image for the slide.
  4. Slide Order - The order field allows you to arrange your slides in an order you choose. By default each new slide is set to an order of 0. If all slides are left at 0, it will order the slides based on when they were created, from newest (first) to oldest (last).
  5. Slide Options - These two options allow you to control whether the title of the slide is displayed, and how to align the title and content (left, center, or right).

Which Homepage Template Should I Use?

  • Homepage Slides - Use this template if you want the ability to add text or additional images to a 'background' image and only have a few images you want to showcase on your homepage.
  • Homepage Gallery - Use this template if you want to have multiple images in a slideshow on your homepage or want to be able to control how the images are cropped/scaled in the browser.

Pages Setup Back to Top

The main Page template included with Mason has two additional ways to configure images that you want to display on the page. Unlike most of our themes, which only have settings for the Featured Image, Mason adds two additional locations to add images: Above the content (Top Images option), and Aside the Content (Content Images option). The featured image is reserved for the spot above the menu, at the top of the page.

Featured Image - This image will display above the menu, and at the top of the page (highlighted with a red box in the image above). The recommended size for this image is 1200x300, however you may upload an image as wide as 2000px (this applies for all header images throughout your site). The theme will automatically make multiple copies of this image at different sizes and will load an appropriate sized image based on your visitors screen size.

Note: Keep in mind that the larger the image, the more data that has to be downloaded by the visitors browser, which ultimately means: the larger the image, the longer the load times. While we frequently hear from customers and clients that they want their images to look their absolute best, what many forget is that you are likely viewing and judging your site on screens and resolutions far larger than your average visitor will be. This means you should be optimizing your site so that it looks best on your Visitor's screen NOT Your screen.

Top Images - This option allows you to show up to 6 images side by side above the content (highlighted with an orange box in the image above). They will be automatically sized according to the number of images you upload.

Content Images - This option allows you to show up to 6 images stacked vertically to the left or right of your content. The size for these images is dictated by the value you enter in the Content Image sizing option. The default size for this setting is 400x266.

Galleries and Images Back to Top

Mason, for all intents and purposes is a 'Full Screen' theme, and this should be accounted for when choosing appropriate image sizes. As of December 2014, the most common screen resolution for desktops was 1366x768 worldwide, with only a total of roughly 17% of all traffic worldwide having a resolution larger. This means that on average over 80% of visitors to your site will be viewing it at a size of 1366x768 or smaller, and this should definitely be taken into account when choosing image sizes for Mason.

We recommend for most sites using image sizes of 1500x1000 for galleries and featured images in the Mason theme, and for those sites that may have a larger portion of users visiting on higher resolutions/screen sizes, going up to a max size of 2000px on the long edge. The most important factor to consider when choosing an appropriate image size is the actual filesize of the image. All images on a website have to be downloaded by the browser before they can be viewed, so the more images and the larger those images are, the more data that has to be downloaded before the visitor can see them, this simply translates into longer page load times and an inferior experience for your visitors, so always make sure to optimize and resize your images appropriately.

Demo Content Back to Top

While we cannot provide the exact content that is shown on the Mason demo site due to copyright and ownership of the images and content, we have put together demo content using creative commons licensed images using the same page structure as the Mason Demo. You can import this content by uploading the XML file below using the WordPress Import Wizard (Tools->Import). This will give you a good base to start with when creating a new site with Mason. We do not recommend using the demo content if you are using an existing WordPress installation, this should only be used on New WordPress Installations Only.

Once you import the content, you'll want to go into the Theme options panel and click Save so a new options stylesheet is generated. You'll also need to go into each of the imported galleries and click the Update/Publish button. This is because the galleries require a configuration file that is generated when you publish or update the gallery, and these configuration files will not be imported.

MasonDemoContent.xml



Release Notes Back to Top

Version 1.1.7

  • BUG - Fix sizing issue on testimonials template for testimonials with short titles
  • CORE - Update Video pages to allow multiple URL types for vimeo and youtube.

Version 1.1.6

  • CORE - Compatibility fixes for WP 4.0
  • BUG - Address issue with homepage slides on Android 4.0

Version 1.1.5

  • BUG - Fixed issue with fonts not applying correctly in various areas.

Version 1.1.4

  • BUG - Fixed issue with archive/category pages not aligning properly

Version 1.1.3

  • CORE - Compatibility Changes/Tweaks for WP 3.9

Version 1.1.2

  • BUG - Multiple bug fixes for proofing galleries

Version 1.1.1

  • NEW - Add ability to select logo appearance on individual pages
  • CORE - Updates to TinyMCE code in anticipation of WP 3.9
  • CORE - Tweak pinit button script to account for images with no set dimensions

Version 1.1.0

  • NEW - Add ability to upload Retina sized logo
  • BUG - Fix an issue with video pages and video portfolio pages not displaying in the proper format and without the page headers
  • CORE - Header images now load an image size based on current screen size. Images up to 2000px wide can now be used.
  • CORE - Multiple additions and optimizations in the underlying core framework
  • CORE - Upgrade third party javascript libraries

Version 1.0.11

  • CORE - Better sanitation of contact form ID input fields to prevent WP from discarding entries due to unrecognized or improper ID values.
  • CORE - Code tweaks for better compatibility with 3rd party plugins that modify the TinyMCE editor.
  • CORE - Admin Styling Fixes
  • NEW - Upgraded registration and updater code to use the new Rawfolio update and registration system.

Version 1.0.10

  • BUG - Fixed search box javascript issue introduced in 3.8.1 update.

Version 1.0.9

  • BUG - Fix spacing issue with fnav menu icons

Version 1.0.8

  • CORE - Misc Styling adjustments
  • CORE - Sizing adjustments for navigation menu

Version 1.0.7

  • CORE - WP 3.8.1 compatibility update

Version 1.0.6

  • BUG - Fixed issue with gallery thumbnails being hidden when the window was resized if the gallery canvas was set to full and the thumbnails were set to be shown below

Version 1.0.5

  • BUG - Fixed bug with sidebars not populating in the correct position on single post pages.

Version 1.0.4

  • NEW - Add Instagram icon to the available social icons
  • CORE - Tweaks to the core gallery script for better downsizing for devices

Version 1.0.3

  • BUG - Fix issue with galleries not displaying when using 4 columns and screen size is < 1200px

Version 1.0.2

  • NEW - Add Image cropping location feature to select how an image should be cropped.
  • NEW - Added functionality to swap images to a larger/smaller size based on current screen size. Currently affects Testimonials and Portfolio pages.
  • CORE - Added new image resizing class to mitigate WP's image resizing downfalls. All custom/resized images throughout the theme will now use this class. Adds support for watermarking, crop positions, image filters and better handling of images with multiple copies at different sizes and crops.
  • BUG - Fix cropping issue for images.
  • BUG - Fix footer sizing issue that produced scrollbars when width was larger than tablet size but smaller than selected content width

Version 1.0.1

  • BUG - Fix bug with portfolio page not loading the correct gallery portfolio