Skip to Main Content

Subject support guide

Library Search My Account

CS Learning Lab

For Help Desk Staff

Check out the resources below then go to CS LibGuides Training Test Guide and get started!  Don't have access? Contact Louise Cowan to set up accounts or change admin rights.

Page Champion

For LibGuides training and queries, contact Christina Taylor in Customer Services.

NEW! Adding content from LibWizard 

Once you've created a form, survey or quiz in LibWizard, you can easily embed it into a guide.

      To add a LibWizard item to your guide.

      Click on Add/Reorder at the bottom of the box. 

Select LibWizard Item from the dropdown menu.

From the Item dropdown, select the form, survey, or quiz you want to add. (*Tutorials are not included in this list.)

The asset will use the same name as your widget in the assets library.

Use the Position option to choose where the new asset should be inserted in the box. (You can always change this later.)

Click Save.

*At the moment, you can’t embed LibWizard tutorials this way. To do this, you'll need to copy the tutorial's embed code, choose Media/Widget and paste the code into your guide.

Creating pages on a LibGuide

Once you have logged in,

  • Click on LibGuides in My LibApps box
  • Choose Create Guide (or Edit Existing Guide – choose guide from drop down list)

 (Or to edit an existing guide, scroll down to Login to LibApps at the bottom right of the guide you want to edit).

Adding content to a LibGuide

Embedding PDFs in libguides using HTML

Richard has created the following instructions for embedding a PDF in a LibGuide.

To do this we'll be hosting the PDF file within libapps by using the 'Add' 'Document / File' function (detailed above), and then pasting the URL of that PDF into a pre-made template of HTML code that sits within a 'Rich Text / HTML' box.

Click the next tab to see a preview/example of the HTML code template.

The tabs after that contain examples of this technique and instructions on how to use it..

This is the short snippet of HTML code we will use, we will exchange the XXXXXX for our PDF URL.. 

<iframe src="XXXXXX" style="width: 100%; height:
810px"></iframe>

<iframe src="XXXXXX" style="width: 100%; height:
600px"></iframe>

We don't input this text as we would usual text, we use the Source function, we'll look at this on the next tab..

  • To input HTML code into our libguide we need to click on the Source  button in the Rich Text/HTML Box on libguides.
  • You will see the text window change, and your formatted text will appear as HTML code with lots of tags and labels and punctuation.
  • Clicking Source again will revert your window to the easily readable and formatted Rich Text display.
  • When we revert to the easily readable Rich Text mode it is computer wizardry which allows us to easily navigate and manipulate our text, but in the background it is all done using HTML.

You don't need to know or understand the HTML code to embed your PDF, but in order to navigate the code and choose where to insert your template it is useful to know that:

<p> is opening a paragraph, <p/> is closing a paragraph

<br> can be used for a line break

For example whilst using the Source edit mode, hitting the Return key will not add in line breaks or spaces, the cursor will appear to move down the window/text but it will not add spacing to your content - this must be done using the HTML codes whilst in Source mode.

Below is an example of how the window looks using the Source mode:

Below are examples of how a PDF looks when embedded using this method.

Notice how you can change the size of the PDF on your webpage, we'll look at how this is done on the next tab.

Our PDF in this example is hosted just below, note that if this PDF is deleted then the embedded PDF will break/disappear, so it is useful to consider hosting your files on your own libguide. Note also that it does not matter where the file is hosted on your libguide, or even whether the link is visible or not (I personally like to present it as shown below so that people can click the link if they want to).

  • Copy the URL from where the PDF is hosted in libapps, this would be for example: "https://libguides.ncl.ac.uk/ld.php?content_id=34128876"
  • This URL replaces the XXXXXX in the template (retain the quotation marks around it - this lets the computer know the beginning and end of the URL.
  • You can edit the width and height properties to adjust how the pdf appears on the page.
  • The width is measured as a percentage, and this will determine what percentage of the available space is used (if your PDF is being embedded in a box which is within a column, then '100%' will display the PDF across all of the available width in that column, but not the whole webpage).
  • The height is measured in 'px' or pixels (dots which make up an image on a digital screen).
  • The examples tab shows the PDF with 100% & 1200px, 75% and 800px, 50% 400px.
  • Once you have decided your height and width, you can click again on Source  to return to the Rich Text mode.
  • Once back in Rich Text mode, your HTML PDF embedding template code will appear as an 'IFRAME' box which can be typed above or below, moved around using the Return key, or even dragged and dropped - though if you are comfortable with this method thus far, it may be preferable to return to source mode, and cut and paste your HTML template elsewhere in the code.

Below is an example of how we used to host PDFs and embed them using a third party service, you will notice how there are third party emblems and links and to view the content you need to click out to another website.. it's quite interrupted.

Another issue to consider is that these third party websites sometimes impose limits on the number or size of documents which are hosted there, on libapps internally we can host a generous number of files.