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.

Quickly Duplicating Variants by Cloning

Video loading...

  • 0:00
    Quickly Duplicating Variants by Cloning
  • 0:02
    Building Websites Using The Panels Module
  • 0:03
    with Jen Lampton
  • 0:04
    Hello, and welcome back to Drupal and Panels.
  • 0:08
    We've just seen how to create several different versions
  • 0:10
    of the same page by using variances in Page Manager.
  • 0:14
    And now we'll walk through an alternate way to create variance.
  • 0:17
    We have here the homepage of our website, which
  • 0:19
    is showing a two-column layout.
  • 0:21
    We've got an Article on the right, and some additional things,
  • 0:24
    like a Search box and a Who's Online listing on the left.
  • 0:29
    If we're logged out, on the left-hand side,
  • 0:31
    instead, you would see an advertisement.
  • 0:33
    What we want to do is create a copy of this variant that instead
  • 0:37
    of having two columns will have three columns,
  • 0:39
    so we can show the advertisement, the search
  • 0:41
    box, and the who's online listing all at the same time.
  • 0:45
    We're going to start by editing our existing
  • 0:47
    panel pane by clicking the Edit Panel link at the top right.
  • 0:52
    And this will drive us right into the Content section
  • 0:54
    of the Page Manager interface.
  • 0:56
    From here, we can see that we have one
  • 0:58
    variant for our panel named Panel.
  • 1:01
    So as usual, we'll start by renaming this variant,
  • 1:03
    something that more closely matches what it's actually going to be.
  • 1:07
    This two-column layout is going to be our anonymous variant.
  • 1:10
    So we'll go ahead and click the General tab to change the name
  • 1:13
    of this variant to Anonymous.
  • 1:16
    We're going to go ahead and update and save, and confirm that the name
  • 1:19
    of that variant became Anonymous.
  • 1:22
    Now you'll notice, if you're editing any part of an existing variant,
  • 1:26
    on the right-hand side we have a set of variant operation links.
  • 1:31
    These will allow us to do stuff like delete variance, export
  • 1:34
    variance, which we'll get to later on, and, in this case,
  • 1:37
    clone variance.
  • 1:39
    So we're going to start here by clicking Clone.
  • 1:41
    And this will basically create a copy of this existing variant.
  • 1:45
    The first thing it will ask for is a new name.
  • 1:48
    We already have a variant called anonymous,
  • 1:50
    this is going to be the variant for Authenticated.
  • 1:53
    By Clicking Update and Save, it creates
  • 1:55
    an exact copy of the Anonymous variant
  • 1:58
    with a new name, Authenticated.
  • 2:00
    So you can see, from looking at the settings
  • 2:01
    here, that we have the Drupal box and regions disabled,
  • 2:05
    and we've chosen the In-place Editor, Renderer.
  • 2:09
    If we check out the content, you'll also
  • 2:11
    notice that we have a two-column layout with all of our content
  • 2:14
    already in place.
  • 2:16
    If you have a really complicated panel with a lot of stuff laid out
  • 2:19
    in a very specific way in one variant,
  • 2:22
    and you want to create a second variant that's very similar,
  • 2:25
    it's often much faster to clone an existing variant than to create
  • 2:28
    a new one using the wizard.
  • 2:30
    In this case, we've got a couple changes
  • 2:32
    to make two are Authenticated variant to differentiate
  • 2:35
    it from the Anonymous one.
  • 2:36
    The first and most important is to change the layout.
  • 2:39
    If you click the Layout link on the left,
  • 2:42
    you'll be able to choose from a new set of layouts.
  • 2:45
    We're going to go to this drop down menu and grab three columns.
  • 2:48
    We're going to choose the three column layout instead of two
  • 2:51
    and click Continue.
  • 2:53
    Panels has a very clever way of figuring out which content was
  • 2:56
    in which region, previously, and asks you where you'd like
  • 2:59
    to move it into your new layout.
  • 3:03
    In this case, we're going to take the custom right side content
  • 3:06
    and drop it into the middle column, because we
  • 3:08
    know that'll be our article.
  • 3:10
    We're going to click Update and Save.
  • 3:12
    And when we go back to the content display,
  • 3:15
    you'll see that our Article is now in the center column,
  • 3:18
    our Search form is in the left, the Who's Online is in the left.
  • 3:21
    We can grab that ad from the left-hand side
  • 3:23
    and drag it to the right.
  • 3:25
    If we Update and Save this, you'll see
  • 3:27
    that was a lot faster than adding all of those pieces of content
  • 3:30
    all over again.
  • 3:32
    But because this is a copy of our previous Anonymous variant,
  • 3:37
    there's some settings associated with each of these content panes
  • 3:40
    that we need to worry about.
  • 3:41
    For example, this Advertisement has some settings on it
  • 3:45
    for visibility rules that make it only
  • 3:47
    visible if the user is anonymous.
  • 3:50
    If we'd like this ad to show up for our authenticated users,
  • 3:53
    we're going to need to remove that rule.
  • 3:56
    To remove a visibility rule, you click on it in the drop down
  • 3:59
    and you click the button at the bottom that says Remove.
  • 4:04
    Now our ad will be able to display for users who are logged in.
  • 4:08
    We'll go ahead and Update and Save this content.
  • 4:11
    But there's also couple of other changes we need to make,
  • 4:13
    before our panel is ready.
  • 4:15
    We also need to apply some selection rules.
  • 4:17
    This will help Panels decide when this variant should be displayed.
  • 4:22
    We're going to have one here for user role.
  • 4:24
    And we want this variant to display when the user is logged in.
  • 4:29
    So that's when the user, looking at the page, is authenticated.
  • 4:35
    We're going to go ahead and Update and Save that change.
  • 4:38
    And now we also need to make sure we get these variants
  • 4:40
    in the correct order.
  • 4:42
    Right now, if someone were to visit our homepage,
  • 4:44
    they would always see the anonymous homepage,
  • 4:47
    because the anonymous variant has no selection rules.
  • 4:50
    And that means that this test for selection criteria
  • 4:53
    will always pass, and the anonymous version, the page
  • 4:55
    will always be shown.
  • 4:57
    Drupal or Panels will never look for that authenticated variant.
  • 5:01
    We need to reorder these to get the authenticated variant
  • 5:04
    to happen first.
  • 5:05
    So we do that by clicking this Reorder
  • 5:07
    Variance link at the top right.
  • 5:09
    Now we can grab the authenticated variant, move it above anonymous.
  • 5:14
    And Update and Save.
  • 5:16
    So now, on the left-hand side, we can see our authenticated variant
  • 5:19
    comes first.
  • 5:20
    It has a Selection criteria.
  • 5:21
    So users who are logged in will be able to see this page.
  • 5:25
    And if a user who is not logged in tries to look at this page,
  • 5:28
    it'll fall through to the Anonymous variant, where
  • 5:31
    there are no selection criteria.
  • 5:33
    We can confirm that the Anonymous variant still
  • 5:35
    has a two-column layout with all of our original content in it,
  • 5:39
    and the Authenticated variant now has a three-column layout.
  • 5:43
    So let's check on this and make sure it's working.
  • 5:45
    We're logged in.
  • 5:46
    We're authenticated.
  • 5:47
    Let's go look at the homepage, and we'll
  • 5:49
    expect to see an advertisement in the right-hand column.
  • 5:53
    And there it is.
  • 5:55
    It's also important to test our logged out version
  • 5:58
    of this page, our unauthenticated.
  • 6:00
    So we're going to log out and expect to see that advertisement
  • 6:03
    on the left-hand side.
  • 6:05
  • 6:07
    So now you've seen two different ways to create
  • 6:09
    different variants for your panels.
  • 6:11
    Stay tuned so you can see all the great things you can
  • 6:13
    do for panels with your content.

Quickly Duplicating Variants by Cloning


Now that you’ve manually created a new variant for your front page, this lesson will teach you a much faster way to duplicate an existing variant. This technique is useful if your variants are very similar to one another.

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