Check your version

This video covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

Creating Different Versions of the Same Page (variants)

Video loading...

  • 0:05
    Hello, and welcome back to Drupal and Panels.
  • 0:08
    Now we're going to talk about how you can create several different versions
  • 0:11
    of the same page, using the Variant system in 'Page Manager'.
  • 0:14
    In this case, we have the homepage of our website
  • 0:17
    that's currently showing a two-column layout.
  • 0:19
    On the right-hand side, we're always showing people an article.
  • 0:22
    But on the left-hand side, you get different content if you're logged in,
  • 0:25
    than if you're logged out of the website.
  • 0:28
    If you're logged in, you can see an Advanced Search at the top of the page,
  • 0:31
    followed by a list of who's online at the bottom.
  • 0:33
    But if you're logged out, all you'd see here was an advertisement.
  • 0:36
    Well let's say that our designer came up to us and explained that
  • 0:39
    the advertisers really wanted that ad to hit our entire audience,
  • 0:43
    not just people who are logged out.
  • 0:44
    And so she's come up with a new layout for us to implement,
  • 0:47
    for people who are logged in.
  • 0:49
    This layout has three columns;
  • 0:51
    and we now need to put the advertisement on the right,
  • 0:54
    the article in the centre, and the additional content of the Search box
  • 0:57
    and the list of who's online in the left.
  • 0:59
    But, she still wants for logged out users to use the previous two-column layout,
  • 1:04
    with the article on the right, and the advertisement on the left.
  • 1:07
    So now we need to find a way to make the same page
  • 1:09
    show two different layouts under different circumstances.
  • 1:12
    This would be pretty tricky using the Drupal theme system in blocks
  • 1:16
    but it's very straightforward in Panels.
  • 1:18
    We're going to start by modifying our existing panel.
  • 1:23
    We use the 'Contextual Administration' link on the the top-right
  • 1:26
    to edit the panel, and this pops us into the 'Content' section of the 'Page Manager' interface.
  • 1:31
    From this interface, we can look at this wireframe and tell that
  • 1:34
    this is definitely a two-column layout.
  • 1:37
    But we can also look on the left-hand side, and see that we have one variant,
  • 1:40
    named ;Panel'.
  • 1:42
    That's not a very useful name, especially if we're going to be
  • 1:44
    adding additional variants that are also Panels.
  • 1:48
    So I usually start by re-naming my variants to something that
  • 1:51
    more closely matches what they're actually going to be doing.
  • 1:54
    Since our two-coloum layout is going to be used for anonymous users,
  • 1:58
    let's re-name this variant; 'Anonymous'.
  • 2:00
    Variants can be re-named under the 'General' section.
  • 2:04
    Here, you can see that the Administrative title of our variant is 'Panel'.
  • 2:08
    We're going to change this to 'Anonymous'.
  • 2:13
    We're going to leave everything else the same, and click 'Update and save',
  • 2:17
    and now on the left-hand side of the page, you can see the variant has been re-named 'Anonymous'.
  • 2:22
    Now we're ready to go ahead and add a new variant for authenticated users.
  • 2:26
    We're going to use a Wizard, and we're going to start that Wizard by clicking the 'Add variant' link, top-right.
  • 2:32
    Clicking this link will first ask us for the name of our new variant.
  • 2:36
    We're going to call this one 'Authenticated'.
  • 2:43
    It'll ask us what type of variant we want;
  • 2:45
    for now we're just going to use 'Panel'.
  • 2:47
    We'll talk more later about different types of variants.
  • 2:50
    It'll also ask us if we'd like to add any optional features, like:
  • 2:53
    selection rules. We definitely want to add a selection rule
  • 2:56
    because this will help us determine when our new variant will be used
  • 3:01
    and will be shown to people.
  • 3:03
    We're going to click 'Create variant' here to start off the Wizard,
  • 3:06
    and you'll see that the first step of this Wizard will ask us to configure those selection rules.
  • 3:12
    These work a lot like the 'Visability' settings we added to our individual content panes.
  • 3:16
    So we're going to add one here for 'User role'.
  • 3:20
    We're going to decide that our current user, the one that's looking at the page,
  • 3:24
    needs to be authenticated, and that's how we decide when this variant should be shown to that user.
  • 3:30
    We'll click 'Save' and continue on to the next step.
  • 3:34
    The second part of the Wizard asks us to choose a layout for our new variant.
  • 3:38
    So, here we're going to choose a three-column layout, instead of two.
  • 3:41
    We'll pick a fairly simple one, and click 'Continue'.
  • 3:46
    The next section asks us to choose the panel settings.
  • 3:49
    So, here again is an interface where we can define our Administrative title for our variant.
  • 3:54
    This is where we also get the option to disable the Drupal blocks in regions provided by our theme,
  • 3:59
    and here we can also choose to change the 'Renderer'.
  • 4:01
    So, if you have a page where you think your administrators would like control over that content,
  • 4:06
    for example, here; this is our front page,
  • 4:09
    you might want to change the 'Renderer' to the in-place editor
  • 4:11
    to make their experience doing that a little more straightforward.
  • 4:15
    Now we'll click 'Continue', and now we've gotten to the 'Panel Content' part of the Wizard.
  • 4:21
    Here, we're going to first remove the title because our previous homepage did not have a title.
  • 4:26
    And then we'll need to add the content to each section of the page.
  • 4:30
    On the right-hand side, we're going to add the advertisement,
  • 4:32
    which is in a group called 'Custom blocks', and it's a block called 'Ad'.
  • 4:37
    We'll just drop that one straight in.
  • 4:39
    In the centre column, we want to add that article.
  • 4:41
    That article was an 'Existing node',
  • 4:44
    its title started with 'D', I believe it was this one.
  • 4:49
    We'll link the node title to the node, leave the links to read more,
  • 4:53
    and set the 'Build mode' to 'Teaser'.
  • 4:58
    Now, on the left-hand side we'll add on additional information.
  • 5:02
    The first thing was a widget for the Advanced Search form.
  • 5:06
    We'll leave all those options as 'Default' and drop them in.
  • 5:09
    The second thing we wanted to add was a list of all the currently online users,
  • 5:12
    which is shown under the 'Activity' category called 'Who's online'.
  • 5:18
    Drop that one in too.
  • 5:20
    So now we have all of our content in place. So we need to create the variant.
  • 5:24
    After we click that 'Create variant' button, you'll notice that on the left-hand side we now have a variant here for 'Anonymous',
  • 5:30
    as well as one for 'Authenticated'.
  • 5:33
    If you look at the 'Content' tab for the authenticated variant,
  • 5:36
    you can see we're definitely in a three-column layout.
  • 5:39
    And if you look at the 'Anonymous' 'Content' tab you can definitely see that that is a two-column layout.
  • 5:45
    So before we do anything else, we need to update and save.
  • 5:49
    Now, you might think that since we've added an 'Authenticated' variant for the homepage
  • 5:54
    since we're logged in, and authenticated, that if we were to go to look at our homepage right now
  • 5:58
    you'd see that three-column layout.
  • 6:01
    Unfortunately, you'd be mistaken and this is a really common mistake to make when using variants, with Panels.
  • 6:08
    It's really important to get the order of theses variants correct.
  • 6:12
    You want the 'Authenticated' variant, which is more specific
  • 6:15
    to be listed before the 'Anonymous' variant,
  • 6:19
    and the reason for that is because these variants are all executed in a series of statements.
  • 6:26
    So if the first variant should pass, the second variant is never even looked at,
  • 6:30
    and as it turns out in this case, we have not added any selection criteria to our 'Anonymous' variant.
  • 6:37
    And if you look carefully at the 'Selection rules' tab,
  • 6:39
    it says here that with no selection criteria, that test will always pass.
  • 6:44
    So if you have a variant with no selection rules at the top of your list of variants
  • 6:49
    none of your other variants will ever be displayed.
  • 6:52
    So it's really important to re-arrange these so that your tests with selection rules happen first.
  • 6:59
    They need to come before the variants with no selection criteria.
  • 7:02
    So in order to re-order your variants, there's a link at the top-right, here, called 'Reorder variants'.
  • 7:08
    We'll click on that link and you get a little drag-and-drop interface where you can grab your 'Authenticated' variant
  • 7:13
    and move it above, in the list, your 'Anonymous' variant.
  • 7:18
    If we click 'Update and save' you can see on the left-hand side
  • 7:21
    that those changes have become permanent.
  • 7:24
    And now, you can see your 'Authenticated' variant, with its selection rules
  • 7:28
    is listed before the 'Anonymous' variant with no selection criteria.
  • 7:33
    So if we now go back to the homepage, you'll see the three-column layout.
  • 7:38
    It's also really important to make sure that the 'Anonymous' variant is working.
  • 7:42
    So, in order to test that, we'll go ahead and log out.
  • 7:45
    We're expecting to see the two-column layout with the advertisement on the left.
  • 7:50
    And there it is.
  • 7:52
    Stay tuned, and we'll go through another way to create a variant that's even easier than the one we just saw.

Creating Different Versions of the Same Page (variants)


Panels and the Page manager module allow you to create different versions of the same page (called variants) under different circumstances. In this lesson you will learn how to build two different versions of the content on your home page. People who are logged in to your site will see a different home page than people who are not.

Additional resources:
There are no resources for this video. If you believe there should be, please contact us.