Embedding: few tips

Embedding a picture or an online object using html code

    • get an image URL (for instance, one from Pixabay – a public domain collection of images)

books-no_hotlinking

 

Note: Pixabay does not allow hotlinking – embedding a direct link to the pixabay files- so in order to use it, we have to save the image on a hard drive and then to download it to our local LMS server.

 

  1. the URL from pixabay                      https://pixabay.com/static/uploads/photo/2015/05/15/14/21/books-768426_640.jpg
  2. save a copy of this file on your computer, download it to your LMS server and get the local URL for the picture
  3. the local URL for this file in this WordPress  blog is                                    https://blogs.ubc.ca/etec565a66b/files/2015/09/books-768426_640.jpg
  4. activate the html editing mode (for instance, switch from “Visual” to “Text” when editing pages in the WordPress; or activate “HTML” button of the text editing area working with the BB Connect or Moodle)
  5. copy the embedding command:                                                                                               <a href=”__image-URL___“><img src=”__image-URL___” alt=”” /></a>

6. paste the image URL to the code in the address areas:

<a href=”https://blogs.ubc.ca/etec565a66b/files/2015/09/books-768426_640.jpg“><img src=”https://blogs.ubc.ca/etec565a66b/files/2015/09/books-768426_640.jpg” alt=”” /></a>

7. post this code on the page while in html editing mode

8. publish and see the embedded object.

 Changing the picture dimensions on the page 

        1. get the image URL:

https://pixabay.com/static/uploads/photo/2012/02/19/10/49/background-14888_640.jpg

2. save a copy of this file on your computer, download it to your LMS server and get the local URL for the picture

3. copy and paste this URL into the code:

<a href=”_____“><img src=”_____” alt=”” /></a>

  4. after alt=””  add the new image dimensions:  width=”250″ height=”150″

5. post this code on the page while in html editing mode

<a href=”https://blogs.ubc.ca/etec565a66b/files/2015/09/background-14888_640.jpg“><img src=”https://blogs.ubc.ca/etec565a66b/files/2015/09/background-14888_640.jpg” alt=“” width=”250″ height=”150″ /></a>

 

6. publish and see the embedded object with the prescribed dimensions.

 

 

 

Note: the thumbnail pictures do not reduce the traffic and download time. To better serve the users with limited bandwidth, we have to edit the pictures and reduce the file size (for instance from 1.8MB to 157Kb) and then using these smaller files on the web page. When necessary, consider offering both the lower quality and higher quality images, indicating the file size.

 

Embedding a navigational icon: a picture that works as a link

  1. get the “Arrow” icon URL from pixabay :

https://pixabay.com/static/uploads/photo/2014/01/29/05/46/right-254091_640.png

2. save a copy of this file on your computer, download it to your LMS server, get the local URL for the picture and adjust the icons’ dimensions (width and height) in the code

3. get local URL for the picture                                                                                          https://blogs.ubc.ca/etec565a66b/files/2015/09/right-254091_640.png

4. get the destination page URL                                                                                 https://blogs.ubc.ca/etec565a66b/unit-2/learning-management-systems/

5. copy these two URLs into the code for embedding the navigation icon:

<a href=”__destination-URL-address____“><img src=”__image-URL-address____” alt=”icon-arrow” width=”100″ height=”100″ /></a>

<a href=”https://blogs.ubc.ca/etec565a66b/unit-2/learning-management-systems/“><img class=”alignright” src=”https://blogs.ubc.ca/etec565a66b/files/2015/09/right-254091_640.png” alt=”icon-arrow” width=”100″ height=”100″ /></a>

6. publish and test the embedded icon to navigate to the prescribed destination.


icon-arrow

 

 See examples of using navigation icons