{"id":518,"date":"2024-03-11T14:14:38","date_gmt":"2024-03-11T18:14:38","guid":{"rendered":"https:\/\/sites.smith.edu\/project-resources\/?p=518"},"modified":"2026-04-14T11:05:53","modified_gmt":"2026-04-14T15:05:53","slug":"adding-a-zine-with-pdf-viewer","status":"publish","type":"post","link":"https:\/\/sites.smith.edu\/project-resources\/adding-a-zine-with-pdf-viewer\/","title":{"rendered":"Adding a Zine with PDF Viewer"},"content":{"rendered":"\n<p>You can embed a PDF directly in a WordPress post or page, allowing a viewer to look at a Zine, magazine, or other document, like a scan of historical letter. To embed a PDF, you&#8217;ll need to use the <strong>Embed PDF.js viewer<\/strong> block. If you can&#8217;t find the <strong>Embed PDF.js Viewer<\/strong> block in the block inserter, reach out to us for help.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#embed\">Adding the Embed PDF.js Viewer block<\/a><\/li>\n\n\n\n<li><a href=\"#details\">Adding a transcript using the Details block<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/sites.smith.edu\/project-resources\/swg150-featuredimage\/\" data-type=\"post\" data-id=\"520\">Add a featured image to your page<\/a> (opens in a new tab)<\/li>\n<\/ul>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>Example Embedded Zine<\/summary>\n<div class=\"wp-block-pdfjsblock-pdfjs-embed pdfjs-wrapper\"><\/div>\n<\/details>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"embed\">Adding the <em>Embed PDF.js Viewer<\/em> block<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the page or post where you&#8217;d like to add your PDF<\/li>\n\n\n\n<li>Open the Block inserter by selecting the Block Inserter button <\/li>\n\n\n\n<li>Search for PDF, then choose <em>Embed PDF.js Viewer<\/em><br><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"176\" class=\"wp-image-711\" style=\"width: 250px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-20-24.png\" alt=\"The WordPress block inserter displaying the Embed PDF.js Viewer block\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-20-24.png 350w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-20-24-300x212.png 300w\" sizes=\"auto, (max-width: 250px) 100vw, 250px\" \/><\/li>\n\n\n\n<li>The <strong>PDF.js Embed<\/strong> block will be added to the editor<\/li>\n<\/ol>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Adding your PDF<\/h2>\n\n\n\n<p>Once you have the <em>Embed PDF.js Viewer<\/em> block added, you can add your PDF.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select the Choose PDF button in the top corner of the block<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"476\" class=\"wp-image-712\" style=\"width: 350px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-21-13.png\" alt=\"The PDF.js Embed block with a red arrow indicating the Choose PDF button\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-21-13.png 601w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-21-13-221x300.png 221w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-21-13-400x544.png 400w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/li>\n\n\n\n<li>When the Select or Upload Media box opens, drag and drop your PDF into the window or choose <strong>Select File<\/strong> to upload your PDF.  <\/li>\n\n\n\n<li>After your PDF has finished uploading, make sure the checkbox in the upper right corner is selected and then choose the <strong>Select<\/strong> button in the lower right corner.<img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"297\" class=\"wp-image-713\" style=\"width: 500px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-22-31.png\" alt=\"The Media library and submit button\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-22-31.png 1389w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-22-31-300x178.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-22-31-1024x607.png 1024w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-22-31-768x456.png 768w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-22-31-940x558.png 940w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-19_15-22-31-400x237.png 400w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/li>\n<\/ol>\n\n\n\n<p>Success! Your PDF is now embedded in your post, but you&#8217;ll need to <a href=\"#preview\">preview<\/a> your page to look at it.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"preview\">How to Preview your PDF<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Choose the Preview icon (the laptop next to publish).<br><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"50\" class=\"wp-image-714\" style=\"width: 350px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-20_11-15-04-copy.png\" alt=\"The preview option in the wordpress toolbar\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-20_11-15-04-copy.png 615w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-20_11-15-04-copy-300x43.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-20_11-15-04-copy-400x57.png 400w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/li>\n\n\n\n<li>Choose <em><strong>Preview in new tab <\/strong><\/em>to open a new window.  <br><img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"263\" class=\"wp-image-715\" style=\"width: 450px;\" src=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-20_11-15-04.png\" alt=\"Choose the Preview in a new tab link\" srcset=\"https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-20_11-15-04.png 615w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-20_11-15-04-300x176.png 300w, https:\/\/sites.smith.edu\/project-resources\/wp-content\/uploads\/sites\/1047\/2024\/03\/2024-02-20_11-15-04-400x234.png 400w\" sizes=\"auto, (max-width: 450px) 100vw, 450px\" \/><\/li>\n\n\n\n<li>Your PDF should be visible in the new window.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"details\">Adding a transcript using the Details block<\/h2>\n\n\n\n<p class=\"has-medium-font-size\">You can include a transcript of your zine using the Details block, which allows you to create an accordion or dropdown feature with content that your viewer can open and close. You can also control whether the transcript is open or closed when a visitor first looks at your page.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">To add the details block<\/h4>\n\n\n\n<ol class=\"wp-block-list has-medium-font-size\">\n<li>Navigate to your WordPress post or page.<\/li>\n\n\n\n<li>Use the Add Block icon to open the block inserter and search for Details to add the Details block.<br><img decoding=\"async\" class=\"wp-image-782\" style=\"width: 250px;\" src=\"https:\/\/sites.smith.edu\/wp-content\/uploads\/2024\/03\/2024-01-24_11-27-25.png\" alt=\"The block inserter with the Details block highlighted\"><\/li>\n\n\n\n<li>The details block will be added to your post. <\/li>\n<\/ol>\n\n\n\n<p class=\"has-medium-font-size\">You can find more information on configuring the Details block at <a href=\"https:\/\/wordpress.org\/documentation\/article\/details-block\/\">Details Block<\/a> on WordPress.org.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>You can embed a PDF directly in a WordPress post or page, allowing a viewer to look at a Zine, magazine, or other document, like a scan of historical letter. To embed a PDF, you&#8217;ll need to use the Embed PDF.js viewer block. If you can&#8217;t find the Embed PDF.js Viewer block in the block [&hellip;]<\/p>\n","protected":false},"author":5691,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[13,8],"class_list":["post-518","post","type-post","status-publish","format-standard","hentry","category-class-instructions","tag-pdf-viewer","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/518","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=518"}],"version-history":[{"count":12,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/518\/revisions"}],"predecessor-version":[{"id":2786,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/posts\/518\/revisions\/2786"}],"wp:attachment":[{"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/media?parent=518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/categories?post=518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.smith.edu\/project-resources\/wp-json\/wp\/v2\/tags?post=518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}