Tiling SPLOTs the Easy Way; Maybe Soon Everything Else

Tiled surfaces are classy. And after doing one the method is learned quickly.

Without knowing I was looking for it I found a seriously awesome WordPress plugin that I can see making a lot of use of. The first was a quick way to add a feature to a prototype SPLOT.

Okay, so I am working with my colleagues with whom I got to do two years of maybe the best faculty development project I’ve been part of, the UDG Agora project at the University of Guadalajara. We were invited back for a project that will invite more than 100 participants back for a higher level series of activities on open education and practices/pedagogy, etc.

In my project meetings I start to feel like a broken record as often I can see a use for something from DS106 (an assignment bank or a daily challenge) or from the pile of SPLOTs.

In this new project we will have a lot of hands on activities where we want people to report their research, creation, etc. We’ve already done a Challenge Bank for the project. At first it seemed like it would be enough to create pages for the activity instructions and participants could respond as simple comments.

But then it arose that we might want a way for people to create connections between responses, or organize them by the themes we are introducing. So then my SPLOT neurons kicked in; the participants already had experience using the TRU Writer one for submitting their final reports via a site called Comparte.

That would work, but these would generally be smaller responses. My mind then went to my experiments of adding the rich text editor to the SPLOTs and I thought that having added it for the TRU Collector could work.

More SPLOT tinkering. TRU Collector now has option to enable a rich text editor (or keep plain text one).

To get this https://t.co/10vKsaxdO1 pic.twitter.com/cSivgHLhau

— Alan Levine (@cogdog) January 19, 2018

This way they could just have an image to represent their work, and then use the rich text editor to compose the contents we’d be asking them to describe their submission. As I was mentioning this, I was seeing in my mind the metaphor of murals we plan on using for the project, and speculated about making some kind of mural/collage from the featured images in the SPLOT.

The parent theme it works from does this to some degree:

Maybe just some kind of archive template that would display a larger number, chosen at random.

But I wondered then if maybe there was a plugin to do this via a shortcode rather than mucking with the theme

There is, and it’s rather amazing to think what else I can do in WordPress sites with the WP-Tiles plugin. Because in a short dab of time, I had a page that generated a mosaic of featured images all linked to the posts (and provide a hover preview of the title and excerpt). Reload it and everything shuffles.

What is even more cool is that it’s generated just from a shortcode

[wp-tiles 
     grids="Mobile" small_screen_grid="Mobile" 
     breakpoint="500" padding="5" pagination="ajax" 
     post_type="post" orderby="rand" ]

The options you can pass it are ones you can use in wp_query meaning you can request for different content types (posts, pages, customs), filter by tag, category, specify the order (in case I am using the random option).

But what is even better is that you can designate almost any kind of layout, arrangement of grids, by a system of letters and dots.

The tile grid editor. Fancy is very very fancy!

It took some time to sort through how this works. Because the content column of the Fukawasa theme is not very wide (~620px on my MacBook Pro), after playing with the fancier ones, I opted for the simpler Mobile grid.

Here is another nifty part of the plugin, the parameters for grids is the typical one used (you can list multiple), and the breakpoint value is the screen width where it switches to the small_screen_grid layout. It worked better just to use that one for all views.

The Mobile grid that comes with it was simple, a full width image and two half sized. That is the formula:

A A
. .

so you only get three images. More are added in the pattern via the ajax loading option. But then my lightbulb went on… make the grid longer:

A A
. .
B B
B B
. .
. .
D D
C C
C C

This is 10 images (A,B,C, D, and 6 small square ones). It works great IMHO.

But there are so many other things you can with this. You can generate a grid archive of posts based on categories, tags. The plugin provides options to use only Featured images, or to scan the posts for embedded ones if none provided. There are different options for the overlays. And much more.

This could go in a widget area too, and the layouts are all responsive.

I could be tiling all kinds of places in my sites. But what I like is this is a way to get the effect I was after without doing any coding.

And it looks pretty.

Win.

Featured Image: US Navy 051224-N-4374S-002 Builder 3rd Class Jonathan Martinez, assigned to Naval Mobile Construction Battalion Three (NMCB-3), applies a ceramic floor tile during the restoration project at the Providence Hall in St. Elisabet a Wikimedia Commons image placed into the public domain as a US Government work.