getmural / mural Goto Github PK

Mural is a tool for visual storytelling. It’s a program that helps you sequence your visual story, and then generates everything needed for that story to be displayed on most modern web browsers and served from any web server.

License: GNU Affero General Public License v3.0

JavaScript 14.63% CSS 2.88% HTML 9.43% SCSS 17.16% TypeScript 55.91%

scrollytelling storytelling multimedia-storytelling longform visualstorytelling

mural's People

Contributors

Stargazers

Watchers

Forkers

iaincollins muraldouglas albanobattistella pdykes ashishkjay solibres tomasbergero ilovevinylrecs strategist922 nagyist naomiaro henryczhang dimied roguehistory toyblok jorjad

mural's Issues

Stories without .json in the filename don't get written

Users who create a story without a .json in the story name will encounter a JS error when they try to download their story. On reopening the story will not appear in the pulldown story menu, so users believe the story has disappeared, causing much grief.

To duplicate:

Duplicate the default story
Give the story a name like "story" without a .json extension
Try to download the story. A JS error will occur.
Close the Mural app and reopen. The story will not appear in the menu.

Move bounding box to below text box

The bounding box options (Active, RGB, Opacity) should follow the title and text areas. Please move the bounding box to after the text area, but before the image fields. It should also be in the same box as the text options.

Strip tags on paste into text fields

To avoid situations where users post cruft from MS Word, we should check if the stuff about to be pasted contains obvious Microsoft Word redflags and ask if they want to continue as is or strip all tags, then normally formatted styles will pass.

Write documentation for the CSS window and story elements

Now that 0.4 has the CSS window in the metadata pane, we should list the elements we use in the story to make it easier for users to know what to change in their stories:

h1, h2, text etc.

Implement 360˚ Video

There's been a request into how to integrate 360˚ video into Mural.

I know there are multiple ways of doing it so I recommend whatever the standard open source method is first before attempting to support non-standard options.

move more details from manual to UI

There are many cases where a user needs to refer to the manual

Example: the small, medium and large image sizes. Could the recommended dimensions be included in the UI or easily accessible with a help button?

The manual explains a lot of things that could be clarified in the UI. Example from page 35:

"The difference between a background video and a full-page video is that a
background video can have text overlaid over it"

The UI titles for the two types of video could be elaborated slightly in the item chooser menu:
"background video, text overlay and looping"
"full page video, title text only and auto-advance"

For users who only use Mural occasionally, this type of hinting can help jog their memory.

Fixed position logo

Users should have the option to add a logo which would remain in a fixed position throughout the story. This would default to the upper left, but could also work in other positions.

In the metadata section, users will have the ability to upload their logo in any format that supports transparency (SVG preferred). The logo will remain in the same position regardless of any other user input.

Horizontal Slideshow Slide Removal Confuses Editor

If you start a horizontal slideshow and add a slide, fill in the details, add another slide and then delete the first slide you'll notice that everything gets all sorts of broken. Needs refactoring.

Mp4 not playing in safari

See story - http://stories.d6culture.org/nicolasingh/stickyweeds/

Plays in Chrome and Firefox, but displays static image in Safari. May relate to issue with cloudflare -https://community.cloudflare.com/t/mp4-videos-not-working-on-safari/50818 or another issue with the hosts server which I am investigating.

formatting JSON for storage in Git repository

Some people will want to store the JSON file of their story in a Git repository. At the moment the content is all one long line making it hard to perceive changes in a diff. When saving the JSON file, please make it human-readable, maybe one element per line.

crediting sources in a Mural project

It would be really useful to have some mechanisms for crediting sources.

This might involve several components:

when editing each element of the sequence, a box where credits can be recorded (name of source, copyright, date, link, ...). Some items might have multiple credits.
an extra area in the site meta-data for adding any other arbitrary credits (e.g. names of sponsors, reviewers, ...)
an option to display the relevant credits when the content is viewed, on a page-by-page basis
a popup box or summary page at the end where all the credits are listed

The popup box could be integrated with the button for scrolling suggested in #51, it can also be combined with credits for Mural developers.

link text not readable

I've had a few problems with the colour of text over images/videos. These problems seem to be more acute with the default colours of link text. Can you contemplate any other default colour and text style for links that is likely to be more successful?

Junk files

We downloaded a finished Mural story, all zipped and ready to go and noticed it had a large file size. When we checked, the default folder still contained a lot of files that we had removed from the story.

images not visible in preview

When viewing my site in the preview panel (left hand side of Mural), I can see the videos but not the images. When I save the ZIP and deploy it the images appear correctly.

symlink stored in ZIP

I put my JSON file in a Git repository and then created a symlink from ~/.config/Mural/data/some-project.json -> ~/repositories/my-project/mural/some-project.json

When I download the ZIP, I find that it has stored the symlink and not the content of the file.

Suggestion: Add Auto-updating fields to Templates

A common use-case is we create a new retro board each week, from the same template, and have to manually update the date each time

A nice-to-have would be the option to add a "Smart Field" that automatically updates when template is cloned, for example to set the text as Todays Date

old files not deleted

when I replace one file (e.g. and image) with another image, the old image file isn't deleted from the uploads directory

not obvious that user needs to scroll, needs hovering arrows/buttons at top and bottom

I created a site and sent it to some users to get their first impression

For some users it was not obvious that they need to scroll after the first video finishes

Here is the site:
https://anzac.site/france/doubs-lombard-aviators-australia-britain/

It is significant because it is the 75th anniversary of this WW2 crash next Sunday.

On your demo site, "Eating the Pikador in Prague", I notice you have written the instructions in capital letters in the first paragraph, "SCROLL DOWN FOR MORE"

At the same time as adding a scrolling arrow/hint, maybe you could also add a small version of the Mural logo hovering in the bottom right corner of the window, linking back to the Mural web site

Fullpage Youtube Embeds

Story Element Reordering Needs UX Work

Currently the list of story elements in the editor are dual purpose for selecting which element to edit and also the order in which they appear.

I suggest having a 'grab' signifier in each list element so that the link can open the contents for editing and the grab (icon, grip?) can be used to reorder.

download window stays open

after using the download window and clicking the link in the window to save the ZIP file, the window stays open

Bounding box state not saved

When a user ticks the 'Active' checkbox in the new bounding box feature, this state is not saved.

To duplicate:

Tick the 'Active' checkbox
Enter values for RGB and Opacity Level
Click Save
Check the preview. The changes are not reflected in the preview.
Return to the item. The checkbox is unchecked.

Add a function slide

An option that sits alongside the others like full screen image etc. Can be added when building a Mural, but isn't a visible object. Could include functions like 'Jump to X slide' or 'Advance next slide after X seconds' or 'Jump to X (X could be any point in a different Mural to embed Murals within Murals or create 'Hyper Murals')' This would be a big aid in building self running / closed loop Murals for gallery and display situations and could mean you could make a 'Mother Mural' that takes you to a bunch of related Murals.

Use section names in nav list

The nav list currently does not use the names given to items in the section. These names, like name=“story0” aren’t used in the <ol>, which uses a simple serial numbering system which counts all the

tags starting from 0 and increases the count incrementally. This can become a real problem if the story is edited after output from the editor and the numbers given in name differ from the count of items.

It would be a lot clearer to use the attributes set in name=.
.

Incorrect Debian binary package

The Mural-0.3.0-amd64.deb.zip file doesn't seem to contain a .deb file or what might appear to be a binary pre-compiled package for GNU/Linux.

Convert spaces to dashes on file upload

Currently Mural doesn't adapt filenames at all when a user uploads a file. This leads to situations where app.js displays a black screen when it cannot find the file with the name the user erroneously gave. It would be far better to convert characters such as spaces to dashes when the user adds a file.

add it translation

I would like to help for It translation.
can you add translation folder? thank you.
It is a great project!

P.S. link to download for debian does not work.

New Linguage

Hi,

is now possible to add more language menu?
Thanks!

Add option for full-width videos when the browser is in portrait mode

Users should have the ability to select whether they want to have videos full-height (as we have had so far) or full-width (as has been requested by our client). If the user selects full-width video, the width is set to the width of the browser, and the height is the height of the video. This will result in unused space above and below the video, but at least the entire video can be seen.

To achieve this, the following code will be useful:

<style>
              @media (orientation:portrait) {
                section[name="story9"] {
                 background: #000;
                 z-index: 1;
                }
                section[name="story9"] .video-container {
                  margin-left: 0;
                }
                section[name="story9"] .part {
                  min-height: auto!important;
                }
                section[name="story9"] .caption {
                  padding-top: 50vh!important;
                  padding-bottom: 0!important;
                }
                
                section[name="story9"] video {
                  height: auto!important;
                  min-height: auto!important;
                  min-width: 100vw!important;
                  max-width: 100vw!important;                
                  width: 100vw!important;
                } 
              }
            </style>

Add text-shadow to certain CSS elements

Adding text-shadow to certain CSS elements would greatly improve the readability of text. The following elements should have text-shadow by default:

h1
h2
.caption

This should be removed from the default if we add a text shadow feature to the items.

Improve documentation on how to replace the Mural logo

Create improved documentation in the Mural manual to better describe how a user can replace the Mural logo, which criteria have an effect on the placement of the logo and the placement of the headline and play button.

problems with auto-advance

changes to the auto-advance setting are not remember or it becomes stuck in auto-advance

Bounding box: Change label for 'Active' to 'Text background area: Active'

To make it clearer to the user what the feature does, we should change the label on the bounding box to 'Text background area: Active'

ensure only one video playing at any given moment

In one project, I have a video panning left-to-right and the next video pans right-to-left

As the user is navigating from the first video to the second video, they see bits of both videos moving. One user expressed concern about the effect.

Is it possible to ensure that only one of the videos is playing?

Even better, could some more advanced transition be used to fade from one to the other, instead of ordinary scrolling?

As a workaround, I could insert a static slide between the two videos or try to avoid using two videos like this together.

Make all three image variations required

Make all three image variations (mobile, tablet, desktop) required so that users have to put a file into each field. This will prevent the situation where an item can be created without all of its image sizes, which leads to black screens in the story.

Copying a story doesn't update the locations of media files

When a user makes a copy of a story, the locations of any media files placed in the original are not updated to reflect their new location.

Example: An original story has an item with a media file in /uploads/my-story/myvideo.mp4. When the story is copied, that URL is not updated, meaning that the placed media files are not copied over to the new story's uploads folder. It also means that the placed images are not changed.

Gradient Backgrounds

Consider creating a way of adding gradient backgrounds to either the main story options or to individual stories (possibly only text-centred component)

Add option to set video alignment for mobile vertical

Mural currently aligns videos to the left of the viewport, which is fine when the reader is viewing a story on a desktop machine or on a mobile phone holding the phone horizontally. On Mural's video items (background video and fullpage video) we should add the option for the Mural user to set the alignment of the video if the reader views the story in vertical mode; the user should be able to set the alignment to left, center or right.

Add support for Twitter cards

In addition to the Open Graph Protocol support we have so that stories look good when shared on Facebook, we should add support for Twitter Cards (https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started). While these can be added after the story is downloaded, it's kind of a pain and doing it by hand always raises the possibility that things will go wrong.

Suppress Automatic Insertion of Story Element into Navigation

Problem

Quite often a section doesn't have a title or is left blank leading to ugly story element type descriptions.

Solution

Offer a checkbox so that a user can force an element to be excluded from the final HTML output and not have to edit it manually.

hyperlink position problems

I highlighted some text and made it a hyperlink. Then I used the code editing mode to move the position of the hyperlink. It looks OK in the preview. When I download the ZIP, the hyperlink is still in the original position.

can't include links in text over images

when I put text over a video, I can include links in the text but when I put text over images Mural won't let me create links in the text