• Uploading-Video.mp4
• Running-Unique-String-Aggregator.mp4
• Editing-An-Existing-Video.mp4
• Changing-Carousel-Content.mp4

Videos and thumbnails should be optimized before uploading them. Ideally, the file size should not exceed 270 MB.

• use HandBrake to optimize videos
  • select "Web Optimized" and MP4 format
  • go to "Dimensions" tab and make sure that videos didn't get cropped
• if the file size is still too large, use an online video compression tool like FreeConvert to further compress the file
  • to make sure that the output file size is below 270 MB, you can select a specific file size as a percentage of the original
• to optimize thumbnails, you can use an online image compression tool like Compressor

• it is recommended to take full-screen screenshots; this will ensure that the long-video thumbnails have an aspect ratio of 16:9
• for very wide screens, full-screen captures will have a large aspect ratio; in that case, the image needs to be resized to 1920 x 1080 pixels (16:9 aspect ratio)
• thumbnails for story shorts should be taken from the vertical short-form videos

• video API resources should be created under story_videos API namespace
• set published property to true unless you don't want the story to be published
• if the video has a raw transcript (with names and timestamps), then set it as the value for raw_transcript property
• location property can be kept empty for now
• once videos have been uploaded, go to External API Connections of story_videos and run all the unique string aggregator plugins
• show_in_carousels should be kept empty if the video doesn't need to be included in a carousel
• double check that there aren't any spelling or grammatical errors in title, description, or any tags

• video: full video
• short clip: story short
• thumbnail: thumbnail for full video
• thumbnail-short: thumbnail for short clip

To include a video in a carousel, you have to specify the tag that is associated with that carousel under show_in_carousels array property.

# The video will be shown in "Overcoming End-of-Life Anxiety" carousel
show_in_carousels: ["end-of-life anxiety"]

# The video will be shown in "Latest Stories" carousel
show_in_carousels: ["latest stories"]

# The video will be shown in "Story Shorts" carousel
show_in_carousels: ["shorts"]

# The video will be shown in both "Overcoming End-of-Life" and "Redefining Childhood" carousels
show_in_carousels: ["end-of-life anxiety", "childhood trauma"]

All specified tags should be categorized. Suppose, a video has the following tags:

age: 35-44
gender: Male
reason: Other
identity: ["Indigenous", "Other"]
medicine: ["MDMA", "5-MeO-DMT"]
themes: ["Mindset", "Depression", "Anxiety", "End-of-life Anxiety", "Childhood Trauma"]
size: Individual
setting: Home
other tags: ["Cannabis", "Michael Pollan", "MAPS", "Suicidal Ideation"]

When creating an API resource for the video, the tags should be entered and categorized in the following way:

# each of the following properties map to an array of values
tags: ["35-44", "male", "other reason", "indigenous", "other identity", "mdma", "5-meo-dmt", "mindset", "depression", "anxiety", "end-of-life anxiety", "childhood trauma", "cannabis theme", "michael pollan", "maps", "suicidal ideation"]
age_tags: ["35-44"]
size_tags: ["individual"]
theme_tags: ["mindset", "depression", "anxiety", "end-of-life anxiety", "childhood trauma", "cannabis theme", "michael pollan", "maps", "suicidal ideation"]
gender_tags: ["male"]
reason_tags: ["other reason"]
setting_tags: ["home"]
identity_tags: ["indigenous", "other identity"]
psychedelic_tags: ["mdma", "5-meo-dmt"]

• tags should be all in lowercase
• "other tags" should go under theme_tags
• note how "Other" reason tag is entered as other reason and "Other" identity tag as other identity

When using the API HTML renderer, make sure the scope is set to published videos only.

<div class="carousel-container--story-shorts" data-carousel-name="storyShortsCarousel">
   {{ cms:helper render_api_namespace_resource_index 'story_videos', scope: { properties: { published: 'true' } }, order: { created_at: 'DESC' }, limit: 10 }}
</div>

Every API resource has a published boolean property that can be used to control whether or not a story should be published. Its value is set to false by default.

To render a carousel, the following things must be ensured:

• the carousel's parent container must have a class carousel-container--stories (for non-story-short carousel) or carousel-container--story-shorts (for story shorts carousel)
• the parent container must have a data-carousel-name attribute
• the API HTML renderer snippet must be inside the parent container

<!-- Overcoming End-of-Life anxiety carousel -->
<div class="carousel-container--stories" data-carousel-name="overcomeAnxietyCarousel">
    {{ cms:helper render_api_namespace_resource_index 'story_videos', scope: { properties: { published: 'true', show_in_carousels: { value: ['end-of-life anxiety'], option: 'PARTIAL' } } }, order: { created_at: 'DESC' }, limit: 9 }}
</div>

<!-- Redefining Childhood carousel -->
<div class="carousel-container--stories" data-carousel-name="redefineChildhoodCarousel">
    {{ cms:helper render_api_namespace_resource_index 'story_videos', scope: { properties: { published: 'true', show_in_carousels: { value: ['childhood trauma'], option: 'PARTIAL' } } }, order: { created_at: 'DESC' }, limit: 9 }}
</div>

<!-- Story Shorts carousel -->
<div class="carousel-container--story-shorts" data-carousel-name="storyShortsCarousel">
    {{ cms:helper render_api_namespace_resource_index 'story_videos', scope: { properties: { published: 'true', show_in_carousels: { value: ['shorts'], option: 'PARTIAL' } } }, order: { created_at: 'DESC' }, limit: 10 }}
</div>

• options for most of the dropdowns on the Search page are dynamically generated with the help of API namespaces
• the API namespaces follow a specific naming convention, for example, story_platform/select/identity_tags, story_platform/select/psychedelic_tags and so on
• the options are sorted by created_at in ascending order, i.e. from oldest to newest

Representation text is what's shown in a dropdown. Every option has a value and a representation text. You can change the default representation text if it isn't suitable. For example, the default representation text for the tag mdma is Mdma. You can change it to MDMA by going to story_platform/select/psychedelic_tags.

# Some examples of when you need to change representation text

# story_platform/select/psychedelic_tags
representation: 5-meo-dmt -> representation: 5-MeO-DMT
representation: Mdma -> representation: MDMA

# story_platform/select/identity_tags
representation: Lgbtq2sia+ -> representation: LGBTQ2SIA+
representation: Other identity -> representation: Other

# story_platform/select/theme_tags
representation: Relationship -> representation: Relationship(s)
representation: Ptsd -> representation: PTSD

# story_platform/select/reason_tags
representation: Other reason -> representation: Other

If a dropdown has an "Other" option, it should be the last one. If it isn't at the end of the list, you have to swap it with whatever is currently the last option.

Suppose you want to render a dropdown for themes on the Search page. First, add the following HTML snippet to the Search page:

<select name="themes" class="form-control">
    <option value="">Themes</option>
</select>

Then, add the following code to search-script snippet:

await renderDropdownOptions("themes", "theme_tags", "/api/1/story_platform-select-theme_tags");

Note that REST interface is being used to fetch the options and render them on the page. It will be possible to use the API HTML renderer instead once this feature gets implemented.