{"id":51,"date":"2024-02-05T11:22:59","date_gmt":"2024-02-05T16:22:59","guid":{"rendered":"https:\/\/sites.smith.edu\/project-resources\/?p=51"},"modified":"2025-06-30T16:09:29","modified_gmt":"2025-06-30T20:09:29","slug":"adding-retronews-to-a-post-with-h5p","status":"publish","type":"post","link":"https:\/\/sites.smith.edu\/project-resources\/adding-retronews-to-a-post-with-h5p\/","title":{"rendered":"Adding RetroNews to a Post with H5P"},"content":{"rendered":"\n<p>This page describes how to embed an article or page from RetroNews into a WordPress post.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#collecting-embed\">Collecting the Embed Link<\/a><\/li>\n\n\n\n<li><a href=\"#shortcode\">Add the Shortcode<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"collecting-embed\"><strong>Collecting the Embed Link<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to <a href=\"https:\/\/ly.smith.edu\/ef\/db00062\">RetroNews<\/a> via the <a href=\"https:\/\/libguides.smith.edu\/french\/news\">Library website<\/a><\/li>\n\n\n\n<li>Search RetroNews for your article\n<ul class=\"wp-block-list\">\n<li>Note: You won\u2019t be able to use saved extracts, so make sure you\u2019re able to find your article again in the RetroNews interface.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>The RetroNews interface has a toolbar with several options for saving and adding content<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"745\" height=\"98\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_13-47-24.png\" alt=\"\" class=\"wp-image-57\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_13-47-24.png 745w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_13-47-24-300x39.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_13-47-24-400x53.png 400w\" sizes=\"auto, (max-width: 745px) 100vw, 745px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>To embed the entire page<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open your article and look for the <strong>Int\u00e9grer<\/strong> &lt; &gt; (embed) symbol in the RetroNews viewer <img loading=\"lazy\" decoding=\"async\" width=\"93\" height=\"89\" class=\"wp-image-58\" style=\"width: 93px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_13-47-07.png\" alt=\"Embed Icon\"><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>To embed just a section of the article<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open your article and look for the <strong>Extraire<\/strong> icon <img loading=\"lazy\" decoding=\"async\" width=\"95\" height=\"91\" class=\"wp-image-59\" style=\"width: 95px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_13-43-11.png\" alt=\"Extraire icon\"><\/li>\n\n\n\n<li>Select the Extrarie icon to open the tool and choose <strong>Int\u00e9grer<\/strong>\n<ul class=\"wp-block-list\">\n<li>This will open the <strong>Int\u00e9grer<\/strong> panel with additional settings that <em>should<\/em> display the section of the article you\u2019d like to share.\n<ul class=\"wp-block-list\">\n<li>Note: Embedding just a section doesn\u2019t seem to work for all articles, so feel free to <a href=\"mailto:rkeyel@smith.edu\">reach out<\/a> if you need help!<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>You will need three things from the embed code&nbsp;<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The width<\/li>\n\n\n\n<li>The height<\/li>\n\n\n\n<li>The link by itself, from the first quote to the second quote<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"873\" height=\"235\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-01-24_14-01-54.png\" alt=\"The RetroNews inegrer interface with the width, height, and link circled\" class=\"wp-image-56\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-01-24_14-01-54.png 873w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-01-24_14-01-54-300x81.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-01-24_14-01-54-768x207.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-01-24_14-01-54-400x108.png 400w\" sizes=\"auto, (max-width: 873px) 100vw, 873px\" \/><\/figure>\n\n\n\n<p><strong>You can get this information in few ways:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Copy the code from the embedder and paste it into a google doc or other document, then copy what you need<\/li>\n\n\n\n<li>Open a new tab and skip down to the directions for setting up an iframe below, then copy the information as you need it<\/li>\n\n\n\n<li>Some other option you like better!\n<ol class=\"wp-block-list\">\n<li>Note: The beginning of the link needs to start with: <strong>https:\/\/www.retronews.fr\/embed-journal\/<\/strong><\/li>\n\n\n\n<li>Links formatted with: <strong>https:\/\/www-retronews-fr.libproxy.smith.edu\/ <\/strong>will not work because of the library proxy link.&nbsp;<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Embed the article using H5P\u2019s iframe embedder&nbsp;<\/strong><\/h2>\n\n\n\n<p>Once you have the link, height, and width saved or ready in another tab, it\u2019s time to create your embedded article.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to the WordPress dashboard of your site.<\/li>\n\n\n\n<li>In the main navigation, on the left of the page, select H5P Content. The <em>All H5P Content window will open<\/em>. <img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"34\" class=\"wp-image-63\" style=\"width: 150px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-06-22_09-40-43.png\" alt=\"H5P Content link\"><br><\/li>\n\n\n\n<li>From the <em>All H5P content<\/em> list, choose <strong>iframe Embedder<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"375\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_14-22-50-1024x375.png\" alt=\"The H5P Content Hub displaying the iframe embedder option\" class=\"wp-image-60\" style=\"aspect-ratio:2.7306666666666666;width:573px;height:auto\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_14-22-50-1024x375.png 1024w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_14-22-50-300x110.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_14-22-50-768x281.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_14-22-50-940x344.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_14-22-50-400x146.png 400w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-02-01_14-22-50.png 1213w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"4\">\n<li>The iframe Embedder window will open<\/li>\n\n\n\n<li>In the iframe Embedder window, fill out each field.&nbsp;<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"985\" height=\"849\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-01-24_13-57-26.png\" alt=\"The iframe embedder content type window\" class=\"wp-image-61\" style=\"aspect-ratio:1.160188457008245\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-01-24_13-57-26.png 985w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-01-24_13-57-26-300x259.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-01-24_13-57-26-768x662.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-01-24_13-57-26-940x810.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2024-01-24_13-57-26-400x345.png 400w\" sizes=\"auto, (max-width: 985px) 100vw, 985px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<ul class=\"wp-block-list\">\n<li><strong>Title<\/strong>: A title you\u2019ll be able to recognize later. This won\u2019t appear on your page, but it will appear on the list of H5P content.\n<ul class=\"wp-block-list\">\n<li>Tip: You can search the list, so choose a title that will be easy to find, like your last name and a short citation, e.g. <em>\u201cSmith &#8211; NY Daily News, Jan 22 1918\u201d<\/em><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Width<\/strong>: The width from RetroNews<\/li>\n\n\n\n<li><strong>Minimum Width<\/strong>: The <strong>width<\/strong> from RetroNews (yup, the same one)<\/li>\n\n\n\n<li><strong>Height<\/strong>: The <strong>height<\/strong> from RetroNews\n<ul class=\"wp-block-list\">\n<li>Note: You can also change the height and width to display more of the embedded article by changing the height and width in these fields. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Source<\/strong>: The <strong>link<\/strong> you copied from RetroNews<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\">\n<li>Select <strong>Create<\/strong> in the upper right corner<\/li>\n\n\n\n<li>The page will refresh (be patient! It sometimes take awhile)&nbsp;<\/li>\n<\/ol>\n\n\n\n<p>You\u2019ve successfully saved your article! <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"shortcode\"><strong>Add the Shortcode to the Post or Page<\/strong><\/h2>\n\n\n\n<p>The last step is to add the article to your WordPress page or post. <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Copy the short code displayed in the block in the top corner of your new iframe<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"226\" class=\"wp-image-64\" style=\"width: 350px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-06-22_09-41-23.png\" alt=\"H5P Shortcode window\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-06-22_09-41-23.png 425w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-06-22_09-41-23-300x194.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-06-22_09-41-23-400x259.png 400w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/li>\n\n\n\n<li>Navigate to the post or page where you would like to embed your article.<\/li>\n\n\n\n<li>In the Block editor workspace, add a new paragraph block wherever you&#8217;d like the article to appear on your page.<\/li>\n\n\n\n<li>Paste the shortcode into the new paragraph block.<\/li>\n\n\n\n<li>To preview your new article, select <strong>the laptop icon<\/strong> from the top navigation bar, then select Preview in new tab.<img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"237\" class=\"wp-image-65\" style=\"width: 400px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-11-27_10-31-19.png\" alt=\"Preview in a new tab\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-11-27_10-31-19.png 449w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-11-27_10-31-19-300x178.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/02\/2023-11-27_10-31-19-400x237.png 400w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/li>\n\n\n\n<li>When you are finished adding content, choose <strong>Save draft<\/strong> or <strong>Publish <\/strong>to save your work.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:90px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-text-align-right\">Return to <a href=\"https:\/\/sites.smith.edu\/frn372-fa24\/\" data-type=\"link\" data-id=\"https:\/\/sites.smith.edu\/frn372-sp24\/\">FRN372<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This page describes how to embed an article or page from RetroNews into a WordPress post. Collecting the Embed Link To embed the entire page To embed just a section of the article You will need three things from the embed code&nbsp; You can get this information in few ways: Embed the article using H5P\u2019s [&hellip;]<\/p>\n","protected":false},"author":5691,"featured_media":163,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,26],"tags":[5],"class_list":["post-51","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-class-instructions","category-h5p","tag-frn372"],"_links":{"self":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/51","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/users\/5691"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/comments?post=51"}],"version-history":[{"count":13,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/51\/revisions"}],"predecessor-version":[{"id":986,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/51\/revisions\/986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/media\/163"}],"wp:attachment":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/media?parent=51"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/categories?post=51"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/tags?post=51"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}