Documentation:DIY Media Website Documentation

From UBC Wiki

This page contains documentation for workarounds or other non-intuitive features of the DIY Media, Digital Tattoo, and Learning Commons websites.

DIY Media

Automatically generated landing pages

The landing pages for toolkits are automatically generated, using WordPress loops, custom fields, and some CSS. This section explains how to prepare toolkit pages so they work with automatically generated landing pages.

Preparing a toolkit page

To make sure that your toolkit page is correctly pulled into the landing pages, you need to change a few settings.

  1. Write an excerpt: the text you use for the excerpt will be used as a brief description of the toolkit on the landing page. Aim for 150-200 characters.
  2. Set a featured image: this will become the icon of your toolkit. Simple images, like those hosted by the Noun Project, work best. Using a black-and-white image will give the best results.
  3. Set custom fields: add the custom field 'is_toolkit' with a value of 1 and either 'is_audio', 'is_video', or 'is_computer', also with a value of 1, if your toolkit is for audio, video, or screencasting, respectively. By setting a custom field, the loop code can determine if your page is or is not a toolkit, and therefore whether or not it should be included in the landing pages.
    • If you can't see the custom fields area on the WordPress page, scroll to the top of the page, click 'screen options', and select 'custom fields'.

Preparing a landing page

WordPress page

To create a new landing page, begin by copying and pasting the following code into a blank WordPress page. Pages which match the criteria set in the first line are formatted and added to the page, as dictated by the code within the loop tag. This page on the UBC Wiki explains how the loop code works in general terms. The instructions below the code explain exactly what's happening in this specific piece of code.

[loop query="posts_per_page=-1;post_type=page;meta_key=is_audio;orderby=title;order=asc" ]

[column size=3]
<a href="[permalink]"><img class="img-rounded" title="[the_excerpt]" src=" [the_post_thumbnail_src ]" alt="[the_title]" /></a>
<a href="[permalink]"><h3>[the_title]</h3></a>
[the_excerpt]
<br>
<a class="btn" href="[permalink]">Learn More!</a>
[/column]

[/loop]

  • The first line initializes the loop.
    1. Setting the posts per page to -1 removes the limit on the number of pages which the loop will retrieve.
    2. Setting the post type to page tells the loop to only pay attention to pages, as opposed to posts, links, or users.
      • In this example, setting the meta key to is_audio means that the loop will only retrieve pages which have the custom field is_audio set to one; this code will generate the landing page for the podcast toolkit landing page.
    3. Setting orderby to title will sort the pages alphabetically, and setting order to asc (short for ascending) means that they will be sorted in alphabetical, as opposed to reverse alphabetical, order.
  • The second line sets the posts per row to four. (By convention, the page is 12 units wide. Setting the column size to three results in four rows, three units wide.
  • The fourth line adds the image to the landing page, as a link to the toolkit.
  • The fifth line adds the title of the toolkit to the landing page, as a link to the toolkit.
  • The sixth line adds the excerpt to the page, under the image and title.
  • Depending on how your specific page is formatted, you might need to add or remove <br> tags: they add space between the excerpt and the button.
  • The eight line adds a button which links to the toolkit.
  • The remaining lines close tags.
Custom CSS

Copy this CSS, and insert it into the custom CSS on the page you're working on. It will change the thumbnail size, adjust the text alignment, add some opacity to the thumbnail images, and generally improve the formatting of the page.

Creative Commons license in the Footer

The footer of the DIY Media website features a Creative Commons license. This is a non-standard feature which cannot currently be adjusted from the settings in WordPress. To create this feature, a custom footer is created, and CSS is used to suppress the automatic footer. If you notice that you are making changes to the footer in WordPress, but they are not being reflected on the website, this is why.

Creating a custom footer

The basis of this footer is pulled from the HTML on the CTLT website. The code for this footer is stored under Appearance → Widgets → Footer → Text. The easiest way to edit the footer is to copy and paste the text into a text editor, search for and replace the fields you want to change, and copy and paste the text back into the footer section.

Suppressing the automatic footer

Add the following text somewhere in your custom CSS.

/*suppress old footer */

#ubc7-footer {

display: none;

}

Website structure

This file, created in XMind, a free, open-source mind mapping tool, lays out the structure of the DIY Media website and associated toolkits.

(The linked file is currently hosted out of my (John Harvey) personal DropBox, as the Wiki does not accept .xmind files.)

Learning Commons

Automatically generated landing pages

The landing pages for the various categories on the Learning Commons site (e.g. Student Toolkits, Resource Guides) are automatically generated using WordPress loops and some CSS. This section explains how to prepare toolkit pages so they work with automatically generated landing pages.

Preparing a toolkit page

To make sure that your page is correctly pulled into the landing pages, you need to change a few settings.

  1. Write an excerpt: the text you use for the excerpt will be used as a brief description of the page on the landing page. Aim for 150-200 characters.
  2. Set a featured image: this will become the picture associated with the page. Try to select an image which keeps with the style of the other images on the page.

Preparing a landing page

WordPress page

To create a new landing page, begin by copying and pasting the following code into a blank WordPress page. Pages which match the criteria set in the first line are formatted and added to the page, as dictated by the code within the loop tag. This page on the UBC Wiki explains how the loop code works in general terms.

    [loop query="posts_per_page=-1&post_type=page&post_parent=PARENT_PAGE_ID&orderby=menu_order&order=ASC"]
    <li class="span4">
    <div class="thumbnail">
    <a href="[permalink]"><img class="img-rounded" img title="[the_excerpt]" src=" [the_post_thumbnail_src ]" alt="[the_title]" /></a>
    <h3>[the_title]</h3>
    [the_excerpt]
    <br>
    <a class="btn" href="[permalink]">Learn More!</a>
    </div>
    </li>
    [/loop]
    </ul>
    On the second line, replace the characters PARENT_PAGE_ID with the four-digit number which is the ID of the parent page of the pages you want to collect. Typically, the parent page will be the landing page. To find the page ID, edit the page, and look for the characters 'post=XXXX' in the URL, where 'XXXX' will be four numbers.
    Custom CSS

    Copy this CSS, and insert it into the custom CSS on the page you're working on. It will change the thumbnail size, adjust the text alignment, add some opacity to the thumbnail images, and generally improve the formatting of the page.

    Creative Commons license in the Footer

    The footer of the Learning Commons website features a Creative Commons license, as well as the address of the Learning Commons, and buttons which link to social media. While the latter two features can be automatically generated, the Creative Commons license cannot be generated by WordPress. To include it, the entire footer must be generated manually. A custom footer is created, and CSS is used to suppress the automatic footer. If you notice that you are making changes to the footer in WordPress, but they are not being reflected on the website, this is why.

    Creating a custom footer

    The basis of this footer is pulled from the HTML on the CTLT website. The code for this footer is stored under Appearance → Widgets → Footer → Text. The easiest way to edit the footer is to copy and paste the text into a text editor, search for and replace the fields you want to change, and copy and paste the text back into the footer section. As things currently stand, the footer is up-to-date and correct.

    Suppressing the automatic footer

    Add the following text somewhere in your custom CSS.

    /*suppress old footer */ #ubc7-footer { :display: none; }