Share Flow - Page Setup

#Page Setup Reference Documentation

This is reference information listing the page configuration options to set up a Share Flow page.

This is a copy of the documentation shown in the helper modal, which appears when a new share flow page is created. Please refer to helper modal first as it will contain the latest information.

Share Flow Feedback Page Configuration

This help dialog will show whilst any of the required config tags are not defined. Once all the required tags below are set this dialog will disappear.

Required Tags

• blog_slug:BLOG_SLUG. This is the slug of the blog where the submitted posts will be created. Important - make sure to add this blog slug in the Nationbuilder API service whitelists. The blog slug needs to be added to the create post whitelist: CREATE_BLOG_POST_BLOG_SLUG_WHITELIST, and to the update post whitelist UPDATE_BLOG_POST_BLOG_SLUG_WHITELIST.

• moment_id:MOMENT_ID. This ID is used to generate the new blog post name and slug, i.e: "{author_first_name}-{ moment_id }-{author_id}"

• moment_title:MOMENT_TITLE. This is used to generate the new blog post headline and title, ie: "{author_first_name} | { moment_title }"

• cloudinary_folder:CLOUDINARY_FOLDER. This sets which folder the user submitted photos are stored on Cloudinary. Cloudinary will automatically create a new folder if one does not exist (and a backup folder in the AWS S3 bucket ttwcloudinary-ap-southeast-2).

  • Cloudinary Log In
  • Cloudinary Dashboard
  • View existing Cloudinary folders

• pipe_video_eid:PIPE_VIDEO_ENVIRONMENT_ID. This sets the Pipe Video "Environment" where user uploaded videos are stored.
  Each moment usually has a different Pipe environment created to organise uploaded videos.
  The "Environment ID/Code" can be seen in the Pipe settings for that environment (click the cog in Pipe to view these settings),
  or can be extracted from the example Pipe embed code (look for the pipe-eid="EID" attribute).

  • Pipe Video Dashboard
  • To create a new Pipe Environment, see the dropdown on the right for existing environments which includes an option to create a new one.

• pipe_video_aws_folder:AWS_S3_FOLDER.
  This sets the Amazon AWS S3 folder where the Pipe videos are stored.
  For a new moment, a new AWS S3 folder is usually created to store the Pipe videos in the addpipetereo S3 bucket.
  Then the config to store videos in this folder must be configured in the Pipe Video environment settings.
  This configuration can be accessed in Pipe by selecting the environment and then clicking the "Storage" tab, then the "Your Storage" tab, then "Amazon S3 or compatible services".
  The config can be copied from another enviroment, and then the folder updated for that moment.

  • Amazon S3 Account
  • To connect the Pipe environment to the AWS S3 folder, select “Storage” -> “Your Storage” -> “Amazon S3” tabs. You can copy most of the settings from a previous moment and Pipe provides documentation on setting up the folder on the right. Just make sure the folder is set to the one you just created.

Panel Activatation and Content

This section describes how to activate panels and set content.

The aim is to allow flexibility but to also be easy to quickly set up a new share flow. Like the main subpage system it also generally uses subpages to pull in content, but doesn't use the flexible ordering system. This is because the flows currenly all have same ordering and panels just need to be activated/deactivated.

• share_layout_type:{layout_type}. This is a primary tag to quickly configure multiple individual settings at once. Alternatively settings can be individually configured. Current supported layout type tags are:

  • share_layout_type:my_mihi - autoconfigure base settings for My Mihi share flow.
  • share_layout_type:kaikohau - autoconfigure base settings for Stories of Te Reo share flow.
  • share_layout_type:stories_of_te_reo - autoconfigure base settings for Stories of Te Reo flow.

Panels

Sign In To Share Widget

If the user is not signed in, then they are shown a simple signup page asking them to "Sign In To Share". After signing in they will be redirected back to this Share page.
There is a default sign in page that requires no config, or this page can be customised.
The Sign in page slug currently used is share_sign_in.

• The default "Sign In To Share" page has the slug share_sign_in. This page will automatically redirect the user back to the current Share Page to continue. No config is needed.
• To customise the "Sign In To Share" page content, create a child signup page and tag it "module_share_sign_in". Or set a tag on the main page: sign_in_slug:{SLUG} where SLUG is the custom signup page. Make sure to configure the setting "After signing up, what page should they land on next?" to be "signup_redirect".

Intro Panel

The intro panel optionally appears as the first panel. It is single content panel with page content text on the left and and media on the right. It is not active by default (unless auto activated with the share_layout_type: tag). To activate and set content:

• Create a published subpage and tag it module_share_intro
• Or tag the main page intro_content_slug:{slug}, where the page slug has the content.
• To set a image in the right column, attach upload an image to the page file attachments.
• To set a Youtube video in the right column, tag the page youtube_id:{Youtube ID}, for example youtube_id:uzUQtNNoH3Q.

Upload Panel

The upload panel provides the three buttons to upload media. It currently always shows. Currently defaults to showing the main Feedback page content (as it usually shows main instructions for the momenet) This default can be overridden to use another page's content:

• Create a published subpage and tag it module_share_upload
• Or tag the main page upload_content_slug:{slug}, where the page slug has the content.

Write Panel

The write panel provides form fields to enter written content about the post. It currently always shows. Currently defaults to showing the main Feedback page content (as it usually shows main instructions for the momenet) This default can be overridden to use another page's content:

• Create a published subpage and tag it module_share_write
• Or tag the main page upload_write_slug:{slug}, where the page slug has the content..

Stories of Te Reo Panel (only for SOTR)

The Stories of Te Reo panal is only visible for the Stories of Te Reo share flow. It collects additional information specific for that flow.

• To activate using default content, tag the main page show_stories_of_te_reo_panel
• To activate and set the panel content create a published subpage and tag it module_share_stories_of_te_reo

Tag Group Panel

The tag group panel shows the widget to let users tag in groups. The default content is hard coded as it is usually the same between flows.

• This panel is enabled by default. To hide this panel, tag the main page hide_tag_groups_panel
• To override the default content, create a published subpage and tag it module_share_tag_group

About You Panel

The tag group panel shows the widget to let users tag in groups. The default content is hard coded as it is not be the same between flows.

• To override the default content, create a published subpage and tag it module_share_tag_group

Styling Configuration Tags

The share flow styling can be adjusted with the following tags:

• To set a background image, attach an image to this page. The image filename must contain the text background.
• share_content_panel_classes:CLASS_NAMES = bg-muka. CSS classes for the content panels (left panels). This is usually used to configure the default panel background colour.
• share_form_panel_classes:CLASS_NAMES = bg-green-light. CSS classes for the form panels (right panels). This is usually used to configure the default panel background colour.
• start_button_text:TEXT = Upload your story. Override Start Button text.
• upload_headline:TEXT = Upload your story. Override Upload Panel form headline.
• write_headline:TEXT = Upload your story. Override Write Panel form headline.
• write_placeholder:TEXT = Upload your story. Override Write Panel placeholder text.
• Visibility Flags - add below tags to this page to activate the following panels and fields.
  • show_stories_of_te_reo_panel - force show SOTR panel
  • show_audio_upload - show Audio upload button
  • show_youtube_url - show Youtube field
  • show_headline_field - show post headline form field
  • show_anonymous_author_fields - allow anonymous author fields
  • show_source_fields
  • show_stories_of_te_reo_admin_questions
  • hide_tag_groups_panel - the tag groups panel is enabled by default; to disable the panel add this tag.
  • hide_anonymous_author_fields - hide the anonymous author fields