Dixie Design and Build is a website designed by Webinology Business Analyst/Developer Diedra for her husband Mike. Mike has been designing houses for as long as Diedra has been developing software (almost 40 years!). Until this site, the standard practice was for clients to sit in his front lobby, paging through hard-copy catalogs with a page for each of his several hundred house plans in stock, looking for the perfect plan. The goal of the site is to make it easier for clients to find the plan they want.
First Widget: Gallery
To meet this goal, the original focus of the site in 2018 was on “Galleries” of small/medium/large houses. Each plan is a WordPress Custom Post Type (CPT), created using the Pods plugin. An Elementor Posts widget builds the Gallery page based on a query of the size Category. An Elementor single-page Template associated with the CPT handles the display of a single Plan/post. The MDTF Metadata & Taxonomies Filter plugin allows a detailed Search across the custom metadata fields: number of bedrooms, bathrooms, stories, etc.
This design has several good features:
- Adding a new Plan automatically adds to the correct Gallery page without the need to actually update the page.
- All Plans display in a consistent format due to the template.
- The Search can be as flexible and as granular as desired.
However, there are some drawbacks:
- Mike, as the client, has to provide some time-consuming content for each Plan: a photograph (usually edited with Photoshop to remove extraneous objects and blur identifying details), a written description, and several custom metadata fields.
- Newly-drawn plans don’t fit the pattern because they have not yet been built; no photograph is available.
- In general, finding the completed house and obtaining a good-quality photograph is difficult enough to keep many good plans from being featured on the site.
Second Widget: Catalog
To address these weaknesses, a new design element was added to the site in 2020: “Catalog” pages. These pages use an Elementor add-on widget, Premium Media Grid, to display multiple images that match the original hard-copy catalogs. Mike already had electronic files in his CAD application that had been printed to create the original pages. He stored each of them as a .jpeg image, and then uploaded them all to the WordPress Media Library.
The advantages to the new Catalog over the original Gallery include:
- Much less effort to gather the information for a given house plan: The hard-copy page is being built anyway, so storing an image version is quick and easy.
- A plan can go into the Catalog as soon as it is completed. There is no need to wait until an as-built photograph can be obtained.
- There were almost 400 existing catalog pages already available, as opposed to the 100 or so Gallery plans that had been entered over a two-year span. This makes the site much more complete.
- The Premium Media Grid’s “filter” feature allows more control over the house-size selection. Instead of simply small/medium/large, the site visitor can quickly narrow their view to a 100-200 square foot window.
The new Catalog does have disadvantages also, however:
- The MDTF metadata search does not reach the Catalog plans. They are simply images on a single page, rather than multiple posts with metadata available to be searched.
- Adding a new plan to the Catalog is a true update of the actual page on the site. As more plans are added to the same page, there is risk of the editing becoming too cumbersome.
- For instance, originally all plans were going to be on a single Catalog page. After the first 150 or so, it was decided to separate into small/medium/large both to match the Gallery design and to reduce the overhead on a single page.
- Selecting a thumbnail goes only to a lightbox of the same image, rather than to a detail description page.
If you are deciding how to show multiple “items” of any type on your website, consider these trade-offs between the simplicity of entry (Catalog) vs. power and flexibility (Gallery). If you don’t have time to maintain custom post types and metadata, or don’t need the power they provide, then the simpler Media Grid with a filter may serve your purpose.