Moving to a new community (part 4)

In my last post, I demonstrated how easy it is to install a community site from Reclaim Hosting’s template, and how to use the Gravity Form it comes with to start populating your community site with student, faculty, and staff work. I’ll return to Gravity Forms in a future post, and show how to modify the existing form a little bit.

Now, I’d like to take a step back and go into some detail about The Post Grid and how to configure this important WordPress plugin. It, along with some settings in the NEVE WordPress theme, will control a lot of the look and behavior of your community site.

If you’d just like to see how I’ve configured The Post Grid for Muhlenberg’s community site, you can skip to that section of this post.

Last week I really started working with the different components of the Community Site template.  In addition to the WordPress installation, this template brings in:

The NEVE theme.  I expect other themes that employ a masonry or grid approach could work well, and there are a ton of them out there. I’m sticking with the NEVE theme because it’s clean and it has some nice customization options.  I may write a short post about this theme for my own memory dump or to aid other folks working with it. But for now I’ve kept my site mostly as it comes when installing the Reclaim Hosting template.  I just changed the navigation menus a little bit.

The Gravity Forms plugin.  This is used for submission of web sites to the community site and generating a WordPress post from the form. There is a lot that has been written about Gravity Forms elsewhere, so I’m not sure what information would be helpful here.  I made small changes to the submission form as it exists when you initially install the community template.  Specifically, I made the website author field optional instead of required.  I want to really consider what to capture with this form, and I’ll carefully work through that later.  For now, this is working great.

The Post Grid plugin. Not to be confused with the Post Grid plugin. When searching, put “The Post Grid” in quotes to help arrive at the right one.  If there is no mention of Isotope in the plugin’s description, you have the wrong thing. The correct plugin comes pre-installed with the community template, so you may not need to locate this plugin at all.  But if  you’re trying to access the documentation, or if you would like to use this plugin on a different WordPress site, please know there are two similarly named plugins and “The Post Grid” is the one you’ll want.  

For me, bringing Isotope so easily into WordPress is a real breakthrough!  In a nutshell, Isotope is a reusable layout library that handles sorting, filtering, pagination, and light searching. As long as your projects are non-commercial and open-source, Isotope is openly and freely available.  And it does stuff like this:

Screen recording of the Isotope JavaScript library sorting and reordering elements from the Periodic Table of the Elements

As I mentioned in a previous post, I used the Isotope library when I built a community site from scratch.  Isotope makes it easy to do a bunch of stuff on a website with items that are presented as tiles.  These items, in our case, are WordPress posts.  These are the “posts” of The Post Grid.  But the items could be thumbnails that link to merchandise, or to photographs in a photo gallery, or to real estate listings.  There are so many occasions when we might want to display and arrange and especially sort different curated stuff.  

So, imagine a bunch of tiles representing things, arranged in rows. These things are described within HTML tags or elsewhere by qualities or characteristics that can group them together, or split them apart. 

<div class="animal feline tiger orange white black stripe" data-id="205"><img src="tiger.jpg" /></div>
<div class="animal canine wolf white gray black solid" data-id="206"><img src="wolf.jpg" /></div>
<div class="insect arachnid spider black brown" data-id="207"><img src="spider.jpg" /></div>

An item’s characteristics define the sorting that is applied via JavaScript and CSS when a visitor interacts with the website, or parts of the website. This interaction usually happens by clicking on buttons or links, and then a little animation will redraw and rearrange tiles.  In the example above, if I click on the Animal button, I’ll get the Wolf and Tiger tiles, but not the Spider tile. Similarly, if I click on the Black tile, I’ll get all three records listed in the pseudocode example above.

In my previous community site, I merged my muhlenberginstalls.json file with a hand-built google sheet containing a column for categories like blog, portfolio, and exhibit and another column for contributors (student, faculty, staff).  PHP makes it possible to sort arrays and to decode and encode JSON, and then ultimately put stuff into files using the file_put_contents function.  But it can be a lot of work to write the loops necessary to parse arrays, especially when you’re a crappy coder like me. Also, small syntax errors can break the whole thing, and humans aren’t great at avoiding typos and such.

The Post Grid makes this so simple I just want to grab a tambourine and shake it.  By assigning categories to posts in WordPress, the classification becomes trivial, and there is very little possibility for human error.  I mean, it’s just so easy and great.

The Post Grid gives me a graphical user interface for setting up Isotope just the way I want, and then establishing the categories that will sort my posts (in this case, websites included in the community).  There is only one small downside to using The Post Grid as compared to my hand-built site. Previously, I built my community site to support multifaceted sorting.  In other words, I could sort by the type of website featured (blog, portfolio, exhibit) AND by the type of contributor (student, staff, faculty).  

The Post Grid does not support, at this time, sorting on more than one characteristic of a record.  This is due, I suspect, to it pulling post categories from WordPress.  I thought it might be possible for The Post Grid to use WordPress categories for one order of sort, and WordPress tags for a second order of sort.  I started looking into hacking either The Post Grid plugin, or my site through supplemental JavaScript.  It’s totally possible, but I think it’s counter-productive.  

First, I’m not sure my website visitors really care to interact with the community site in this way.  I like sorting by faculty, staff, and student because I have a fairly specialized set of needs.  But I don’t think multifaceted sorting is something most folks here need or want.  I also think heavy customization of the underlying code might run counter to a broader desire to standardize and simplify the launching of community sites across DoOO institutions.  Multifaceted sorting is not a high priority for me, and there are ways to do something acceptably similar that I’ll mention later.

So here is how I’ve configured The Post Grid to get pretty close to the same setup I had previously at https://community.bergbuilds.domains.  I’ve manually added about a dozen sites as I work to understand things.  I decided to purchase the pro version of The Post Grid as a lifetime license.  It’s pretty affordable and I want to have all the supported features, but I think I could build a respectable community site that only uses the free version of the plugin.  If you see configurations that don’t match your installation of the community site template, it’s likely because I’m using the paid version of the plugin.

My Configuration of The Post Grid

Here is what I see when I initially click on the The Post Grid option on the left of my WordPress dashboard.  I only have one grid configured presently, and I’ve named it “websites selected grid”.

When I bring up the Short Code Generator for the specific grid I’ve built (which I’ve called “Websites Selected Grid”), I see five tabs:  Query Build, Layout Settings, Settings, Field Selection, and  Style.  I’ll first just record how I have my site configured, and where things get interesting, I’ll talk a bit about the settings below.

Query Build

Post Type = Post

Common Filters (leave all fields blank)

Advanced Filters = [X] taxonomy [X] categories

Terms

Category (leave blank)

Operator = IN

Order

Order By = random

Order – Ascending

[ ] Author

[X] Status = Publish

[X] Search

[ ]  Date range

Show Sticky Post = off

Layout Settings

Here, I selected the Isotope layout and Isotope Layout 1

Isotope Filter = Categories

Isotope Filter (selected items) = Show All

Dropdown Filter = off

Isotope File Count # = on

Isotope Filter URL = on

Column = 4 | 4 | 1

Pagination = on

Display per page = 16

Link to detail page = on

Detail page link type = new page

Link target = new window

Not Found Text = [leave this blank]

Grid Style = even

Content will be visible for = [leave this blank]

Set a default preview image = see below

Settings

Shortcode heading = off

Category

Position = default

Style = Style3  (but I’m not totally clear what this does)

Icon = off

Title

Position = below image

Title tag = H4

Title Limit = [leave blank]

Title Limit Type = character

Meta

Position = default

Icon = off

Separator = default (which is a comma)

Image

Hide Featured Image = off

Featured Image Size = large

Media Source = featured image

Type = normal

Hover animation = zoom in

Border radius = [leave blank]

Feature Image Size (small) = thumbnail

Excerpt

(turned off)

Read More Button

Border radius = 3

Alignment = center

Text = More

Field Selection

This determines what displays on each record’s tile. If you select a field, the label will display whether there is data contained in that field or not (one of my web development pet peeves!). For that reason, if a field is optional on my form (e.g., Author), I have chosen to not display it in the tile. I have selected the following fields by checking their checkboxes:

Title

Read More

Categories

Tags

Style

This tab permits the configuration of colors, padding, margins, and opacity for various aspects of The Post Grid’s Isotope grid without having to manually edit CSS.  I chose custom styling for:

Buttons

Title 

Title Hover

Meta Data

everything else I left the defaults untouched.

These settings all pertain to the particular grid I’ve built, again called “Websites Selected Grid”.  It is possible to have different styling for different grids you create. For more information about the Style tab, I recommend visiting the plugin developer’s documentation, which in this case isn’t too bad.

Other Settings (don’t pertain to any particular grid)

There are other universal settings which can be found by clicking on the additional links within the The Post Grid submenu of the WordPress dashboard

These are:

Taxonomy Order

Post Type:  Post (the other option is Page)

Select Taxonomy:  Categories (the other options are Tags or Status (i.e., Draft, Published).

Once these options are set, you can arrange the order of category buttons for this grid by dragging and dropping, exactly as you would menu items in WordPress.  There is no “Save” button; changes are recorded automatically.

Settings

Next is a collection of universal The Post Grid settings that will apply to all grids you create.  There are five tabs.  The last, Plugin License, is where you enter your license key once the Pro version of The Post Grid has been purchased.  I’ll focus on the other four tabs below.

PopUp Field Selection

I have these set to more or less conform to the Field Selection settings above. These will appear on the interstitial page that appears when you click on a post’s thumbnail. This Pop Up page will then take you on to the actual website featured in the Community Site. I would like there to be a way to

Social Share

I left these blank.  Checking a checkbox will display a social media icon (a font-awesome brand icon) for the corresponding social media platform.

Custom Script

I am not presently making use of any custom JavaScript, but I likely will in the future. I’d still like to try to load a secondary facet for Student/Faculty/Staff, for instance. Also, I may attempt to not load a field label if the value is null.  There are three areas of the page where you can load some custom JavaScript:  Before Item Load, After Item Load, and After Loaded Script.

Other Settings

Load Script Only Shortcode Page – I have this set to OFF, but I’ll confess I’m not entirely sure what this toggle is referencing, and the documentation doesn’t specify.

Disable Font Awesome Script – I also have chosen to turn this OFF.  This refers to the Font Awesome icons that load with each item beside the WordPress Category and WordPress Tag associated with the item.  The default Font Awesome icons are an open File Folder for WordPress Categories and a tie tag (like a luggage tag) for WordPress Tags.  I searched all through the code for the specific place where these fa calls are made within the HTML and I couldn’t find it.  I’m not wild about the Font Awesome icons so I’ve turned this off for now.  I’ve made a note to eventually track down the references and change them for other icons, or to write a JavaScript to swap the icons on pageload. Here is what they look like (unless you turn them off):

I have no idea what the rest of these options control, so please let me know in the comments of this post if you have any idea what they control or whatever. There are no layouts in these dropdowns by default, and I’m unclear where to build them so that they might display as selections.

Note: Unlike other areas of The Post Grid, you will need to click the Save Changes button when finished. I’ve found that changes I’ve set (in particular, turning off those Font Awesome icons) don’t stick around forever. For whatever reason, I sometimes have to go back into this area of The Post Grid’s settings and flip them off again.

A Few Departing Thoughts

So that is a full rundown of my current The Post Grid configurations for my community site. There are a few settings in this list that warrant some explanation.  I marked them above with footnotes that link to the explanations below.

# order by = random – I really like the idea of randomizing the location of tiles on my community site, so as to not give preferential location to any one site. However, this also presents some usability challenges for any visitor who may want to reference something where it was during a previous visit. This is a longstanding usability tradeoff, but since student work is involved, I’ve decided to err in the direction of randomized content.

# Isotope Filter Count = on – this is, in my opinion, actually really useful information. There are parenthetic counts on the tab for each category that help me and hopefully other folks consider how may Travel & Languages sites there are, for example. I think this is important data for me as I assess the parts of my campus making use of Berg Builds, and I can imagine that this might be helpful information for students and faculty as they consider themselves and their work in relation to the broader Berg Builds community.

# column arrangement – I chose to have a 4 x 4 grid of tiles on my community site homepage. Column arrangement options, and masonry layouts, will permit you do mix things up. This might be something to explore if you are building an exhibit site, as opposed to a community site.

# pagination – this is a great improvement over my previous version of the Berg Builds community site. I expect we will have a few hundred sites or more selected by the time my next community site is fully launched. That’s a lot to navigate, and pagination with forward and backward directional links will really help folks browse and explore.

#  grid style = even – again, I chose to have a regularized grid of content, but I can imagine other uses of the community site template that might want to explore changing this setting

# set a default preview image – I hope to eventually script-generate page thumbnails using NodeJS and a headless browser called Puppeteer.  I have selected a default preview image in case these script-generated thumbnails fail, or on the chance that I forget to attach a manually produced thumbnail image when I complete the “Submit a Site” form.  I think it a good practice to have a default preview image.

Conclusion

There is a lot of stuff about The Post Grid that is tremendously useful, but there are clearly things that are either unfinished or a bit buggy in this plugin. I did get a quick response from the project developers, but I would recommend reaching out to them through the Radius Theme contact form as opposed to the forum on the WordPress Plugin site. As I mentioned, I haven’t done a sufficient dive into the code, and some of it is likely beyond my ability to improve properly. But I think some fairly simple JavaScript trickery could allow me to get the Isotope behavior a bit more to my liking. At the moment, I have three things I’d really like to do:

1. If there is no data, don’t display the label, just insert a line break in the HTML
2. Swap out the Font Awesome icons for ones I like better
3. Make the interstitial (or Pop Up) page optional, or make it go away. I’d be happy if clicking on a post’s tile took you straight to the site.

As always, I’d love to hear if you are also exploring the Community Site template, The Post Grid, or anything else I’m covering in these posts. I’m happy to help if I can, and it would be great to know if others are working through these things, too.