VIDEO LANDING PAGES. I. From the Content menu, create a Video Landing Page instance

Transcription

1 Peter Kosenko, Web Team VIDEO LANDING PAGES Note: Although the content type is called Video Landing Page (since we originally created the type for using videos), you can create other landing page types by simply NOT including a video URL in the video field and filling in the body fields with the HTML that you want. You can also create non-video landing pages by using the Basic Page and Basic Page with PIC (e.g., banner image) content types. Remember to add the taxonomy tag term landing page on the landing page edit page so that it will be included in the taxonomy search The most difficult field is the Navigation Buttons field, which allows you to select from a group of five preconfigured button blocks. If you need a set of buttons that doesn t already exists, you will probably need to ask one of the administrators to create it for you, since the HTML and CSS code is complicated. I. From the Content menu, create a Video Landing Page instance Content -> Add content -> Video Landing Page II. Fill out the page content form fields: Video Landing Page: New Member Landing Page The name of the landing page. This is the name of the page that will turn up in the administrative back end on the content listing. You probably want to include Landing Page in the title to make it easier to pick out of the content listing as a landing page. If you choose not to customize the path, Drupal will use this as the URL (e.g.,

2 /new_member_landing_page). The display of this field has been suppressed on the page so that you can create a custom title (see next). Custom Title: Members The title as you want it to show on the top of the page (so that you are not stuck with the same title as the page name). Tag Line: Learn more about us; join our members as we explore, enjoy and protect. The indented one-line catchphrase or slogan that you want under the title. VIDEO Video URL: YouTube or Vimeo URL. The YouTube URL has to be in the canonical format indicated, NOT the abbreviated y2u.be version. Body The Landing Page contains TWO content area text fields, one above Navigation buttons and one below. You do not have to use both of them. The one below was originally created as an alternate body location, in case a large amount of text makes better sense located AFTER the buttons. But perhaps you have a use for BEFORE and AFTER text. Just be careful that putting too much text before the navigation buttons may push them down below the bottom of the page where users cannot see them.

3 Navigation Buttons Navigation buttons are configured as Blocks of buttons, one block of which can be selected from the Navigtation Buttons select list. Note that ALL Bocks are selectable in the list. So we have established a block naming convention that places Video Landing Page before the button collection name. The button collection is named for the first page that it was developed to support. Currently there are the following button blocks: Video Landing Page New Member Buttons Video Landing Page - Campfire Buttons Video Landing Page - Conservation Buttons Video Landing Page Outings Video Landing Page Politics Video Landing Page Service Buttons look like the following, with from 4 to 12 buttons in from 1 to 3 rows NOTE to Admins: You do NOT need to add the button blocks to any node regions listed on the block configuration form. The button blocks are inserted by the block_reference module as a field type. If you add them to the page content region, for example, you would get a duplicate set of buttons on the page.

4 Body Alternate Although the name of the field is alternate, since it was created for users who wanted text below the navigation buttons, nothing prevents you from using both body fields, although putting too much text above the buttons will cause the buttons to drop below the bottom of the browser screen. See body above for screen shot of text input type. Tags Add the taxonomy term landing page (auto-fill) in the Tags field so that the landing page will show up on a taxonomy term search. The following URL should show all of the landing pages that have been tagged with landing page. URL Path Settings Note that AUTOMATIC URL path for a video landing page is: landing/[node:title] which translates to: landing/new_member_landing_page The automatic alias should be good enough, but if for some reason you want a shorter page URL, you can uncheck Generate automatic URL alias and supply your own alias page name. But you NEED TO use the prefix landing to avoid confusion with other areas of the web site. If you were to use just members and someone else on the site has used that path alias, you would generate an error. landing/members URL redirects This section allows you to add or delete URLs that redirect to the current node.

5 Meta Tags Meta Tags can be set by anyone who wants to do SEO configuration. This information is normally hidden in the page header. Other Options The following standard fields normally require no editing: III. ADD Video Landing Page Styles to the Landing Page that you just created. This is important since the Button Blocks do not have any styling of their own. They are styled by the CSS-Injector module s Video Landing Page Styles CSS. In other words, you need to tell Drupal to add that style sheet to the Landing Page that you just created. Unfortunately, that is not as straightforward as it might seem. 1. Select the Modules menu item from the top admin toolbar: 2. Enter CSS into the Module Filter List to see ONLY modules that have CSS in their names and select the Configure select item from the CSS-Injector modules configuration select list.

6 3. Go to the Video Landing Page Styles item on the CSS-Injector style sheet list. Currently this is at the bottom of the list, but it will move up as new style sheets are created. Click the Edit rule button. 4. Go to the Pages text box and add the PATH of your new landing page to the bottom of the list. This tells Drupal that you want the Video Landing Pages Style style sheet (see the CSS code field above on the CSS page) added to Landing page you just listed. CREATING NEW BUTTON BLOCKS (for Admins) Creating new button blocks is the most difficult part of Video Landing Page creation. If possible have users select from an existing button block type. 1. Create a button block by copying button HTML from another video page button block. First select Structure -> Blocks -> Add block from the admin toolbar: 2. Fill in the block creation form. Block title: Video Landing Page Conservation Buttons The title of the block as it would appear on the block display if it weren t suppressed. Note that Video Landing Page Styles SUPPRESS the display of this block title. I create Block description first and then simply copy it up into the title. Block description: Video Landing Page Conservation Buttons

7 This is what appears as the block description on the administration block page. It is IMPORTANT to prefix it with Video Landing Page if you want it to show up alongside other landing page button blocks in the block listing. Add the landing page name so that users can identify the type of Landing Page to which the button block applies. Block body The button HTML goes here. You can copy this from another button block and edit. Three important HTML features: a. <div class= vlp_buttons ></div> DIV wrapper defines a ROW of buttons. Try to keep 4 to 5 buttons per row. No more than 5. b. <a> hypertext links need a unique class name for each button. For example find-my-group for the Find My Group button. If a Find My Group button already exists in another button block, you will want to prefix this one with something like politics-find-my-group since this class name controls the COLOR of the button and the button may have different colors (because different location) on different pages. c. vbz_fifth is a holdover from the promo buttons from which landing page buttons were created. It contains the BASE CSS for buttons in a row of 5. If you plan different button widths (say 3 per row with 1/3 row width each), you will need to add and use a different base CSS class. <div class="vlp_buttons"> <a class="scstandard-button find-my-group vbz_fifth" href="" id="buttonfindmygroup" title="find My Group" target="_blank">find My Group</a> <a class="scstandard-button volunteer-a-skill vbz_fifth" href="" id="buttonvolunteeraskill" title="volunteer a Skill" target="_blank">volunteer a Skill</a> <a class="scstandard-button protect-nature vbz_fifth" href="" id="buttonprotectnature" title="protect Nature" target="_blank">protect Nature</a> <a class="scstandard-button clean-air vbz_fifth" href="" id="buttoncleanair" title="clean Air" target="_blank">clean Air</a> <a class="scstandard-button politics vbz_fifth" href="" id="buttonpoliticalinvolvement" title="politics" target="_blank">politics</a> </div> <div class="vlp_buttons"> <a class="scstandard-button photography vbz_fifth" href="" id="buttonphotography" title="photography" target="_blank">photography</a> <a class="scstandard-button hiking vbz_fifth" href="" id="buttonhiking" title="hiking" target="_blank">hiking</a> <a class="scstandard-button camping vbz_fifth" href="" id="buttoncamping" title="camping" target="_blank">camping</a> <a class="scstandard-button adventure vbz_fifth" href="" id="buttonadventure" title="adventure" target="_blank">adventure</a> </div> REGIONS SETTINGS

8 Since block insertion is controlled by the block_reference, you do not need to assign the block to a node region. Visibility Settings Since block insertion is controlled by the block_reference module, you do not need to select any visibility settings on the block form. Visibility is controlled by the Manage Fields form on the Video Landing Page content type configuration page. 3. Edit the Video Landing Page Styles from the CSS-Injector module configuration page. See ADD Video Landing Page Styles to the Landing Page above on how to access style sheets created by the CSS-Injector module. The Edit CSS Injector Rule page is here: All that you should need to do is to add button background colors to reflect the pattern that you want (different button arrays will need different patterns). Note that the classes are used to prevent the colors from being applied to any other hypertext links on the page. For example: /* new member buttons */ a.find-my-group { background: #E17F00; a.volunteer-a-skill { background: #E19000; a.protect-nature { background: #DC5C05; a.clean-air{ background: #E19000; a.politics { background: #E17F00; a.photography{ background: #A79330; The following earth colors are available from the New Members button array, but you may decide that you want to introduce some (tasteful) new color that fits the Angeles theme. #E17F00 #E19000

9 #DC5C05 #A79330