{"id":346,"date":"2019-07-24T18:03:26","date_gmt":"2019-07-24T18:03:26","guid":{"rendered":"http:\/\/sites.monroecc.edu\/web-standards\/?page_id=346"},"modified":"2023-05-03T17:56:13","modified_gmt":"2023-05-03T17:56:13","slug":"advanced-typo3-editing-images-and-more","status":"publish","type":"page","link":"https:\/\/sites.monroecc.edu\/web-standards\/training\/typo3-content-management\/advanced-typo3-editing-images-and-more\/","title":{"rendered":"Advanced TYPO3 Editing \u2013 Images &#038; More"},"content":{"rendered":"<h1>Advanced TYPO3 Editing &#8211; Images &amp; More<\/h1>\n<ul><li><a title=\"Directs viewer to an internal page\" href=\"https:\/\/sites.monroecc.edu\/web-standards\/before-you-begin-a-note-about-messing-things-up\/\"><strong>Before you begin, a note about messing things up!<\/strong><\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#images\">Images<\/a>\n<ul><li><a title=\"Directs viewer to a section on this page\" href=\"#a_few_words_about_images\">A Few Words about images<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#image_editing\">Image Editing<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#image_positioning\">Image Positioning<\/a><\/li>\n<\/ul><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#other_formatting_options\">Other Formatting Options<\/a>\n<ul><li><a title=\"Directs viewer to a section on this page\" href=\"#alerts\">Alerts<\/a><\/li>\n<\/ul><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#adding_content_elements\">Adding Content Elements<\/a>\n<ul><li><a title=\"Directs viewer to a section on this page\" href=\"#create_content_element\">Create a Content Element<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#copy_content_element\">Copy a Content Element<\/a><\/li>\n<\/ul><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#updating_left_hand_navigation\">Updating a link in the Left-hand Navigation<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#embedding_videos\">Embedding Videos in TYPO3<\/a>\n<ul><li><a title=\"Directs viewer to a section on this page\" href=\"#embedding_ensemble\">Embedding Yuja Media Videos<\/a><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#embedding_youtube\">Embedding Youtube Videos<\/a><\/li>\n<\/ul><\/li>\n\t<li><a title=\"Directs viewer to a section on this page\" href=\"#move_a_page\">How to Move a Page in the Navigation<\/a><\/li>\n<\/ul><h2><a id=\"images\"><\/a>Images<\/h2>\n<h2><a id=\"a_few_words_about_images\"><\/a>A Few Words about Images<\/h2>\n<p>Before adding an image to your site, you should ask yourself whether it is required to achieve the effect you are after. A well-placed image can communicate more information than a thousand words. Too many images can cloud your message and affect web performance.<\/p>\n<p>As there are many aspects to selecting and sizing images, we welcome your requests.\u00a0 The web services team can assist you when you need to change an image or wish to add an image to your web pages.<\/p>\n<p>When selecting images, consider:<\/p>\n<ul><li><strong>Message <\/strong>\u2013 What message does this image give your audience? Does it add something valuable to the page, and to the web experience?<\/li>\n\t<li><strong>Quality<\/strong> &#8212; Does the image have strong color, good focus, and composition? Is it strong, clear, and of high, professional quality?<\/li>\n\t<li><strong>Layout and Size<\/strong> \u2013 Will the image fit into the space available for it<\/li>\n\t<li><strong>Copyright<\/strong> \u2013 Do you have the full rights to use the image as your own? If it\u2019s your own image, do you have the permission of the photo\u2019s subjects to post the image publicly? Remember that copyright laws and professional courtesy mean that images downloaded from the web \u2013 even via Google searches and the like \u2013 aren\u2019t necessarily available for you to use.<\/li>\n\t<li><strong>Questions?<\/strong> Talk to the Web team: we can help.<\/li>\n<\/ul><p>Adding images to your web pages builds off of skills you have already developed in uploading files and inserting links.<\/p>\n<p>First, you will need to upload your image. You can follow the <a title=\"Opens internal link in new window\" href=\"https:\/\/sites.monroecc.edu\/web-standards\/training\/typo3-content-management\/#adding_document_and_image_files\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Adding Documents\/files to TYPO3 Workspaces<\/strong><\/a> upload directions in the <strong>TYPO3 Editing Guide<\/strong>, but select the Images folder rather than the Documents folder.<\/p>\n<ol><li>Open your Content element and then select <strong>Text &amp; Images<\/strong> or <strong>Images<\/strong> for <strong>Type<\/strong> from the drop-down list <em>(as pictured in Figure 1).<\/em><br><em>There are more types that are beyond this guide.<\/em><br>\n<figure id=\"attachment_1866\" aria-describedby=\"caption-attachment-1866\" style=\"width: 241px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1866 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/text-and-images-dropdown-figure-1.png\" alt=\"Figure 1\" width=\"241\" height=\"273\"><figcaption id=\"caption-attachment-1866\" class=\"wp-caption-text\">Figure 1<\/figcaption><\/figure>\n<\/li>\n\t<li>When prompted to, save to refresh the display, click OK <em>(as pictured in Figure 2).<\/em><br>\n<figure id=\"attachment_1867\" aria-describedby=\"caption-attachment-1867\" style=\"width: 560px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1867 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/refresh-required-figure-2.png\" alt=\"Figure 2\" width=\"560\" height=\"120\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/refresh-required-figure-2.png 560w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/refresh-required-figure-2-300x64.png 300w\" sizes=\"auto, (max-width: 560px) 100vw, 560px\" \/><figcaption id=\"caption-attachment-1867\" class=\"wp-caption-text\">Figure 2<\/figcaption><\/figure>\n<strong>A new Images tab will appear for the Content Element. This is where you will link your image.<br><br><\/strong><\/li>\n\t<li>Click on Images tab <em>(as pictured in Figure 3).<\/em><br>\n<figure id=\"attachment_1869\" aria-describedby=\"caption-attachment-1869\" style=\"width: 375px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1869 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/images-tab-figure-3-1.png\" alt=\"Figure 3\" width=\"375\" height=\"150\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/images-tab-figure-3-1.png 375w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/images-tab-figure-3-1-300x120.png 300w\" sizes=\"auto, (max-width: 375px) 100vw, 375px\" \/><figcaption id=\"caption-attachment-1869\" class=\"wp-caption-text\">Figure 3<\/figcaption><\/figure>\n<\/li>\n\t<li>Click on Add image <em>(as pictured in Figure 4).<\/em> <em>**You must have uploaded your image to the <strong>filelist <\/strong>already.<br><\/em>\n<figure id=\"attachment_1870\" aria-describedby=\"caption-attachment-1870\" style=\"width: 242px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1870 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/add-image-figure-4.png\" alt=\"Figure 4\" width=\"242\" height=\"169\"><figcaption id=\"caption-attachment-1870\" class=\"wp-caption-text\">Figure 4<\/figcaption><\/figure>\n<\/li>\n\t<li>Go to the appropriate department images folder and select the image that you wish to use by clicking on the filename <em>(as pictured in Figure 5)<\/em>.<br><br>\n<figure id=\"attachment_1872\" aria-describedby=\"caption-attachment-1872\" style=\"width: 805px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1872 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/choose-image-figure-5-1.png\" alt=\"Figure 5\" width=\"805\" height=\"241\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/choose-image-figure-5-1.png 805w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/choose-image-figure-5-1-300x90.png 300w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/choose-image-figure-5-1-768x230.png 768w\" sizes=\"auto, (max-width: 805px) 100vw, 805px\" \/><figcaption id=\"caption-attachment-1872\" class=\"wp-caption-text\">Figure 5<\/figcaption><\/figure>\n<\/li>\n\t<li>The selected image will be added to the content element.<br>\nYou can also add a link to a file or URL here <em>(as pictured in Figure 6).<\/em><br>\n<figure id=\"attachment_1873\" aria-describedby=\"caption-attachment-1873\" style=\"width: 715px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1873 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/add-image-link-figure-6.png\" alt=\"Figure 6\" width=\"715\" height=\"280\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/add-image-link-figure-6.png 715w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/add-image-link-figure-6-300x117.png 300w\" sizes=\"auto, (max-width: 715px) 100vw, 715px\" \/><figcaption id=\"caption-attachment-1873\" class=\"wp-caption-text\">Figure 6<\/figcaption><\/figure>\n<\/li>\n\t<li><strong>Images require Alternative Text for ADA compliance for screen readers. <\/strong>You will add that here.<br>\nClick on the radio button next to <strong>Override<\/strong> under <strong>Alternative Text<\/strong>, and enter a succinct description of the content and function of the image <em>(as pictured in Figure 7).<\/em><br>\n<figure id=\"attachment_1874\" aria-describedby=\"caption-attachment-1874\" style=\"width: 715px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1874 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/alt-text-figure-7.png\" alt=\"Figure 7\" width=\"715\" height=\"280\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/alt-text-figure-7.png 715w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/alt-text-figure-7-300x117.png 300w\" sizes=\"auto, (max-width: 715px) 100vw, 715px\" \/><figcaption id=\"caption-attachment-1874\" class=\"wp-caption-text\">Figure 7<\/figcaption><\/figure>\n\n<p><strong><em>Do not use \u201cimage of\u201d or \u201clink to\u201d or similar phrases. <\/em><\/strong><\/p>\n<p><strong>The Alternative Text should be a succinct description of the image.<\/strong> The Alt Text is read by screen readers in place of images. The text should present the content and function of the images (Webaim.org provides <a title=\"Opens external link in new window\" href=\"https:\/\/webaim.org\/techniques\/alttext\/\" target=\"_blank\" rel=\"noreferrer noopener\">guidelines for alternative image text<\/a>).<br>\nChecking the <strong>Description (Caption)<\/strong> option allows you to add a visible caption to the image.<\/p>\n<\/li>\n<\/ol><h2><a id=\"image_editing\"><\/a>Image Editing<\/h2>\n<p>Although it is best to do image editing before including it in a TYPO3 content element, there is a tool for cropping an image.<\/p>\n<ol><li>Under Image Manipulation, choose Open Editor <em><em>(as pictured in Image 8)<br><br><\/em><\/em>\n<figure id=\"attachment_1882\" aria-describedby=\"caption-attachment-1882\" style=\"width: 306px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1882 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/open-image-editor-figure-10-1.png\" alt=\"Figure 8\" width=\"306\" height=\"224\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/open-image-editor-figure-10-1.png 306w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/open-image-editor-figure-10-1-300x220.png 300w\" sizes=\"auto, (max-width: 306px) 100vw, 306px\" \/><figcaption id=\"caption-attachment-1882\" class=\"wp-caption-text\">Figure 8<\/figcaption><\/figure>\n<\/li>\n\t<li>Move the cursor over an edge of the image until a double arrow appears, hold down the mouse button, drag the image boundary to the desired position, and choose <strong>Accept<\/strong> (as pictured in Figure 9)<br><br>\n<figure id=\"attachment_1879\" aria-describedby=\"caption-attachment-1879\" style=\"width: 640px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1879 size-large\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/image-cropped-1-1024x343.png\" alt=\"Figure 9\" width=\"640\" height=\"214\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/image-cropped-1-1024x343.png 1024w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/image-cropped-1-300x100.png 300w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/image-cropped-1-768x257.png 768w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/image-cropped-1.png 1287w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><figcaption id=\"caption-attachment-1879\" class=\"wp-caption-text\">Figure 9<\/figcaption><\/figure>\n<\/li>\n<\/ol><h2><a id=\"image_positioning\"><\/a>Image Positioning<\/h2>\n<p>Now that you have your image added, you need to adjust its position on the page.<\/p>\n<ol><li>Go to <strong>Gallery Settings<\/strong><br>\nYou will be able to create columns and set the position of your image in the Appearance tab.<\/li>\n\t<li>You can experiment with the Position and Alignment options.<br><em>(as pictured in Figure 10)<\/em><br>\n<figure id=\"attachment_1888\" aria-describedby=\"caption-attachment-1888\" style=\"width: 457px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1888 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/gallery-settings-figure-9-2.png\" alt=\"Figure 10\" width=\"457\" height=\"152\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/gallery-settings-figure-9-2.png 457w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/gallery-settings-figure-9-2-300x100.png 300w\" sizes=\"auto, (max-width: 457px) 100vw, 457px\" \/><figcaption id=\"caption-attachment-1888\" class=\"wp-caption-text\">Figure 10<\/figcaption><\/figure>\n<\/li>\n\t<li><strong>Save and view<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-236 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/06\/save-view.png\" alt=\"save-view icon\" width=\"29\" height=\"27\"> to check your work.<\/li>\n<\/ol><p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-94\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/remember.png\" alt=\"\" width=\"40\" height=\"49\"><strong>Remember to save your work as you go along!<\/strong><\/p>\n<h2><a id=\"other_formatting_options\"><\/a>Other Formatting Options<\/h2>\n<p>If you review the drop-down menus you will see other formatting options.\u00a0 Most of these represent formats that are part of the College\u2019s web design and should be used appropriately to stay within the design.<\/p>\n<h3>Alerts<\/h3>\n<p>Alerts place text that you wish to call attention to within a box.<\/p>\n<ol><li>Select your text.<\/li>\n\t<li>Select <strong>Alerts<\/strong> from the <strong>Formats<\/strong> drop-down menu.<\/li>\n\t<li>Pick one of the alert styles from the drop-down menu.<br><em>(as pictured in Figure 11)<\/em><br>\n<figure id=\"attachment_1900\" aria-describedby=\"caption-attachment-1900\" style=\"width: 451px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1900 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/format-alerts-figure-11.png\" alt=\"Figure 11\" width=\"451\" height=\"343\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/format-alerts-figure-11.png 451w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/format-alerts-figure-11-300x228.png 300w\" sizes=\"auto, (max-width: 451px) 100vw, 451px\" \/><figcaption id=\"caption-attachment-1900\" class=\"wp-caption-text\">Figure 11<\/figcaption><\/figure>\n<\/li>\n\t<li><strong>Save and view<\/strong> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-236\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/06\/save-view.png\" alt=\"save-view icon\" width=\"29\" height=\"27\"> to check your work.<\/li>\n<\/ol><h2><a id=\"adding_content_elements\"><\/a>Adding Content Elements<\/h2>\n<p>You may find that you need to add a new <strong>Content Element<\/strong>.\u00a0 You can <strong>Create<\/strong> a New Content Element or <strong>Copy<\/strong> an existing Content Element.<\/p>\n<h3><a id=\"create_content_element\"><\/a>Create a Content Element<\/h3>\n<ol><li>Select the <strong>Create a New Element<\/strong> icon from within the <strong>Content Block <\/strong><em>(as pictured in Figure 12)<\/em>.<br>\n<figure id=\"attachment_1170\" aria-describedby=\"caption-attachment-1170\" style=\"width: 267px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1170 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/06\/ateg-figure-12.png\" alt=\"Figure 12\" width=\"267\" height=\"56\"><figcaption id=\"caption-attachment-1170\" class=\"wp-caption-text\">Figure 12<\/figcaption><\/figure>\nThere are several <strong>Types of Content Elements<\/strong>.\u00a0 For the most part, you will use <strong>Regular Text Element<\/strong>, <strong>Text &amp; Images<\/strong>, or <strong>Images Only<\/strong>.<\/li>\n\t<li>Select the type that matches what you need <em>(as pictured in Figure 13)<\/em>.<br>\n<figure id=\"attachment_1906\" aria-describedby=\"caption-attachment-1906\" style=\"width: 476px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1906 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/typical-page-content-figure-13.png\" alt=\"Figure 13\" width=\"476\" height=\"265\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/typical-page-content-figure-13.png 476w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/typical-page-content-figure-13-300x167.png 300w\" sizes=\"auto, (max-width: 476px) 100vw, 476px\" \/><figcaption id=\"caption-attachment-1906\" class=\"wp-caption-text\">Figure 13<\/figcaption><\/figure>\n<\/li>\n\t<li>A blank new Content Element will be created on your page. You can now edit as usual <em>(as pictured in Figure 14)<\/em>.\u00a0<br>\n<figure id=\"attachment_1907\" aria-describedby=\"caption-attachment-1907\" style=\"width: 676px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1907 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/full-content-element-figure-14-1.png\" alt=\"Figure 14\" width=\"676\" height=\"624\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/full-content-element-figure-14-1.png 676w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/full-content-element-figure-14-1-300x277.png 300w\" sizes=\"auto, (max-width: 676px) 100vw, 676px\" \/><figcaption id=\"caption-attachment-1907\" class=\"wp-caption-text\">Figure 14<\/figcaption><\/figure>\n<\/li>\n<\/ol><p><em>You should put in a <a href=\"https:\/\/tech.monroecc.edu\/Staff\/Account\/Login?ReturnUrl=%2FStaff%2F\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Technology Request<\/strong><\/a> if you are interested in any of the <strong>Special Elements,<\/strong> <strong>Flexible Content, or Menu<\/strong> elements to receive additional instructions (as pictured in Figure 15).<br><\/em><\/p>\n\n<figure id=\"attachment_1903\" aria-describedby=\"caption-attachment-1903\" style=\"width: 429px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1903 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/varied-elements-figure-15.png\" alt=\"Figure 15\" width=\"429\" height=\"618\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/varied-elements-figure-15.png 429w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/varied-elements-figure-15-208x300.png 208w\" sizes=\"auto, (max-width: 429px) 100vw, 429px\" \/><figcaption id=\"caption-attachment-1903\" class=\"wp-caption-text\">Figure 15<\/figcaption><\/figure>\n\n<h2><a id=\"copy_content_element\"><\/a>Copy a Content Element<\/h2>\n<p>You may want to copy a Content element. To begin:\u00a0<\/p>\n<ol><li>Select the <strong>Copy Element<\/strong> icon. &#8211; \u00a0The screen will refresh <em>(as pictured in Figure 16-1).<\/em><br>\n<figure id=\"attachment_1911\" aria-describedby=\"caption-attachment-1911\" style=\"width: 548px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1911 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/copy-element-figure-16-1.png\" alt=\"Figure 16-1\" width=\"548\" height=\"96\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/copy-element-figure-16-1.png 548w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/copy-element-figure-16-1-300x53.png 300w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><figcaption id=\"caption-attachment-1911\" class=\"wp-caption-text\">Figure 16-1<\/figcaption><\/figure>\n<\/li>\n\t<li>You can now select a <strong>Paste Element <\/strong>icon. Select the <strong>Paste Element<\/strong> icon at the location where you want your new <strong>Content Element <\/strong>to be located on the page <em>(as pictured in Figure 16-2)<\/em>.\u00a0 <br>\n<figure id=\"attachment_1912\" aria-describedby=\"caption-attachment-1912\" style=\"width: 270px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1912 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/paste-element-figure-16-2.png\" alt=\"Figure 16-2\" width=\"270\" height=\"142\"><figcaption id=\"caption-attachment-1912\" class=\"wp-caption-text\">Figure 16-2<\/figcaption><\/figure>\n<\/li>\n\t<li>The copied <strong>Content Element<\/strong> will appear.\u00a0 The copied element will always be hidden <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-519 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/09\/hide-element.png\" alt=\"hide element\" width=\"35\" height=\"35\"> and (copy *) will replace the <strong>Header <\/strong><em>(as pictured in Figure 16-3)<\/em>.<br>\n<figure id=\"attachment_1913\" aria-describedby=\"caption-attachment-1913\" style=\"width: 272px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1913 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/copied-element-figure-16-3.png\" alt=\"Figure 16-3\" width=\"272\" height=\"72\"><figcaption id=\"caption-attachment-1913\" class=\"wp-caption-text\">Figure 16-3<\/figcaption><\/figure>\n<\/li>\n\t<li>Open the <strong>Content Element<\/strong> to edit and go to the <strong>Access<\/strong> tab. Uncheck the box next to <strong>Content Element-Disable<\/strong> and <strong>Save<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-521\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/09\/save-element.png\" alt=\"save element\" width=\"38\" height=\"40\"><\/strong><em>(as pictured in Figure 16-4)<\/em>. Now you can edit your text as usual. <strong><strong><em>Remember to type in a new Header!<br><\/em><\/strong><\/strong>\n<figure id=\"attachment_1914\" aria-describedby=\"caption-attachment-1914\" style=\"width: 486px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1914 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/uncheck-disable-figure-16-4.png\" alt=\"Figure 16-4\" width=\"486\" height=\"117\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/uncheck-disable-figure-16-4.png 486w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/uncheck-disable-figure-16-4-300x72.png 300w\" sizes=\"auto, (max-width: 486px) 100vw, 486px\" \/><figcaption id=\"caption-attachment-1914\" class=\"wp-caption-text\">Figure 16-4<\/figcaption><\/figure>\n<\/li>\n<\/ol><h3><a id=\"updating_left_hand_navigation\"><\/a>Updating a link in the Left-hand Navigation<\/h3>\n<p>At times, it may be necessary to update a link that is in the left-hand navigation. This can be done by all editors.<\/p>\n<p>While logged in to TYPO3, select the page (link) that you need to update <em>(as pictured in Figure 19)<\/em>.<\/p>\n\n<figure id=\"attachment_1198\" aria-describedby=\"caption-attachment-1198\" style=\"width: 242px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1198 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/06\/ateg-figure-19.png\" alt=\"Figure 17\" width=\"242\" height=\"288\"><figcaption id=\"caption-attachment-1198\" class=\"wp-caption-text\">Figure 17<\/figcaption><\/figure>\n\n<p>Click on the pencil next to \u201cEdit page properties\u201d <em>(as pictured in Figure 17-1)<\/em><\/p>\n\n<figure id=\"attachment_1917\" aria-describedby=\"caption-attachment-1917\" style=\"width: 470px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1917 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/edit-page-properties-figure-17-1.png\" alt=\"Figure 17-1\" width=\"470\" height=\"77\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/edit-page-properties-figure-17-1.png 470w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/edit-page-properties-figure-17-1-300x49.png 300w\" sizes=\"auto, (max-width: 470px) 100vw, 470px\" \/><figcaption id=\"caption-attachment-1917\" class=\"wp-caption-text\">Figure 17-1<\/figcaption><\/figure>\n\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-94\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2019\/05\/remember.png\" alt=\"\" width=\"40\" height=\"49\">\u00a0<strong>Note!!<\/strong> Do NOT change page title!<\/p>\n<p>Under the General tab, choose <strong>Link to External URL<\/strong> in the Type dropdown. Scroll to the bottom of the open element and paste the new URL in the URL field. Save and close <em>(as pictured in Figure 17-2)<\/em>.<\/p>\n\n<figure id=\"attachment_1918\" aria-describedby=\"caption-attachment-1918\" style=\"width: 591px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1918 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/replace-url-figure-17-2.png\" alt=\"17-2\" width=\"591\" height=\"301\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/replace-url-figure-17-2.png 591w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/replace-url-figure-17-2-300x153.png 300w\" sizes=\"auto, (max-width: 591px) 100vw, 591px\" \/><figcaption id=\"caption-attachment-1918\" class=\"wp-caption-text\">17-2<\/figcaption><\/figure>\n\n<p>To check if the new URL is correct, select <strong>View<\/strong> to display the department\u2019s page including the left-hand navigation <em>(as pictured in Figure (17-3)<\/em>. Test your edited link. If it works properly, go back to <strong>Workspaces<\/strong> and move the page through the publishing process.<\/p>\n\n<figure id=\"attachment_1920\" aria-describedby=\"caption-attachment-1920\" style=\"width: 96px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1920 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/view-figure-17-3-1.png\" alt=\"17.3\" width=\"96\" height=\"272\"><figcaption id=\"caption-attachment-1920\" class=\"wp-caption-text\">17.3<\/figcaption><\/figure>\n\n<h2><a id=\"embedding_videos\"><\/a>Embedding Videos in TYPO3<\/h2>\n<p>Videos can be embedded in TYPO3 pages (see the <a title=\"Opens internal link in new window\" href=\"https:\/\/www.monroecc.edu\/organizations\/sixthact\/drama-on-demand-video-library\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sixth Act on-demand video library<\/a> for example).<\/p>\n<p>First, create a new content element, then choose the Flexible Content section and select HTML wrapper (as pictured in Figure 18).<\/p>\n\n<figure id=\"attachment_1921\" aria-describedby=\"caption-attachment-1921\" style=\"width: 469px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1921 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/html-wrapper-figure-18.png\" alt=\"Figure 18\" width=\"469\" height=\"349\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/html-wrapper-figure-18.png 469w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/03\/html-wrapper-figure-18-300x223.png 300w\" sizes=\"auto, (max-width: 469px) 100vw, 469px\" \/><figcaption id=\"caption-attachment-1921\" class=\"wp-caption-text\">Figure 18<\/figcaption><\/figure>\n\n<p>Once the Content Element is created, scroll down to the Post HTML section.<\/p>\n<h3><a id=\"embedding_ensemble\"><\/a>Embedding Yuja Media Videos<\/h3>\n<p>In Post HTML section, paste the URL for your video in the Yuja media server that you have received from Instructional Technology (as pictured in Figure 18-1).<\/p>\n\n<figure id=\"attachment_1204\" aria-describedby=\"caption-attachment-1204\" style=\"width: 580px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1204 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/06\/ateg-figure-20-1.png\" alt=\"Figure 18-1\" width=\"580\" height=\"162\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/06\/ateg-figure-20-1.png 580w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/06\/ateg-figure-20-1-300x84.png 300w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><figcaption id=\"caption-attachment-1204\" class=\"wp-caption-text\">Figure 18-1<\/figcaption><\/figure>\n\n<h3><a id=\"embedding_youtube\"><\/a>Embedding Youtube Videos<\/h3>\n<p>You will need to generate the proper URL for the Youtube video that you want to embed.<\/p>\n<ol><li>Go to the Youtube video that you want to embed.<\/li>\n\t<li>At the right corner below the video, click on Share <em>(as pictured in Figure 19)<\/em>.<br>\n<figure id=\"attachment_1948\" aria-describedby=\"caption-attachment-1948\" style=\"width: 643px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1948 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/share-youtube-figure-19.png\" alt=\"Figure 19\" width=\"643\" height=\"87\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/share-youtube-figure-19.png 643w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/share-youtube-figure-19-300x41.png 300w\" sizes=\"auto, (max-width: 643px) 100vw, 643px\" \/><figcaption id=\"caption-attachment-1948\" class=\"wp-caption-text\">Figure 19<\/figcaption><\/figure>\n<\/li>\n\t<li>Click on the Embed icon\u00a0 <em>(as pictured in Figure 19-1)<\/em>.<br>\n<figure id=\"attachment_1949\" aria-describedby=\"caption-attachment-1949\" style=\"width: 491px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1949 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/embed-button-figure-19-1.png\" alt=\"Figure 19-1\" width=\"491\" height=\"190\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/embed-button-figure-19-1.png 491w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/embed-button-figure-19-1-300x116.png 300w\" sizes=\"auto, (max-width: 491px) 100vw, 491px\" \/><figcaption id=\"caption-attachment-1949\" class=\"wp-caption-text\">Figure 19-1<\/figcaption><\/figure>\n<\/li>\n\t<li>Scroll down to the bottom of the Embed Video screen and select copy to get the URL for embedding the video <br><em>(as pictured in Figure 19-2)<\/em>.<br>\n<figure id=\"attachment_1950\" aria-describedby=\"caption-attachment-1950\" style=\"width: 373px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1950 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/copy-code-figure-19-2.png\" alt=\"Figure 19-2\" width=\"373\" height=\"258\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/copy-code-figure-19-2.png 373w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/copy-code-figure-19-2-300x208.png 300w\" sizes=\"auto, (max-width: 373px) 100vw, 373px\" \/><figcaption id=\"caption-attachment-1950\" class=\"wp-caption-text\">Figure 19-2<\/figcaption><\/figure>\n<\/li>\n<\/ol><p>The URL for the Youtube video should look like this:<br><strong>&lt;iframe width=&#8221;560&#8243; height=&#8221;315&#8243; src=&#8221;https:\/\/www.youtube.com\/embed\/8V7BR_X4IFc&#8221; title=&#8221;YouTube video player&#8221; frameborder=&#8221;0&#8243; allow=&#8221;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share&#8221; allowfullscreen&gt;&lt;\/iframe&gt;<\/strong><\/p>\n<h2><a id=\"move_a_page\"><\/a>How to Move a Page in the Navigation:<\/h2>\n<p>First, select Extended view if it is already not enabled.<\/p>\n<ol><li>Select the List of database-records icon.<\/li>\n\t<li>Select the Landing Page in the page tree<\/li>\n\t<li>Check the box before Extended View (if not already selected).<br><em>(as pictured in Figure 20)<\/em><\/li>\n<\/ol>\n\n<figure id=\"attachment_1933\" aria-describedby=\"caption-attachment-1933\" style=\"width: 581px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1933 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/04\/move-page-figure-20.png\" alt=\"Figure 20\" width=\"581\" height=\"330\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/04\/move-page-figure-20.png 581w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/04\/move-page-figure-20-300x170.png 300w\" sizes=\"auto, (max-width: 581px) 100vw, 581px\" \/><figcaption id=\"caption-attachment-1933\" class=\"wp-caption-text\">Figure 20<\/figcaption><\/figure>\n\n<p>Extended View will provide you with options to move pages by either using (a) the up and down arrows or (b) the scissors to cut and then paste in another location <em>(as pictured in Figure 20-1)<\/em>.<\/p>\n\n<figure id=\"attachment_1935\" aria-describedby=\"caption-attachment-1935\" style=\"width: 224px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1935 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/04\/move-options-figure-20-1.png\" alt=\"Figure 20-1\" width=\"224\" height=\"45\"><figcaption id=\"caption-attachment-1935\" class=\"wp-caption-text\">Figure 20-1<\/figcaption><\/figure>\n\n<p>To move a page using the cut-and-paste method, go to the List of database-records module <em>(as pictured in Figure 20-2)<\/em><\/p>\n\n<figure id=\"attachment_1954\" aria-describedby=\"caption-attachment-1954\" style=\"width: 233px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1954 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/list-of-database-records-figure-20-2.png\" alt=\"Figure 20-2\" width=\"233\" height=\"181\"><figcaption id=\"caption-attachment-1954\" class=\"wp-caption-text\">Figure 20-2<\/figcaption><\/figure>\n\n<p>To open the list of pages, select your Landing Page in the Pagetree <em>(as pictured in Figure 20-3)<\/em>.<\/p>\n\n<figure id=\"attachment_1941\" aria-describedby=\"caption-attachment-1941\" style=\"width: 233px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1941 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/04\/select-landing-page-figure-20-3.png\" alt=\"Figure 20-3\" width=\"233\" height=\"143\"><figcaption id=\"caption-attachment-1941\" class=\"wp-caption-text\">Figure 20-3<\/figcaption><\/figure>\n\n<p>Click on the Cut icon in the list of pages for the page that you want to move <em>(as pictured in Figure 20-4)<\/em>.<\/p>\n\n<figure id=\"attachment_1943\" aria-describedby=\"caption-attachment-1943\" style=\"width: 602px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1943 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/04\/move-page-figure-20-4-1.png\" alt=\"Figure 20-4\" width=\"602\" height=\"333\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/04\/move-page-figure-20-4-1.png 602w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/04\/move-page-figure-20-4-1-300x166.png 300w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><figcaption id=\"caption-attachment-1943\" class=\"wp-caption-text\">Figure 20-4<\/figcaption><\/figure>\n\n<p>Your cut page will now show <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1944 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/04\/closed-scissors-icon.png\" alt=\"closed scissors\" width=\"30\" height=\"32\">. All pages will now show <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1945 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/04\/paste-into-or-after-icon.png\" alt=\"paste into or after icons\" width=\"59\" height=\"32\"> Paste Into or Paste After.<\/p>\n<p>Select the location where you want your page and select Paste after (as pictured in Figure 20-5). If you want to create a new subpage, you will need to submit a technology request.<\/p>\n\n<figure id=\"attachment_1956\" aria-describedby=\"caption-attachment-1956\" style=\"width: 624px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1956 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/paste-after-figure-20-5.png\" alt=\"Figure 20-5\" width=\"624\" height=\"139\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/paste-after-figure-20-5.png 624w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2023\/05\/paste-after-figure-20-5-300x67.png 300w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><figcaption id=\"caption-attachment-1956\" class=\"wp-caption-text\">Figure 20-5<\/figcaption><\/figure>\n\n<p>Be sure to click OK on the popup to confirm the page move (as pictured in Figure 20-6).<\/p>\n\n<figure id=\"attachment_1222\" aria-describedby=\"caption-attachment-1222\" style=\"width: 421px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1222 size-full\" src=\"http:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/06\/ateg-figure-21-8.png\" alt=\"Figure 20-6\" width=\"421\" height=\"105\" srcset=\"https:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/06\/ateg-figure-21-8.png 421w, https:\/\/sites.monroecc.edu\/web-standards\/files\/2020\/06\/ateg-figure-21-8-300x75.png 300w\" sizes=\"auto, (max-width: 421px) 100vw, 421px\" \/><figcaption id=\"caption-attachment-1222\" class=\"wp-caption-text\">Figure 20-6<\/figcaption><\/figure>","protected":false},"excerpt":{"rendered":"<p>Advanced TYPO3 Editing &#8211; Images &amp; More Before you begin, a note about messing things up! Images A Few Words about images Image Editing Image Positioning Other Formatting Options Alerts Adding Content Elements Create a Content Element Copy a Content Element Updating a link in the Left-hand Navigation Embedding Videos in TYPO3 Embedding Yuja Media [&#8230;]<\/p>\n","protected":false},"author":128,"featured_media":0,"parent":25,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-346","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages\/346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/users\/128"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/comments?post=346"}],"version-history":[{"count":118,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages\/346\/revisions"}],"predecessor-version":[{"id":1958,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages\/346\/revisions\/1958"}],"up":[{"embeddable":true,"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/pages\/25"}],"wp:attachment":[{"href":"https:\/\/sites.monroecc.edu\/web-standards\/wp-json\/wp\/v2\/media?parent=346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}