Learning Commons:Student Orientation/Working With Content/Adding Related Pages

From UBC Wiki

Overview

Adding related pages in a page will help site visitors look find a content that is related to their interests. It will also avoid site visitors to leave the site immediately after they read the content.

related page learning commons site


Step1: Adding Related Pages code to the page

Text mode
  1. When you add related pages, make sure you are in Text Mode, since you will be editing in HTML.
  2. Copy and paste the following code to the page
<!-----Related Page------!>
<div class="row-fluid">
<!---First related page---!>
<div class="span4"><div class="thumbnail">

<div class="landing_PageTags"></div>
<a target="_self" href="URL of the page" title="Title of the page" class=""><img src="ADD IMAGE URL here " alt="" class=""></a> 
<h2><a target="_self" href="URL of the page" title="Title of the page" class="">Title of the page</a></h2>

<p>description/blurb about this page </p>
<a target="_self" href="URL of the page" title="Learn More!" class="btn">Learn More!</a>
</div></div>

<!---second related page----!>
<div class="span4"><div class="thumbnail">
<div class="landing_PageTags"></div>
<a target="_self" href="URL of the page" title="Title of the page" class=""><img src="ADD IMAGE URL here " alt="" class=""></a> 
<h2><a target="_self" href="URL of the page" title="Title of the page" class="">Title of the page</a></h2>

<p>description/blurb about this page </p>
<a target="_self" href="URL of the page" title="Learn More!" class="btn">Learn More!</a>
</div></div>

<!---third related page---!>
<div class="span4"><div class="thumbnail">
<div class="landing_PageTags"></div>
<a target="_self" href="URL of the page" title="Title of the page" class=""><img src="ADD IMAGE URL here " alt="" class=""></a> 
<h2><a target="_self" href="URL of the page" title="Title of the page" class="">Title of the page</a></h2>

<p>description/blurb about this page </p>
<a target="_self" href="URL of the page" title="Learn More!" class="btn">Learn More!</a>
</div>
<!---end of related page--->
</div>
</div>

Step2: Modifying the related pages code

Modifying the code

Please refer to the screenshot above to modify the code.

  1. The code of the thumbnail box: This is the code for each thumbnail "box"
  2. The code of the tag (flag) on the thumbnail: This is code for the "flags" on the thumbnail - so if you want to add a tag for learning, in between <div class="landing_PageTags"> and </div>, add <a href="/learning/"><span class="tagLearning">Learning</span></a> . The codes of other flag can be found below:
    • Support flag: <a href="/support/"><span class="tagSupport">Support</span></a>
    • Learning flag: <a href="/learning/"><span class="tagLearning">Learning</span></a>
    • Toolkit flag: <a href="/toolkits/"><span class="tagToolkits">Toolkits</span></a>
    • Guides flag: <a href="/guides/"><span class="tagGuides">Guides</span></a>
    • Study flag: <a href="/study/"><span class="tagStudy">Study</span></a>
    • Technology flag: <a href="/technology/"><span class="tagTechnology">Technology</span></a>
  3. Code is for the link and title of the page: in the href="" , add the URL of the page. For example href="http://learningcommons.ubc.ca/tutoring-studying/myths-about-learning/". In the title="", add the title for the page- for example title="Myths about learning"
  4. Code for the thumbnail image. add the URL of the image within img src="". For example, img src="http://learningcommons.ubc.ca/files.2016/10/IMG_0774.jpg". You can find the url of the image in media galleries. Then, add the description of the image within alt="" . For example "a person studying at a library".
  5. Code for link and title of the page: This code is same as step 3. follow the same step.
  6. Description of the page: This code is description of the page. Add the description of the page.
  7. Learn more button: This is a code for learn more button. add the URL of the page within href

Step3: Repeat step 2

Repeat Step 2 for the second and third thumbnail. After you are done, preview and publish the page.

Retrieved from "https://wiki.ubc.ca/index.php?title=Learning_Commons:Student_Orientation/Working_With_Content/Adding_Related_Pages&oldid=460448"