Listicles
by Little Outliner Wednesday, January 18, 2017

Listicle is the first app for Little Outliner. And for now it takes a little bit of manual glueing-together to get the app installed. I expect this will get smoother over time. 

How to

  1. If you haven't already created a menubar, do so now. Create an outline called menubar.opml. Add a top-level headline called Scripts, and underneath it create a headline called Listicle. 
  2. With the bar cursor on the Listicle headline, created above, click the suitcase icon in the left margin to edit the headline's attributes. Add an attribute called urlApp with the value http://listicle.io/dave/app.json
  3. Pause, then pull down the menu. You should see a sub-menu under the Listicle item. The first item should be Build listicle and the second should open this page of docs.

To test it, create a new outline. You can put anything you like in the outline. Here's the outline I used for my demo. It can be a list of your favorite movies. 

The outline must be public. To make it public, choose Get public link in the File menu.

When you're ready to try it out as a listicle, go to the Scripts menu, Listicle sub-menu, and choose Build Listicle. Confirm you want to build this outline. If it works it will open a new tab with the listicle in it. 

Use the arrow keys to go back and forth, or if you're on a phone or tablet you can swipe left and right. There are left and right arrow icons at the top. 

Updating the listicle

It couldn't be easier. When you edit the outline, the listicle automatically reflects the changes. It's live. (My favorite feature.) It means you can possibly use the listicle as a way of liveblogging. Something to consider. 

Options for listicles

If you want to edit the options for the listicle, its title, background image, etc, choose Edit OPML head in the File menu. These are file-level attributes for the outline. That's where the listicle software looks for various settings. Here are the ones you're most likely to set.

  1. title, the title at the top of each page. 
  2. link, the page the title points to.
  3. authorName, obviously the name of the author. 
  4. authorWeb, the address of the author's website, the page that the author's name points to. 
  5. urlBackgroundImage, the address of a JPEG, GIF or PNG image to use as the background for the listicle.
  6. opacityBackground determines the darkness the background of the text in the listicle. 0 is totally clear and 1 is black. 
  7. itemLabel determines what it says in the permalink above the title of each page in the listicle. The default is Idea. You could change it to Epiphany or Theory as examples or whatever. 
  8. urlParamName is the name of the parameter we put on the url after the ? to link to individual slides. If you change this you may break incoming links, but if you don't like the default of idea go ahead and party. 

Here's a screen shot of the header attributes for the demo listicle.

If you have any questions or see any problems, post a note in a comment below.