  {"id":4649,"date":"2025-01-16T14:33:21","date_gmt":"2025-01-16T19:33:21","guid":{"rendered":"https:\/\/carleton.ca\/cutheme-docs\/?page_id=4649"},"modified":"2025-12-02T10:11:12","modified_gmt":"2025-12-02T15:11:12","slug":"stories","status":"publish","type":"page","link":"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-1-advanced-content-types\/stories\/","title":{"rendered":"Stories"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Stories\n                    <\/h1>\n                \n                                \n                                    \n\n<p>Module 1.6 \u2013 Advanced: Advanced Content: Stories&nbsp;<\/p>\n\n\n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>Stories are a dynamic post type in cuTheme designed to share important updates and news, with a unique visual flair. Each story has a branded banner featuring the 杏吧原创 Wave.<\/p>\n\n\n\n\n<div class=\"w-full max-w-xl mx-auto overflow-hidden bg-white rounded-lg shadow-lg cu-stackedlist cu-component not-contained not-prose\">\n    <h2 class=\"px-6 py-4 text-base font-semibold border-b rounded-t-lg md:text-xl bg-gray-50 text-cu-black-800\">\n        Table of Contents\n    <\/h2>\n    <div class=\"grid cu-scrollto cu-stackedlist--toc cu-stackedlist--1 md:grid-cols-1\">\n            <div class=\"space-y-1\">\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.\n                    <\/span>\n\n                    <a href=\"#step-by-step\" class=\"font-medium hover:underline\">\n                        Step-by-Step\n                    <\/a>\n                <\/div>\n\n                                        <div class=\"space-y-1\">\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.1\n                    <\/span>\n\n                    <a href=\"#add-and-edit-a-new-story\" class=\"font-medium hover:underline\">\n                        Add and Edit a New Story\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.2\n                    <\/span>\n\n                    <a href=\"#categorize-stories\" class=\"font-medium hover:underline\">\n                        Categorize Stories\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.3\n                    <\/span>\n\n                    <a href=\"#featured-image\" class=\"font-medium hover:underline\">\n                        Featured Image\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-10 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        1.4\n                    <\/span>\n\n                    <a href=\"#excerpt\" class=\"font-medium hover:underline\">\n                        Excerpt\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n                            <\/div>\n                    \n            <div class=\"pl-4 text-cu-red-700\">\n                <div class=\"flex gap-2 pb-3 text-base md:text-lg\">\n                    <span class=\"font-light text-cu-black-700\">\n                        2.\n                    <\/span>\n\n                    <a href=\"#try-it-out\" class=\"font-medium hover:underline\">\n                        Try it Out\n                    <\/a>\n                <\/div>\n\n                            <\/div>\n            <\/div>\n\n    <\/div>\n<\/div>\n\n\n\n<h2 id=\"step-by-step\" class=\"wp-block-heading\">Step-by-Step<\/h2>\n\n\n\n<h3 id=\"add-and-edit-a-new-story\" class=\"wp-block-heading\">Add and Edit a New Story<\/h3>\n\n\n\n<p>1. From the dashboard, go to the left side of the screen, hover over <strong class=\"myprefix-text-bold\">Stories<\/strong>, and click on <strong class=\"myprefix-text-bold\">Add New.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"508\" height=\"162\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-16-at-14.21.43@2x.png\" alt=\"Add Story\" class=\"wp-image-4654\" style=\"object-fit:cover;width:371px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-16-at-14.21.43@2x.png 508w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-16-at-14.21.43@2x-320x102.png 320w\" sizes=\"auto, (max-width: 508px) 100vw, 508px\" \/><\/figure>\n\n\n\n<p>3. Add an image by clicking within the banner and then <strong class=\"myprefix-text-bold\">Select Image<\/strong> at the right under block options.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"244\" height=\"126\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-16-at-14.24.22@2x.png\" alt=\"Select Image\" class=\"wp-image-4655\" style=\"width:259px;height:auto\"\/><\/figure>\n\n\n\n<p>The image will appear with the 杏吧原创 wave overlaid.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"390\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-16-at-14.27.33@2x-1024x390.png\" alt=\"Story banner screenshot with 杏吧原创 wave\" class=\"wp-image-4657\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-16-at-14.27.33@2x-1024x390.png 1024w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-16-at-14.27.33@2x-512x195.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-16-at-14.27.33@2x-320x122.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-16-at-14.27.33@2x-768x292.png 768w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-16-at-14.27.33@2x-1536x585.png 1536w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2025\/01\/CleanShot-2025-01-16-at-14.27.33@2x-2048x780.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>4. Give your story a title by clicking <strong class=\"myprefix-text-bold\">Add a Title.<\/strong><\/p>\n\n\n\n<p>5. Add text to the post by typing where it says &#8220;Type \/ to choose block&#8221;. This is a paragraph block. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"831\" height=\"343\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.02.51.png\" alt=\"Title banner screenshot\" class=\"wp-image-244\" style=\"width:609px;height:251px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.02.51.png 831w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.02.51-320x132.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.02.51-512x211.png 512w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.02.51-768x317.png 768w\" sizes=\"auto, (max-width: 831px) 100vw, 831px\" \/><\/figure>\n\n\n\n<p>6. Save a draft or publish your story.<\/p>\n\n\n\n<p>In the top right corner of the content editor screen, you will see buttons that allow you to save draft or publish your content.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"344\" height=\"140\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.18.53@2x.png\" alt=\"Save draft and Publish buttin\" class=\"wp-image-246\" style=\"width:239px;height:97px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.18.53@2x.png 344w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.18.53@2x-320x130.png 320w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/figure>\n\n\n\n<p>Once a story is published, this will change to Update. Use the update to save any changes you make to your page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"190\" height=\"120\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.20.25@2x.png\" alt=\"Update button\" class=\"wp-image-248\" style=\"width:128px;height:81px\"\/><\/figure>\n\n\n\n<p>7. Preview your story.<\/p>\n\n\n\n<p>Click the icon beside the Update button to preview your page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"342\" height=\"184\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.22.05@2x.png\" alt=\"Preview button\" class=\"wp-image-249\" style=\"width:171px;height:92px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.22.05@2x.png 342w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.22.05@2x-320x172.png 320w\" sizes=\"auto, (max-width: 342px) 100vw, 342px\" \/><\/figure>\n\n\n\n<h3 id=\"categorize-stories\" class=\"wp-block-heading\">Categorize Stories<\/h3>\n\n\n\n<p>8. Categorize your post by clicking the &#8220;Add New Category&#8221; link, giving your category a name, and then clicking the <strong class=\"myprefix-text-bold\">Add New Category<\/strong> button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"640\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.43.27@2x.png\" alt=\"Screenshot of dropdown to select category\" class=\"wp-image-267\" style=\"width:220px;height:257px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.43.27@2x.png 548w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.43.27@2x-320x374.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.43.27@2x-512x598.png 512w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/figure>\n\n\n\n<h3 id=\"featured-image\" class=\"wp-block-heading\">Featured Image<\/h3>\n\n\n\n<p>9. Set a featured image for your story. This will show up as a thumbnail when stories are listed on a page:<\/p>\n\n\n\n<p>Click <strong class=\"myprefix-text-bold\">Set featured image<\/strong> and then choose an image from your media library or upload one from your computer.<\/p>\n\n\n\n<p><strong class=\"myprefix-text-bold\"><em class=\"myprefix-text-italic\">Note:<\/em><\/strong> Recommended size for featured image is 600 x 400 pixels<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"318\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.47.33@2x.png\" alt=\"Set featured image\" class=\"wp-image-269\" style=\"width:315px;height:183px\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.47.33@2x.png 548w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.47.33@2x-320x186.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/10\/CleanShot-2023-10-23-at-14.47.33@2x-512x297.png 512w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/figure>\n\n\n\n<h3 id=\"excerpt\" class=\"wp-block-heading\">Excerpt<\/h3>\n\n\n\n<p>10. Add a one to two sentence description of the post by typing in the excerpt box. It will be used to preview the content wherever your stories are listed.<\/p>\n\n\n\n<p>Note this is optional. If the&nbsp;excerpt&nbsp;is empty, one is created automatically using the first 55 words of the Post.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"306\" src=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/12\/CleanShot-2023-12-14-at-11.56.25@2x.png\" alt=\"Post excerpt\" class=\"wp-image-1916\" style=\"width:262px;height:auto\" srcset=\"https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/12\/CleanShot-2023-12-14-at-11.56.25@2x.png 540w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/12\/CleanShot-2023-12-14-at-11.56.25@2x-320x181.png 320w, https:\/\/carleton.ca\/cutheme-docs\/wp-content\/uploads\/sites\/2\/2023\/12\/CleanShot-2023-12-14-at-11.56.25@2x-512x290.png 512w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/figure>\n\n\n\n<h2 id=\"try-it-out\" class=\"wp-block-heading\">Try it Out<\/h2>\n\n\n\n<p>Now that you have learned how to save a draft, publish, and preview your content, it&#8217;s time to try it out!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Add a new story. <\/li>\n\n\n\n<li>Add an image to the banner.<\/li>\n\n\n\n<li>Give it a title and some content.<\/li>\n\n\n\n<li>Save this story as a draft.<\/li>\n\n\n\n<li>Publish this story and view it on the front end.<\/li>\n\n\n\n<li>Add a category.<\/li>\n\n\n\n<li>Add a featured image to your story.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/carleton.ca\/cutheme-docs\/advanced\/module-1-advanced-content-types\/in-the-media\/\">Next: Module 1.7 &#8211; In the Media<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Stories are a dynamic post type in cuTheme designed to share important updates and news, with a unique visual flair. Each story has a branded banner featuring the 杏吧原创 Wave. Step-by-Step Add and Edit a New Story 1. From the dashboard, go to the left side of the screen, hover over Stories, and click on [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":525,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_cu_dining_location_slug":"","footnotes":"","_links_to":"","_links_to_target":""},"cu_page_type":[11],"class_list":["post-4649","page","type-page","status-publish","hentry","cu_page_type-general"],"acf":{"cu_post_thumbnail":""},"_links":{"self":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/comments?post=4649"}],"version-history":[{"count":5,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4649\/revisions"}],"predecessor-version":[{"id":4915,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/4649\/revisions\/4915"}],"up":[{"embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/pages\/525"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/media?parent=4649"}],"wp:term":[{"taxonomy":"cu_page_type","embeddable":true,"href":"https:\/\/carleton.ca\/cutheme-docs\/wp-json\/wp\/v2\/cu_page_type?post=4649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}