Documentation:Digital Tattoo Student Orientation/Website Technical Documentation

From UBC Wiki

Website QA

  • Check broken links
  • Check the page on mobile, ipad and desktop pc.
  • Make sure all images are cited

Automatically generated landing pages

The landing pages for the categories on the site (Protect, Connect, Learn, Work, etc.) are automatically generated, using WordPress loops, custom fields, and some CSS. This section explains how to prepare pages in categories so they work with automatically generated landing pages.

Preparing a toolkit page

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

  1. Set a featured image: this will become the icon of your toolkit. Try to select pictures which match the style of the current page icons.

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. 

<ul class="thumbnails">
[loop query="posts_per_page=-1&post_type=page&post_parent=1040&orderby=menu_order&order=ASC"]
	<li class="span4">
<div class="thumbnail">

[image_with_src with_permalink="1"] </a>
<h3>[the_title]</h3>
[link_with_content link_class="btn" content="Learn More!"] 
</div>
</li>
[/loop]

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;

}

Embed a Video

When you embed a video, you can simply copy and paste the URL of the video into the visual editor. Read this page for more info.

Resources

Retrieved from "https://wiki.ubc.ca/index.php?title=Documentation:Digital_Tattoo_Student_Orientation/Website_Technical_Documentation&oldid=454882"