This article describes how to create a grid of images that are in full color, or are ghosted gray depending on your access to each item in the grid. We’ll explain the end-goal, and show you how to create a similar effect on your site by walking you through the process.
You’ll see references to “ghosting”. This is the name for the effect of graying out a darker or colored element to show that it is not available. It’s a design pattern that goes back many years.
This technique is not limited to grayscaling images. You can do this with images or text, and you can apply other CSS filter effects, or even use multiple images.
The Goal
One of the page design patterns that’s popular is to display a grid of images, with each image representing a different course or module of content.
For each module, the image is displayed in color if the visitor has access, and grayed out if the visitor doesn’t have access. If the visitor has access, the colored image links to the content, if the visitor doesn’t have access, then the image either isn’t linked, or links to a sales page so that the visitor can either upgrade their access or purchase the content.
We can accomplish this effect fairly easily using Memberium, but to style the image blocks the way you want you’ll need to be familiar with HTML and CSS. If you’re not comfortable with CSS and HTML, we’d recommend hiring someone who can help.
For this project we’re going to use some of the more advanced Memberium features, as well as CSS and HTML.
CSS and HTML Curves Ahead
Hidden not Ghosted
If you want to hide your blocks instead of ghosting them, you’ll follow more or less the same pattern, you just won’t have a ghosted block. Another thing to watch out for with hidden blocks is to NOT put each block into it’s own box when using Visual Composer or themes like Divi. These will leave a big blank spot where the empty block is. You’ll want to create one large area and put all your blocks into that one large area.
Memberium Tools
The tools we’ll use to do this are simple but powerful features of Memberium:
We use [memb_can_view_post] here instead of the less powerful [memb_has_any_tag] or [memb_has_memberships]. [memb_can_view_post] actually fully tests for access to a page or post, while the other shortcodes are more simple tests that don’t take everything into account.
The Example Project
For visual effects like this it’s helpful to have a real-world example to demonstrate the effect. For this project, I’m using a course grid that I built for Jacki McLenaghan at PurePotentials.com. The course grid looks like this:
And here’s the same grid with access to some items, but not others. You can see that some blocks are ghosted, and one is in full color:
Like any project, the first step is to break the bigger project into smaller pieces. In this case we’ll break the grid down into individual blocks, which we’ll create a template for. Here’s an example block that we wanted to create:
Each block is a simple HTML <div> tag containing an image, some text, and a CSS button.
You can use the super useful, and free service Best CSS Button Generator to create buttons for your pages that are attractive and match your color scheme.
Mocking Up a Single Block
The second step is to mock up the basic HTML and CSS for the block. In this case I’ve made design decisions for this project. You can change the width, height, margins, padding and colors to suit your visual goals.
<div style="display: inline-block; width: 300px; margin-right: 20px; margin-bottom: 20px; height: 300px; vertical-align: top; border: 2px ridge #777;"><a href="/link-to-page/"><img src="/image-url/" width="300" height="190" /></a> <div style="height: 50px; margin: 5px 5px 5px 5px; text-align: center;">This is the description</div> <center> <a class="startButton" href="/link-to-page/">Start</a></center></div>
For your project, we’d encourage you to put your own spin on this model and do what works best for your layout.
Ideally you would use CSS classes, and not inline-styles for your design, but I’m using inline styles here intentionally to make this stand-alone project more human readable. I encourage you to use classes in your implementation. #dontjudge
Creating the Ghosted Version
The ghosted version of this block is going to be almost identical to our mocked up version. The changes will be some additional CSS that converts the image to gray, and different links (or no links at all as you see fit).
Here’s the example HTML for the ghosted version:
<div style="display: inline-block; width: 300px; margin-right: 20px; margin-bottom: 20px; height: 300px; vertical-align: top; border: 2px ridge #777;"> <a href="/sales-page/"><img style="-webkit-filter: grayscale(100%); filter: grayscale(100%);" src="/image-url/" width="300" height="190" /></a> <div style="height: 50px; margin: 5px 5px 5px 5px; text-align: center;">This is the description</div> <center><a class="startButton" href="/sales-page/">Learn More</a></center></div>
Combining the Blocks with a Dash of Memberium Brains
To select which block to display, we’ll use the Memberium [memb_can_view_post] shortcode. This shortcode is superior to [memb_has_any_tag] or [memb_has_membership] because it tests to see if the user can access the post in question.
The basic structure of the shortcode looks something like this:
[memb_can_view_post postid=123] Color Block [else_memb_can_view_post] Ghosted Block [/memb_can_view_post]
When we combine this all together we get this:
[memb_can_view_post postid=123] <div style="display: inline-block; width: 300px; margin-right: 20px; margin-bottom: 20px; height: 300px; vertical-align: top; border: 2px ridge #777;"> <a href="/link-to-page/"><img src="/image-url/" width="300" height="190" /></a> <div style="height: 50px; margin: 5px 5px 5px 5px; text-align: center;">This is the description</div> <center><a class="startButton" href="/link-to-page/">Start</a></center></div> [else_memb_can_view_post] <div style="display: inline-block; width: 300px; margin-right: 20px; margin-bottom: 20px; height: 300px; vertical-align: top; border: 2px ridge #777;"> <a href="/sales-page/"><img style="-webkit-filter: grayscale(100%); filter: grayscale(100%);" src="/image-url/" width="300" height="190" /></a> <div style="height: 50px; margin: 5px 5px 5px 5px; text-align: center;">This is the description</div> <center><a class="startButton" href="/sales-page/">Learn More</a></center></div> [/memb_can_view_post]
You Have GOT to Be Kidding?!
Whew! That’s a big mess of code and a lot to paste and edit every time you want to put a block up, or modify your grid! Fortunately, there’s a way to make a custom shortcode that makes this simpler to create and maintain.
Custom Shortcodes to the Rescue
What we can do (and what I did for this project) was to use Memberium’s Custom Shortcode system to create a re-usable block that could be easily managed.
The first step is to create a new custom shortcode, let’s call it menublock, the custom shortcode would look like this:
[membc_menublock]
Next, we’ll modify our HTML and shortcodes so that we can use parameters with the Custom Shortcode, so that each block will have it’s own image and links. For each part of the block where we need to use a different value, we’ll use a Custom Shortcode attribute. These look like this: {{atts:name}} where name is the name of the parameter we’ll use.
The other benefit of this is that if we decide to change the block design or improve our code, we can make one change in one place, and every block will be updated. All without getting our hands dirty in PHP code!
[memb_can_view_post postid={{atts:postid}}]
<div style="display: inline-block; width: 300px; margin-right: 20px; margin-bottom: 20px; height: 300px; vertical-align: top; border: 2px ridge #777;">
<a href="{{atts:pageurl}}"><img src="{{atts:img}}" width="300" height="190" /></a>
<div style="height: 50px; margin: 5px 5px 5px 5px; text-align: center;">{{atts:desc}}</div>
<center><a class="startButton" href="{{atts:pageurl}}">Start</a></center></div>
[else_memb_can_view_post]
<div style="display: inline-block; width: 300px; margin-right: 20px; margin-bottom: 20px; height: 300px; vertical-align: top; border: 2px ridge #777;">
<a href="{{atts:salesurl}}"><img style="-webkit-filter: grayscale(100%); filter: grayscale(100%);" src="{{atts:img}}" width="300" height="190" /></a>
<div style="height: 50px; margin: 5px 5px 5px 5px; text-align: center;">{{atts:desc}}</div>
<center><a class="startButton" href="{{atts:salesurl}}">Learn More</a></center></div>
[/memb_can_view_post]
Once we have this created now we can substitute different values for the attributes. The attributes we’ve created are:
- postid – The ID# of the post or page we’re linking to
- desc – The description text to appear under the image
- img – A link to the color image for this block
- pageurl – The URL of the page we’re linking to
- salesurl – The URL of the sales page if they don’t have access
To use the parameters in the custom shortcode, we’ll use it like this:
[membc_menublock postid=123 desc="Learn how to craft your clear message" img="/wp-content/uploads/2016/04/clear-message.jpg" pageurl="/course-crafting-a-clear-message/" salesurl="/order/crafting-a-clear-message/"]
To create a grid of these we’ll just place one custom shortcode after another so that the blocks all line up next to each other.
References
CSS3 Filter Properties
[memb_can_view_post]
Custom Shortcodes
