How to Ghost an Image Block Based on Visitor Access

David Bullock — 

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

For this project we’re going to use some of the more advanced Memberium features, as well as CSS and HTML.

WARNING
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:

Pro Tip
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:

purepotentials-course-grid

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:

purepotential-course-grid-ghosting

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:

purepotentials-course-block

Each block is a simple HTML <div> tag containing an image, some text, and a CSS button.

Pro Tip
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.

For your project, we’d encourage you to put your own spin on this model and do what works best for your layout.

Pro Tip
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:

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:

When we combine this all together we get this:

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:

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!

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:

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

Memberium Membership Site Workshop
October 10th-12th, 2018 in Phoenix, Arizona

Get your Memberium site and Infusionsoft app fully implemented in 3 days. Save $100 OFF your ticket until the end of this Monday, September 24th!

Click Here to Learn More and Reserve Your Seat