{"id":423,"date":"2022-09-06T15:48:22","date_gmt":"2022-09-06T19:48:22","guid":{"rendered":"http:\/\/wpdocs.bu.edu\/bu-stories\/?page_id=423"},"modified":"2023-03-02T16:07:23","modified_gmt":"2023-03-02T21:07:23","slug":"shortcodes","status":"publish","type":"page","link":"https:\/\/wpdocs.bu.edu\/bu-stories\/shortcodes\/","title":{"rendered":"Shortcodes"},"content":{"rendered":"\n<p>BU Stories includes a shortcode to promote stories within your site&#8217;s content, making it easy to surface relevant stories throughout your website.<\/p>\n\n\n\n<h2>Utilizing Shortcodes<\/h2>\n\n\n\n<p>Use the <code>[bu-stories]<\/code> shortcode to display a story&#8217;s cover page and link to the full story. The shortcode supports multiple stories. For helpful tips on using these shortcodes, see examples below.<\/p>\n\n\n\n<h3>Feature one BU story aligned to the right<\/h3>\n\n\n\n<p><code>[bu-stories ids=\"#\" align=\"right\"]<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"806\" src=\"\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.19.19-PM-1024x806.png\" alt=\"\" class=\"wp-image-439\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.19.19-PM-1024x806.png 1024w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.19.19-PM-636x501.png 636w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.19.19-PM-768x605.png 768w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.19.19-PM-1536x1209.png 1536w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.19.19-PM.png 1616w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>An example of content with a right-aligned BU Story shortcode.<\/em><\/figcaption><\/figure>\n\n\n\n<h3>Feature one BU story using a circle template<\/h3>\n\n\n\n<p><code>[bu-stories ids=\"#\" template=\"shortcode-bu-stories-circle\"]<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"783\" src=\"\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.21.26-PM-1024x783.png\" alt=\"\" class=\"wp-image-443\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.21.26-PM-1024x783.png 1024w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.21.26-PM-636x486.png 636w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.21.26-PM-768x587.png 768w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.21.26-PM-1536x1175.png 1536w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.21.26-PM.png 1608w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>An example of content with a BU Story shortcode using the circle template. Note that by default, shortcodes will be centered if no alignment is specified.<\/em> <em>Certain layouts will display the Featured Image and title instead of the cover page.<\/em><\/figcaption><\/figure>\n\n\n\n<h3>Feature multiple BU stories<\/h3>\n\n\n\n<p><code>[bu-stories max=\"3\"]<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"960\" src=\"\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.34.35-PM-1024x960.png\" alt=\"\" class=\"wp-image-447\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.34.35-PM-1024x960.png 1024w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.34.35-PM-636x596.png 636w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.34.35-PM-768x720.png 768w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.34.35-PM-1536x1439.png 1536w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-2.34.35-PM.png 1558w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Shortcode displaying multiple BU Stories. Note that at certain widths and layouts, the shortcode will pull in the Story&#8217;s Featured Image and title instead of the cover page.<\/em><\/figcaption><\/figure>\n\n\n\n<h3>Feature two BU stories<\/h3>\n\n\n\n<p><code>[bu-stories max=\"2\"]<\/code><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"951\" height=\"1024\" src=\"\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-3.01.49-PM-951x1024.png\" alt=\"\" class=\"wp-image-452\" srcset=\"https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-3.01.49-PM-951x1024.png 951w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-3.01.49-PM-591x636.png 591w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-3.01.49-PM-768x827.png 768w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-3.01.49-PM-1427x1536.png 1427w, https:\/\/wpdocs.bu.edu\/bu-stories\/files\/2023\/03\/Screen-Shot-2023-03-02-at-3.01.49-PM.png 1564w\" sizes=\"(max-width: 951px) 100vw, 951px\" \/><figcaption><em>Shortcode displaying two BU Stories.<\/em><\/figcaption><\/figure>\n\n\n\n\t<div\n\t\tclass=\"wp-block-bu-collapsible js-wp-block-bu-collapsible is-open icon-style-plus-minus is-style-plain\"\n\t\tstyle=\"\"\n\t\tid=\"bu-collapsible-4d879b2f\"\n\t\tdata-default-open=\"false\"\n\t>\n\t\t<h2 class=\"bu-collapsible-heading\">\n\t\t\t\t\t\t\t<button class=\"bu-block-collapsible-toggle js-bu-block-collapsible-toggle\" id=\"bu-collapsible-4d879b2f-toggle\">\n\t\t\t\t\tAvailable Options\t\t\t\t<\/button>\n\t\t\t\t\t<\/h2>\n\t\t\t\t<div class=\"bu-block-collapsible-content js-bu-block-collapsible-content\" id=\"bu-collapsible-4d879b2f-panel\">\n\t\t\t\n\n<ul><li><strong>max:<\/strong> a maximum # of story posts to show<\/li><li><strong>ids:<\/strong> the specific story post ids that the user wants to show<\/li><li><strong>type:<\/strong> allows for random story posts to be shown<\/li><li><strong>categoriesin:<\/strong> return posts found in at least 1 category, by slug(s), comma separated<\/li><li><strong>categoriesand:<\/strong> return posts found in all categories, by slug(s), comma separated<\/li><li><strong>template:<\/strong> use a specific template partial to show the shortcode content in (e.g., shortcode-bu-stories-circle)<\/li><li><strong>alignment:<\/strong> allows the content to have a style for alignment assigned. Can accept the values: left, center, right<\/li><\/ul>\n\n\t\t<\/div>\n\t<\/div>\n\n\t\n\n\n\t<div\n\t\tclass=\"wp-block-bu-collapsible js-wp-block-bu-collapsible is-open icon-style-plus-minus is-style-plain\"\n\t\tstyle=\"\"\n\t\tid=\"bu-collapsible-2bf57fdd\"\n\t\tdata-default-open=\"false\"\n\t>\n\t\t<h2 class=\"bu-collapsible-heading\">\n\t\t\t\t\t\t\t<button class=\"bu-block-collapsible-toggle js-bu-block-collapsible-toggle\" id=\"bu-collapsible-2bf57fdd-toggle\">\n\t\t\t\t\tTroubleshooting Tips\t\t\t\t<\/button>\n\t\t\t\t\t<\/h2>\n\t\t\t\t<div class=\"bu-block-collapsible-content js-bu-block-collapsible-content\" id=\"bu-collapsible-2bf57fdd-panel\">\n\t\t\t\n\n<p><strong>Why isn&#8217;t the shortcode displaying an image?<\/strong><\/p>\n\n\n\n<p>Make sure the story has a Featured Image set. Certain widths and layouts require a Featured Image and won&#8217;t display properly without them.<\/p>\n\n\n\n<p><strong>Why is the title that&#8217;s displaying different from the cover page?<\/strong><\/p>\n\n\n\n<p>Ideally, the story&#8217;s title should be the same as the Heading on your cover page.<\/p>\n\n\n\n<p><strong>How do I find the story ID?<\/strong><\/p>\n\n\n\n<p>Edit the page and look in the URL. It will say something like &#8220;wp-admin\/post.php?post=<strong>27423<\/strong>&amp;action=edit&#8221; &#8211; the bolded numbers are the story ID.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t","protected":false},"excerpt":{"rendered":"<p>BU Stories includes a shortcode to promote stories within your site&#8217;s content, making it easy to surface relevant stories throughout your website. Utilizing Shortcodes Use the [bu-stories] shortcode to display a story&#8217;s cover page and link to the full story. The shortcode supports multiple stories. For helpful tips on using these shortcodes, see examples below. [&hellip;]<\/p>\n","protected":false},"author":3324,"featured_media":0,"parent":0,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/423"}],"collection":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/users\/3324"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/comments?post=423"}],"version-history":[{"count":13,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/423\/revisions"}],"predecessor-version":[{"id":454,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/423\/revisions\/454"}],"wp:attachment":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/media?parent=423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}