{"id":17805,"date":"2022-07-19T01:13:07","date_gmt":"2022-07-19T05:13:07","guid":{"rendered":"https:\/\/pacificopencourses.col.org\/edt4ol\/?page_id=17805"},"modified":"2022-07-19T01:13:07","modified_gmt":"2022-07-19T05:13:07","slug":"working-with-images","status":"publish","type":"page","link":"https:\/\/pacificopencourses.col.org\/edt4ol\/learning-challenges\/intermediate-wiki-skills\/working-with-images\/","title":{"rendered":"Working with images"},"content":{"rendered":"<div id=\"content\" class=\"mw-body container\" role=\"main\">\n<div class=\"row\">\n<div class=\"col-md-12\">\n<div class=\"panel\">\n<div class=\"panel-body\">\n<div id=\"bodyContent\">\n<div id=\"mw-content-text\" lang=\"en\" dir=\"ltr\" class=\"mw-content-ltr\">\n<div class=\"floatright\"><a href=\"https:\/\/wikieducator.org\/File:Female_photographer-landscape.jpg\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"Female photographer-landscape.jpg\" src=\"\/\/wikieducator.org\/images\/thumb\/2\/27\/Female_photographer-landscape.jpg\/400px-Female_photographer-landscape.jpg\" width=\"400\" height=\"268\" class=\"img-responsive\"><\/a><\/div>\n<p><br style=\"clear:both;\"><\/p>\n<h2><span class=\"mw-headline\" id=\"Introduction\">Introduction<\/span><\/h2>\n<p>Photographs, charts, and diagrams can often be used effectively in online learning materials to communicate complex and\/or multiple ideas, and to improve visual aesthetics. Online course developers therefore need to know how to:\n<\/p>\n<ul>\n<li> upload images legally, and\n<\/li>\n<li> manipulate the display (position and size) of images on published websites.\n<\/li>\n<\/ul>\n<p>Importantly, course developers must respect the copyright and digital conventions for attributing images under the provisions of different open licences.\n<\/p>\n<div class=\"panel iDevice\">\n\t<div class=\"panel-heading idevice-heading\">\n\t\t<div>\n\t\t\t<img decoding=\"async\" class=\"pedagogicalicon\" alt=\"preknowledge\" src=\"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-content\/themes\/oeru-course\/idevices\/Icon_preknowledge.png\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h2>Preknowledge<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"panel-body\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<\/p>\n<ol>\n<li> Review the <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/pacificopencourses.col.org\/ds4oers\/learning-challenges\/the-oer-development-process\/image-attribution-challenge\/\">TASL<\/a>(Title, Author, Source, and Licence) requirements for attributing Creative Commons images\n<\/li>\n<li> Visit the WikiEducator <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/wikieducator.org\/File:Female_photographer-landscape.jpg\">metadata page<\/a> for the image used on this course page to see how the TASL requirements have been implemented. (From this page, you can click on the image above to go directly to the image attributions.)\n<\/li>\n<\/ol>\n<p>\n<\/p>\n<p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p>\n<\/p>\n<h2><span class=\"mw-headline\" id=\"Introducing_the_wiki_image_syntax\">Introducing the wiki image syntax<\/span><\/h2>\n<p>In brief, the format of the wiki syntax for displaying an image is:\n<\/p>\n<pre>[[File:file name|type|location|size|caption]]\n<\/pre>\n<p><b>Notes:<\/b>\n<\/p>\n<ol>\n<li> <i>type<\/i> refers to whether you want to display your image as a thumbnail or a framed image; we recommend that you do not use framed or thumbnail images because they do not automatically re-size on mobile devices\n<\/li>\n<li> <i>location<\/i> allows you to specify where on the page the image should appear, for example: left, right, or centre\n<\/li>\n<li> <i>size<\/i> allows you to specify the size (in pixels) at which the picture is displayed on the page\n<\/li>\n<li> <i>caption<\/i> is where you can choose to add a description for your image (Note: this only works for framed or thumbnail images)\n<\/li>\n<\/ol>\n<dl>\n<dd><b>Tip<\/b>: This may appear confusing at first, but don&#8217;t worry! Experiment with the options below in your Sandbox on your User page. You will soon discover how this works. You don&#8217;t have to memorise this syntax, because these tutorials are permanently available as reference materials!\n<\/dd>\n<\/dl>\n<p>The following table outlines the optional attributes and their effects on images:\n<\/p>\n<table class=\"oeru1 table table-striped\">\n<tbody>\n<tr>\n<th>Parameter\n<\/th>\n<th>Optional Image Attributes\n<\/th>\n<\/tr>\n<tr>\n<td><b>Type<\/b>\n<\/td>\n<td>\n<p>&#8216;thumb&#8217; \/ &#8216;thumbnail&#8217; or &#8216;framed&#8217;<br \/>\nUsed for type option; results in an image displayed with specific formatting\n<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><b>Location<\/b>\n<\/td>\n<td>\n<p>&#8216;right&#8217;, &#8216;left&#8217;, &#8216;centre&#8217; or &#8216;none&#8217;; determines the placement of the image on the page (Note: the default placement is on the left)\n<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><b>Size<\/b>\n<\/td>\n<td>\n<p>{width}px or {width}x{height}px will scale the image to the given width and height, while keeping its aspect ratio\n<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td><b>Caption<\/b>\n<\/td>\n<td>Any element that is not identified as any one of the above is assumed to be caption text\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><span class=\"mw-headline\" id=\"Recommended_image_syntax_for_publishing_to_course_sites\">Recommended image syntax for publishing to course sites<\/span><\/h3>\n<p>Today, the majority of learners access course sites using mobile devices. Therefore, we recommend a &#8216;mobile first&#8217; approach, taking requirements for responsive image display on small screens in portrait view into account. Ideally, we recommend using image markup that will re-size automatically for different screen resolutions. Bear in mind that your learner may be viewing the content on a different screen size than the one you are using to author course materials. In addition, there are a range of different screen sizes for mobile devices ranging from 320px to 414px wide in portrait view.\n<\/p>\n<p>We recommend:\n<\/p>\n<ul>\n<li> avoiding the use of the &#8216;thumb&#8217; and &#8216;framed&#8217; images for courses, because they are not responsive for mobile devices, and\n<\/li>\n<li> preferably using a minimum width of 410px to accommodate for the majority of mobile screens in portrait view.\n<\/li>\n<\/ul>\n<p>See, for example, the following markup we use for most images, either left or right-justified, which will re-size for smaller screens without awkward text-wrapping on larger than normal mobile phones:\n<\/p>\n<pre> [[File:networkedlearning.jpg|410px|right]]\n<\/pre>\n<p>However, for more thorough coverage of image wiki markup options, you can practise using &#8216;frame&#8217; and &#8216;thumb&#8217; as image types with captions below.\n<\/p>\n<h4><span class=\"mw-headline\" id=\"Tip\">Tip<\/span><\/h4>\n<p>An image may &#8216;float&#8217; over other text or headings you have in your wiki page, or result in text-wrapping that is hard to read on mobile devices. To remedy this, try adding the following underneath your image markup: <code>{{clear}}<\/code>. This makes sure that the text or content which follows will start <i>after<\/i> the image has been embedded in the page. So, for example, the image on the top of this course page used the following markup to avoid text-wrapping around the image:\n<\/p>\n<pre> [[image:Female_photographer-landscape.jpg|400px|right]]{{clear}}\n<\/pre>\n<h3><span class=\"mw-headline\" id=\"Inserting_an_image_with_a_frame\">Inserting an image with a frame<\/span><\/h3>\n<p>This is an image with the &#8216;framed&#8217; attribute:\n<\/p>\n<pre>[[File:networkedlearning.jpg|framed|left|Creative Commons makes it flow.]]\n<\/pre>\n<div class=\"thumb tleft\">\n<div class=\"thumbinner thumbnail\" style=\"width:602px;\"><a href=\"https:\/\/wikieducator.org\/File:Networkedlearning.jpg\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"\/\/wikieducator.org\/images\/5\/56\/Networkedlearning.jpg\" width=\"600\" height=\"398\" class=\"thumbimage img-responsive\"><\/a>  <\/p>\n<div class=\"thumbcaption\">Creative Commons makes it flow.<\/div>\n<\/div>\n<\/div>\n<p><br style=\"clear:both;\"><\/p>\n<dl>\n<dd><b>Note<\/b> Framed images are displayed at the original size uploaded on the wiki, and will ignore the width parameter. Use &#8216;thumb&#8217; if you want to change the size of the border.\n<\/dd>\n<\/dl>\n<h3><span class=\"mw-headline\" id=\"Changing_the_size_of_the_image\">Changing the size of the image<\/span><\/h3>\n<p>If you want to control the size of the image within a frame, use the &#8216;thumb&#8217; type. You can use the size attribute to set the desired size in pixels. Here is the same image re-sized and centered:\n<\/p>\n<pre>[[File:networkedlearning.jpg|thumb|320px|right|Creative Commons makes it flow.]]\n<\/pre>\n<div class=\"thumb tright\">\n<div class=\"thumbinner thumbnail\" style=\"width:322px;\"><a href=\"https:\/\/wikieducator.org\/File:Networkedlearning.jpg\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"\" src=\"\/\/wikieducator.org\/images\/thumb\/5\/56\/Networkedlearning.jpg\/320px-Networkedlearning.jpg\" width=\"320\" height=\"212\" class=\"thumbimage img-responsive\"><\/a>  <\/p>\n<div class=\"thumbcaption\">Creative Commons makes it flow.<\/div>\n<\/div>\n<\/div>\n<p><br style=\"clear:both;\"><\/p>\n<h2><span class=\"mw-headline\" id=\"Using_an_existing_image_on_WikiEducator\">Using an existing image on WikiEducator<\/span><\/h2>\n<p>We&#8217;ll start with an image that has previously been uploaded and is already available for use on WikiEducator.\n<\/p>\n<div class=\"panel iDevice\">\n\t<div class=\"panel-heading idevice-heading\">\n\t\t<div>\n\t\t\t<img decoding=\"async\" class=\"pedagogicalicon\" alt=\"activity\" src=\"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-content\/themes\/oeru-course\/idevices\/Icon_activity.png\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h2>Activity<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"panel-body\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<\/p>\n<p>\n<b>Purpose<\/b>: Practise inserting and manipulating an image that already exists in the wiki\n<\/p>\n<div class=\"floatright\"><a href=\"https:\/\/wikieducator.org\/File:Message_pad.jpg\" class=\"image\"><img loading=\"lazy\" decoding=\"async\" alt=\"Message pad.jpg\" src=\"\/\/wikieducator.org\/images\/thumb\/8\/84\/Message_pad.jpg\/150px-Message_pad.jpg\" width=\"150\" height=\"185\" class=\"img-responsive\"><\/a><\/div>\n<ul>\n<li> Navigate to the practice area for images on your <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/wikieducator.org\/Special:MyPage\/Sandbox\">Sandbox<\/a> page\n<\/li>\n<li> Add the wiki syntax below to your page by clicking <b>edit<\/b> and entering this syntax into your page. (You can select the syntax here and copy it, and then paste it in your User page or Sandbox):\n<\/li>\n<\/ul>\n<pre>[[File:Message_pad.jpg|left|300px]]\n<\/pre>\n<ul>\n<li> Click on <b>Save page<\/b> to see the image displayed\n<\/li>\n<li> Change the location parameter to &#8216;centre&#8217; or &#8216;right&#8217;; save the page to confirm if you have modified the image placement\n<\/li>\n<li> Change the image size parameter to &#8216;100px&#8217; or &#8216;500px&#8217;, save the page, and look at the changes.\n<\/li>\n<\/ul>\n<p>\n<\/p>\n<p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p>\n<\/p>\n<h2><span class=\"mw-headline\" id=\"Uploading_images\">Uploading images<\/span><\/h2>\n<p>When you want to upload a new image onto the server, you use the basic syntax e.g.  [[File:Picture.jpg]] After you have saved your page, the wiki syntax will appear like this:\n<\/p>\n<p><span style=\"color: red;\">File:Picture.jpg<\/span>\n<\/p>\n<h4><span class=\"mw-headline\" id=\"Notes\">Notes<\/span><\/h4>\n<ol>\n<li> If the image already exists on the wiki, the image will appear right away, otherwise you will get a red link like the one above. The red link tells you that the image still needs to be uploaded onto the server\n<\/li>\n<li> Alternatively, you can upload images directly using the &#8216;<a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/wikieducator.org\/Special:UploadWizard\">Upload file<\/a>&#8216; link, which is accessed from the tools sub-menu on the left of the screen and which launches the &#8220;<a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/wikieducator.org\/Special:UploadWizard\">Upload Wizard<\/a>&#8221; tool\n<\/li>\n<li> As an open project, WikiEducator only permits the following openly licensed images: <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/creativecommons.org\/licenses\/by\/4.0\/\">CC-BY<\/a>, <a rel=\"nofollow\" class=\"external text\" href=\"http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/\">CC-BY-SA<\/a> or images dedicated to the public domain, eg CC-0. Images which do not meet these open licence requirements, or where attribution metadata is missing (for example, the source link is not provided) will be deleted from the wiki\n<\/li>\n<li> Note the &#8220;Back to old form&#8221; link which is used for some images from non-standard &#8216;gratis&#8217; image sites that do not apply Creative Commons Licences (e.g. <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/pixabay.com\/\">Pixabay<\/a>, <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/unsplash.com\/\">Unsplash<\/a> and <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/www.pexels.com\/\">Pexels<\/a>.)\n<\/li>\n<\/ol>\n<div class=\"panel iDevice\">\n\t<div class=\"panel-heading idevice-heading\">\n\t\t<div>\n\t\t\t<img decoding=\"async\" class=\"pedagogicalicon\" alt=\"activity\" src=\"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-content\/themes\/oeru-course\/idevices\/Icon_activity.png\">\n\t\t<\/div>\n\t\t<div>\n\t\t\t<h2>Activity<\/h2>\n\t\t<\/div>\n\t<\/div>\n\t<div class=\"panel-body\">\n\t\t<div class=\"col-md-12\">\n\t\t\t<\/p>\n<p>\n<b>Purpose<\/b>: Practise uploading an image on WikiEducator\n<\/p>\n<ul>\n<li> Navigate to the practice area for images on your <a rel=\"nofollow\" class=\"external text\" href=\"https:\/\/wikieducator.org\/Special:MyPage\/Sandbox\">Sandbox<\/a> page\n<\/li>\n<li> Search for an openly licensed image to use in your course materials or take a photograph and save this to your computer\n<\/li>\n<li> Add the wiki syntax for your image, for example:\n<\/li>\n<\/ul>\n<pre>[[File:Name_of_image_file.png|right|410px]]\n<\/pre>\n<ul>\n<li> Click on <b>Save page<\/b>. If you have done this correctly, you should see a red link\n<\/li>\n<li> Click on the red link and follow the instructions on screen to fill out the metadata, licensing information, and final upload of the image\n<\/li>\n<li> Go back to your page with the image to view\n<\/li>\n<li> Practise changing the placement and size parameters\n<\/li>\n<\/ul>\n<p>\n<\/p>\n<p>\n\t\t<\/div>\n\t<\/div>\n<\/div>\n<p><!-- \nNewPP limit report\nCPU time usage: 0.088 seconds\nReal time usage: 0.099 seconds\nPreprocessor visited node count: 403\/1000000\nPreprocessor generated node count: 1162\/1000000\nPost\u2010expand include size: 8727\/2097152 bytes\nTemplate argument size: 4252\/2097152 bytes\nHighest expansion depth: 7\/40\nExpensive parser function count: 0\/100\n--><\/p>\n<p><!-- Saved in parser cache with key we_en-mw_:pcache:idhash:189466-0!*!*!!en!2!* and timestamp 20220719015416 and revision id 1097283\n -->\n<\/div>\n<div class=\"visualClear\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"row\">\n<div class=\"col-md-12\">\n<ul class=\"pager\">\n<li class=\"previous\">\n            <a href=\"\/edt4ol\/learning-challenges\/intermediate-wiki-skills\/welcome-to-class\">\u2190 Previous<\/a>\n          <\/li>\n<li class=\"next\">\n            <a href=\"\/edt4ol\/learning-challenges\/intermediate-wiki-skills\/image-metadata-and-alt-descriptions\">Next \u2192<\/a>\n          <\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<div id=\"wenote-ids\"><script type='text\/javascript' id='wenotes-ids'>\n    var WEnotesSite = \"https:\/\/wikieducator.org\";\n    var WEnotesPath = \"\/EDT4OL\/Intermediate_wiki_skills\/images\";\n    var WEnotesSiteID = \"0e3d258fbd36841f92259eefcd41d5e9\";\n    var WEnotesPathID = \"6a6f3072cbbdf8aee285602b8ce87892\";\n    var WEnotesIDs = { site: \"https:\/\/wikieducator.org\", path: \"\/EDT4OL\/Intermediate_wiki_skills\/images\", site_id: \"0e3d258fbd36841f92259eefcd41d5e9\", path_id: \"6a6f3072cbbdf8aee285602b8ce87892\" };\n<\/script><\/div>\n<\/div>\n<footer><\/footer>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Photographs, charts, and diagrams can often be used effectively in online learning materials to communicate complex and\/or multiple ideas, and to improve visual aesthetics. Online course developers therefore need to know how to: upload images legally, and manipulate the display (position and size) of images on published websites. Importantly, course developers must respect the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":17799,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17805","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/pages\/17805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/comments?post=17805"}],"version-history":[{"count":1,"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/pages\/17805\/revisions"}],"predecessor-version":[{"id":17806,"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/pages\/17805\/revisions\/17806"}],"up":[{"embeddable":true,"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/pages\/17799"}],"wp:attachment":[{"href":"https:\/\/pacificopencourses.col.org\/edt4ol\/wp-json\/wp\/v2\/media?parent=17805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}