topic Re: Is there a story map template that allows a Splash page? in Classic Esri Story Maps Questions

Is there a story map template that allows a Splash page?

AntoineBartholomew — Fri, 30 Sep 2016 18:47:32 GMT

I would like to incorporate a Splash Page into a story map. How can I do this? Is there a story map template that allows Splash pages?

Re: Is there a story map template that allows a Splash page?

DanielShaffer2 — Tue, 04 Oct 2016 14:02:24 GMT

The Story Map Journal has a built-in splash page as a widget. The widget Icon has a word bubble with "Hi!" in it. Not sure about the other templates. Have not looked. But a reasonable bet at least one more has a splash page built in.

Re: Is there a story map template that allows a Splash page?

OwenGeo — Wed, 05 Oct 2016 13:21:52 GMT

Hi Antoine,

Unfortunately, none of our current story map apps have splash pages (Cascade and Crowdsource have cover pages, but I don't think that is what you are looking for).

If you need your story map to have a splash page you can either download the code (GitHub link below) and customize it to add one, or you can embed a story map in an iframe of another web page that has a splash screen.

Esri GitHub | Open Source and Example Projects from the Esri Developer Platform

Would you mind sharing some information about why you'd like to include a splash page so we can use it to consider adding that feature for a future release?

Owen

Re: Is there a story map template that allows a Splash page?

DanielShaffer2 — Wed, 05 Oct 2016 13:30:48 GMT

Antoine, I'm sorry. I was mistaken. The built-in splash widget is in the basic WebApp Builder template. Sorry for the confusion.

Re: Is there a story map template that allows a Splash page?

AntoineBartholomew — Wed, 05 Oct 2016 16:21:18 GMT

Hello Owen

Thank you for the response.

We are working within the Map Journal template and we are interested in adding a splash page similar to what ESRI has in the web app builder. This is important because we are developing web apps and in this case creating a story map for classified data and we would like to have an initial page so we can call attention to the level of classification for the data within the story map, before the story map data is seen.

From my research on this topic, I was thinking I could create a Modal box within the Map Journal's index.html file...can you confirm that this approach would/could work

The code would be something like this...

require(["dojo/topic", "dijit/Dialog", "dojo/domRedy!"], function(topic, Dialog) {

myDialog = new Dialog ({

title: "My Dialog",

content: "Text Content",

style: "width: 360px"

console.log("My Dialog is initializing");

Or should this code go else where in the indx.html file? I saw this eample here: https://community.esri.com/thread/178244

topic.subscribe("tpl-ready", function(){
/*
* Custom Javascript to be executed when the application is ready goes here
*/

console.log("Map Journal is ready");
});

Re: Is there a story map template that allows a Splash page?

StephenSylvia — Sat, 11 Dec 2021 16:44:58 GMT

Antoine,

Yes, the dijit dialog is one of the easier ways to add a simple slash page to your story, however, you do have a few errors in your code. Here's some changes to your code to make it work. Notice how I was also able to write html right in the content attribute to add more then just text. If you're using images, you should add a height and width to the style attribute so the splash page stays centered on the page

require(["dojo/topic","dijit/Dialog"], function(topic, Dialog) {

  /*
  * Custom Javascript to be executed while the application is initializing goes here
  */

  // The application is ready
  topic.subscribe("tpl-ready", function(){

    /*
    * Custom Javascript to be executed when the application is ready goes here
    */
  
    var splashPage = new Dialog ({
      title: 'Splash Page',
      content: '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam vel in rem rerum saepe quidem est, ratione molestias a harum!</p><br /><img src="https://images.unsplash.com/photo-1469521669194-babb45599def?dpr=1&auto=format&crop=entropy&fit=crop&w=400&q=80&cs=tinysrgb" alt="Photo of parks" />',
      style: 'width: 430px; height: 436px;'
    });

    splashPage.show();
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

There is also a new dojo widget theme that will provide a nicer look if you make these two change:

Change the body class to calcite (map-journal-storytelling-template-js/index.html at master · Esri/map-journal-storytelling-template-js · GitHub )

<body class="calcite">‍

And change the theme CSS file in app > main-config.js (map-journal-storytelling-template-js/main-config.js at master · Esri/map-journal-storytelling-template-js · GitHub )

loadCSS(app.pathJSAPI + "esri/themes/calcite/dijit/calcite.css", true);     ‍

This code will produce:

Re: Is there a story map template that allows a Splash page?

BrandonPrice — Wed, 10 May 2017 14:31:29 GMT

Can this also apply to the story map series theme? The index.html looks different than than the story journal.

Thanks,

Brandon

Re: Is there a story map template that allows a Splash page?

AntoineBartholomew — Fri, 12 May 2017 14:17:08 GMT

Thank you for the help @ Stephen Sylvia

Re: Is there a story map template that allows a Splash page?

AntoineBartholomew — Fri, 12 May 2017 14:17:39 GMT

Thank you for the help @ Stephen Sylvia