Select to view content in your preferred language

For the new Shortlist Story Map, what size image is best

2017
2
Jump to solution
09-29-2016 07:47 AM
JoyceJohn1
New Contributor

The old Shortlist image size was 280 x 210 but now the size needs to be larger.  What size is recommended?

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RupertEssinger
Esri Alum

Hi Joyce

The 280x210 recommended pic size from Shortlist 1.0 continues to work nicely as the thumbnail images in the tabs in the new Shortlist 2.0 beta. The new Shortlist can also display those in the Info panel that your users see when they select a place to find out more about it. but as you say, to take advantage of the new Shortlist look and feel with your existing Shortlist places, you'll want to assemble some larger images to fill that panel and look really nice.

Although any size and shape is supported for the larger images, you should avoid really large images because they can load slowly when referenced via URL. A good size and shape to aim for is 1000x750 for the large images. That size and shape works nicely in Story Map Tour too for the main image, in case you might be using the same pics in that app as well. But in general pics less than 2000 pixels wide referenced via URL will draw OK, so don't feel you have to resize everything. Shortlists look best when all the images are the same size and shape, but they don't have to be. We recommend landscape orientation (i.e. images that are wider than they are tall) instead of portrait orientation. We also recommend JPG format instead of PNG format for smaller overall file size, but both formats are supported.

For example in this Shortlist 2.0 for San Diego I used my existing 280x210 images for the thumbnails and 1000x750 for all the large images. That was created using the same CSV file that I used for my Shortlist 1.0 for San Diego. I added an extra field containing the URLs for the larger images. You can give that field any name. When you open a web map containing point data in ArcGIS Online and then create a Story Map Shortlist 2.0 beta from that map, the Builder gives you a wizard that lets you choose which fields to use to import the points. A lot of my pics were originally obtained from businesses and the local tourism agency at a very large file size and different shapes. I always recommend keeping those original fullsize pics around in case you decide to use them in story map apps like support full page display especially Story Map Cascade. I spent some time making smaller versions of those at 1000x750 for my Shortlists and Map Tours, including cropping them if they weren't already that 4:3 aspect ratio. You don't need to do that, but making the pics all the same shape gives you (I think) a very sleek looking Shortlist or Map Tour where the pics are consistent.

I think the main issue we are seeing in Shortlist 2.0 beta story maps people are making is that they are often referencing images via URL for their thumbnails that are too large, so if there are lots of places in a tab it really slows things down....

...which brings me to...

Important Note: Everything above applies to images referenced by URL, such as images that are on your own website or web server. A nice feature of Story Map Shortlist 2.0 beta is that you also have the option to import pictures from Flickr into your Shortlist. You can use a Flickr pic for the places you add. Or you can use the Import button to bring in multiple Flickr pics, in which case the Shortlist will automatically add places into your Shortlist for each pic, the same as Story Map Tour does. Using Flickr for your pics is great because it is easy to put pics into Flickr and you don't need to worry about image sizes at all: the Story Map apps that support Flickr images automatically ask Flickr for the best image size, so you get good performance without worrying about image size or format. Shortlist and Map Tour also read in geotag info from Flickr pics, along with any name or caption text stored in Flickr. So it is our recommended workflow if you want an easy and effective way to handle pics. Just put your pics in Flickr! If you are creating a Shortlist 2.0 beta from point data in a web map, you can import the points as places and then assign pics from Flickr to those places. For example if you are migrating a Shortlist 1.0 into Shortlist 2.0 beta you can stay with referencing your pics via URL, or assign Flicker pics to your places after you have imported them into the Builder.

Rupert

View solution in original post

2 Replies
RupertEssinger
Esri Alum

Hi Joyce

The 280x210 recommended pic size from Shortlist 1.0 continues to work nicely as the thumbnail images in the tabs in the new Shortlist 2.0 beta. The new Shortlist can also display those in the Info panel that your users see when they select a place to find out more about it. but as you say, to take advantage of the new Shortlist look and feel with your existing Shortlist places, you'll want to assemble some larger images to fill that panel and look really nice.

Although any size and shape is supported for the larger images, you should avoid really large images because they can load slowly when referenced via URL. A good size and shape to aim for is 1000x750 for the large images. That size and shape works nicely in Story Map Tour too for the main image, in case you might be using the same pics in that app as well. But in general pics less than 2000 pixels wide referenced via URL will draw OK, so don't feel you have to resize everything. Shortlists look best when all the images are the same size and shape, but they don't have to be. We recommend landscape orientation (i.e. images that are wider than they are tall) instead of portrait orientation. We also recommend JPG format instead of PNG format for smaller overall file size, but both formats are supported.

For example in this Shortlist 2.0 for San Diego I used my existing 280x210 images for the thumbnails and 1000x750 for all the large images. That was created using the same CSV file that I used for my Shortlist 1.0 for San Diego. I added an extra field containing the URLs for the larger images. You can give that field any name. When you open a web map containing point data in ArcGIS Online and then create a Story Map Shortlist 2.0 beta from that map, the Builder gives you a wizard that lets you choose which fields to use to import the points. A lot of my pics were originally obtained from businesses and the local tourism agency at a very large file size and different shapes. I always recommend keeping those original fullsize pics around in case you decide to use them in story map apps like support full page display especially Story Map Cascade. I spent some time making smaller versions of those at 1000x750 for my Shortlists and Map Tours, including cropping them if they weren't already that 4:3 aspect ratio. You don't need to do that, but making the pics all the same shape gives you (I think) a very sleek looking Shortlist or Map Tour where the pics are consistent.

I think the main issue we are seeing in Shortlist 2.0 beta story maps people are making is that they are often referencing images via URL for their thumbnails that are too large, so if there are lots of places in a tab it really slows things down....

...which brings me to...

Important Note: Everything above applies to images referenced by URL, such as images that are on your own website or web server. A nice feature of Story Map Shortlist 2.0 beta is that you also have the option to import pictures from Flickr into your Shortlist. You can use a Flickr pic for the places you add. Or you can use the Import button to bring in multiple Flickr pics, in which case the Shortlist will automatically add places into your Shortlist for each pic, the same as Story Map Tour does. Using Flickr for your pics is great because it is easy to put pics into Flickr and you don't need to worry about image sizes at all: the Story Map apps that support Flickr images automatically ask Flickr for the best image size, so you get good performance without worrying about image size or format. Shortlist and Map Tour also read in geotag info from Flickr pics, along with any name or caption text stored in Flickr. So it is our recommended workflow if you want an easy and effective way to handle pics. Just put your pics in Flickr! If you are creating a Shortlist 2.0 beta from point data in a web map, you can import the points as places and then assign pics from Flickr to those places. For example if you are migrating a Shortlist 1.0 into Shortlist 2.0 beta you can stay with referencing your pics via URL, or assign Flicker pics to your places after you have imported them into the Builder.

Rupert

JoyceJohn1
New Contributor

Hi Rupert,

Thank you for the detailed answer to my question about image sizes. This

will really help me when I'm creating my next shortlist story map. I think

the new look is absolutely great. The images and captions look so much

better on the side than when they were on the map itself. I like the clean

lines and the option of non-numbered points.

Viewing the before and after of the San Diego shortlist really shows how

nice the new version looks.

Joyce

0 Kudos