{"id":176,"date":"2016-06-29T15:09:33","date_gmt":"2016-06-29T19:09:33","guid":{"rendered":"http:\/\/carleton.ca\/cms-help\/?page_id=176"},"modified":"2022-03-03T09:23:44","modified_gmt":"2022-03-03T14:23:44","slug":"images","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/","title":{"rendered":"Images"},"content":{"rendered":"<h2>Step-by-Step<\/h2>\n<h3>Inserting an image to a page or post<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-1400 size-thumbnail aligncenter\" src=\"https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-3.04.32-PM-160x53.png\" alt=\"\" width=\"160\" height=\"53\" srcset=\"https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-3.04.32-PM-160x53.png 160w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-3.04.32-PM.png 228w\" sizes=\"(max-width: 160px) 100vw, 160px\" \/><\/p>\n<ol>\n<li>From your page\/post, select <strong>Add Media<br \/>\n<\/strong><\/li>\n<li>You have the options to:\n<ol>\n<li>Upload from your own device under the <strong>Upload Files<\/strong> tab<\/li>\n<li>Select an image from <a href=\"https:\/\/carleton.ca\/cms-help\/advanced-training\/module-2-media\/media-library\/\">the media library<\/a> under the <strong>Media Library<\/strong> tab<\/li>\n<\/ol>\n<\/li>\n<li>Click <strong>Insert to Page<\/strong><\/li>\n<\/ol>\n<h3>Image Settings<\/h3>\n<p>To change the image settings, open the <strong>Image Details<\/strong> window by clicking on the image, then clicking <strong>Edit<\/strong>. From the <strong>Image Details<\/strong> window, you can edit:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1399 size-large\" src=\"https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.09.33-PM-400x256.png\" alt=\"\" width=\"400\" height=\"256\" srcset=\"https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.09.33-PM-400x256.png 400w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.09.33-PM-240x153.png 240w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.09.33-PM-160x102.png 160w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.09.33-PM-768x491.png 768w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.09.33-PM-360x230.png 360w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.09.33-PM.png 1280w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/p>\n<ol>\n<li><strong>Alternative Text<\/strong> and <strong>Caption<\/strong><\/li>\n<li><strong>Align<\/strong> \u2013 Left, Centre, Right or None<\/li>\n<li><strong>Size<\/strong> \u2013 Thumbnail, Medium, Large, Full Size or Custom<\/li>\n<li><strong>Link to<\/strong> \u2013 Media File, Attachment Page, Custom URL or None<\/li>\n<\/ol>\n<p>When you are done editing, click <strong>Update<\/strong>.<\/p>\n<h3>Editing Image<\/h3>\n<p>From the <strong>Image Details<\/strong> window, click <strong>Edit Original<\/strong> to open the <strong>Edit Image<\/strong> window. The <strong>Edit Image<\/strong> window allows you to:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-1398\" src=\"https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.28.10-PM-400x303.png\" alt=\"\" width=\"600\" height=\"454\" srcset=\"https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.28.10-PM-400x303.png 400w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.28.10-PM-240x182.png 240w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.28.10-PM-160x121.png 160w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.28.10-PM-768x581.png 768w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.28.10-PM-1536x1162.png 1536w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.28.10-PM-360x272.png 360w, https:\/\/carleton.ca\/cms-help\/wp-content\/uploads\/Screen-Shot-2022-02-08-at-2.28.10-PM.png 1858w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/p>\n<ol>\n<li>Rotate and flip image<\/li>\n<li>Scale image<\/li>\n<li>Crop image<\/li>\n<\/ol>\n<p>When you are done editing, click <strong>Save<\/strong>.<\/p>\n<h2>Video Tutorial<\/h2>\n<div class=\"content__video\"><iframe loading=\"lazy\" title=\"Module 3: Images\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/jwDaCViZgK8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/div>\n<h3>Transcript<\/h3>\n<div class=\"slideme\"><dl class=\"slideme__list\"><dt class=\"slideme__term\"><a href=\"#slideme-module-3-images\" aria-expanded=\"false\" aria-controls=\"slideme-module-3-images\" class=\"slideme__heading slideme__trigger\">Module 3: Images<\/a><\/dt><dd class=\"slideme__description\" id=\"slideme-module-3-images\" aria-hidden=\"true\"><p><\/p>\n<p>Welcome back to Module 3 of the Basic CMS Training. In this video, we will walk you through images.<\/p>\n<p>To add an image to your page or post, first, click the \u201cAdd Media\u201d button. Here you have the options to choose an image from the Media Library, or upload one from your own device. We will talk more about the Media Library in the Advanced Training Module 2. Now, I will upload an image from my device by selecting \u201cSelect Files\u201d.<\/p>\n<p>My image has been uploaded, so now I will click \u201cInsert to Page\u201d.<\/p>\n<p>Now you can make changes to the image settings by clicking on the image, then clicking \u201cEdit\u201d. Here you can add alternative text and a caption to the image. You can also align the image left, centre, right or none; and you can resize the image to thumbnail, medium, large, full size or custom size. You can also add a link to the image. Here, I will align my image centre, change the size to thumbnail, and add a link to the media file. Then, I click \u201cUpdate\u201d.<\/p>\n<p>You can also edit the image itself. Click on the image to open the Image Details window, then click \u201cEdit Original\u201d. Here, you can rotate or flip your image, scale your image and crop it. I am going to rotate my image clockwise, and crop my image. Once you are done, click \u201cSave\u201d.<\/p>\n<p><\/p><\/dd><dl><\/div>\n<h2>Try It Out!<\/h2>\n<p>Now that you have learned how to add and edit images, time to try it out!<\/p>\n<ol>\n<li>Upload an image and add it to your page\/post<\/li>\n<li>Align the image left, and resize it to large<\/li>\n<li>Add a custom link to the image<\/li>\n<li>Crop and rotate the image<\/li>\n<\/ol>\n\n<div class=\"u-center-text\">\n\t<p>\n\t\t<a class=\"button__red button__red--solid\" href=\"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/lists\/\"  rel=\"noopener noreferrer\">Next: Lists<\/a>\n\t<\/p>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Step-by-Step Inserting an image to a page or post From your page\/post, select Add Media You have the options to: Upload from your own device under the Upload Files tab Select an image from the media library under the Media Library tab Click Insert to Page Image Settings To change the image settings, open the [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":848,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"","_relevanssi_noindex_reason":"","_mi_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Images - Carleton CMS Help Centre<\/title>\n<meta name=\"description\" content=\"Step-by-Step Inserting an image to a page or post From your page\/post, select Add Media You have the options to: Upload from your own device under the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/\",\"url\":\"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/\",\"name\":\"Images - Carleton CMS Help Centre\",\"isPartOf\":{\"@id\":\"https:\/\/carleton.ca\/cms-help\/#website\"},\"datePublished\":\"2016-06-29T19:09:33+00:00\",\"dateModified\":\"2022-03-03T14:23:44+00:00\",\"description\":\"Step-by-Step Inserting an image to a page or post From your page\/post, select Add Media You have the options to: Upload from your own device under the\",\"breadcrumb\":{\"@id\":\"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/carleton.ca\/cms-help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Basic Training\",\"item\":\"https:\/\/carleton.ca\/cms-help\/basic-training\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Module 3: Post Elements\",\"item\":\"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Images\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/carleton.ca\/cms-help\/#website\",\"url\":\"https:\/\/carleton.ca\/cms-help\/\",\"name\":\"Carleton CMS Help Centre\",\"description\":\"Web Services - Carleton university\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/carleton.ca\/cms-help\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Images - Carleton CMS Help Centre","description":"Step-by-Step Inserting an image to a page or post From your page\/post, select Add Media You have the options to: Upload from your own device under the","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/","url":"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/","name":"Images - Carleton CMS Help Centre","isPartOf":{"@id":"https:\/\/carleton.ca\/cms-help\/#website"},"datePublished":"2016-06-29T19:09:33+00:00","dateModified":"2022-03-03T14:23:44+00:00","description":"Step-by-Step Inserting an image to a page or post From your page\/post, select Add Media You have the options to: Upload from your own device under the","breadcrumb":{"@id":"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/images\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/carleton.ca\/cms-help\/"},{"@type":"ListItem","position":2,"name":"Basic Training","item":"https:\/\/carleton.ca\/cms-help\/basic-training\/"},{"@type":"ListItem","position":3,"name":"Module 3: Post Elements","item":"https:\/\/carleton.ca\/cms-help\/basic-training\/module-3-post-elements\/"},{"@type":"ListItem","position":4,"name":"Images"}]},{"@type":"WebSite","@id":"https:\/\/carleton.ca\/cms-help\/#website","url":"https:\/\/carleton.ca\/cms-help\/","name":"Carleton CMS Help Centre","description":"Web Services - Carleton university","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carleton.ca\/cms-help\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"acf":{"banner_image_type":null,"banner_uploaded_image":null,"banner_hosted_image":null,"banner_opacity":null,"banner_button":null,"banner_buttons":null},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/pages\/176"}],"collection":[{"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/comments?post=176"}],"version-history":[{"count":7,"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/pages\/176\/revisions"}],"predecessor-version":[{"id":1440,"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/pages\/176\/revisions\/1440"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/pages\/848"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cms-help\/wp-json\/wp\/v2\/media?parent=176"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}