Get WorkFlowy Inline Images out of your System in 2016

blog-book-button

I’ve been tinkering with inline images – right in WorkFlowy – for a couple of weeks now, along with a few other WorkFlowy users. We were unanimous in our findings: The results are amazing!… and then after a day or two, it’s like… meh. It’s all there for the taking. And after all is said and done, you decide whether to take it or leave it. One thing I’m positive about after having run the image display gauntlet: many may appreciate the current simplicity of WorkFlowy to a greater degree… and, may just decide to give this a go for limited use cases. Let’s give a quick show and tell of the what and how

The what

In the following animated GIF you’ll see:

  • Inline images in WorkFlowy!
  • The image reference links go into notes
  • Reference links are bound by Markdown tags
  • Links can be hidden if placed in the 2nd line of a note

    In this next GIF, I demonstrate the following:

  • You can “disable” an image link by adding any character to the same line as the link. I’ve added a hashtag… and when the hashtag is deleted, the image display is enabled once again.
  • I use Dropbox a lot to store images. You can grab the share link of an image (via the right click context menu)… or you could grab the Web URL of an image ending in .png, .jpg etc.
  • With Dropbox images, the share link needs to be converted to a direct download link by changing the “=0” to “=1”. I do this automatically at the time of pasting to WorkFlowy and at the same time, wrap my image in markdown tags with the help of a text expansion app, PhraseExpress.
  • The markdown tag format: ![]( Image link here )

    The how

  1. Install the Tampermonkey  extension/ addon for your browser of preference (It’s like Stylish, but for JavaScript).
  2. Go to this GitHub page and copy the entire contents of the code box.
  3. Click on your Tampermonkey icon in your browser > Add a new script…
  4. Select everything in the resulting editor and paste over it with the code you just copied from GitHub… and hit the save icon:
  5. You’ll need to refresh WorkFlowy after installing Tampermonkey (or a new script) for images to show up.

Tweaks…

Toggle image display

Apart from adding a hashtag to the same line as the image links to disable inline images, if you’re familiar with the Stylish extension, you can pop the following piece of code into a Stylish style:

/ *WorkFlowy With Image Toggle* /

div.content-img img {
display: none;
}
By turning this style on/ off you can toggle image display. A shout-out to Stefano Rausch for providing this.

Avoid “overflow” of larger images

If you have rather large images and you want them to display within the confines of your screen, you can add the following Stylish code to a separate style (or bundle it together with the above code):

DIV.notes DIV.content {
height: auto !important;
overflow: visible !important;
display: block !important;
}

DIV.content {
font-family: monospace !important;
}

DIV.content-img img {
max-width: 100%;
}

  • I personally tweak “max-width” to 85%, since most of the time I zoom in to 125% in my browser.
  • A huge shout-out to “Wizmann” for the above code and the original GitHub code for this whole inline image display hack.
  • And not to forget Dan Rosenstark, who “discovered” Wizmann’s hack for us and got busy tinkering and testing. He has a “fork” here.

The bottom line

After having tinkered with this hack (which was exactly how I always imagined inline images should display), a small group of WorkFlowy tinkerers individually came to a similar consensus: In general, having images display inline in WorkFlowy has the tendency/ potential to break the flow of one’s writing. We all, however, do have limited use cases where we would find this hack useful. Now it’s up to you to tinker and see whether you might want to squeeze some use out of it.

The above steps (1-5) literally take a couple of minutes… and it’s a one-time setup that runs in the background. You could even hide your Tampermonkey icon and forget that it exists. The only thing you’d have to do from that point on is format any image links you’d like to show inline. It’s a great way to test whether, in fact, inline images in WorkFlowy are all you hoped they’d be. This hack may just help you to get it out of your system in 2016.


Get EXCLUSIVE bite-sized  WorkFlowy  updates: tips, tricks & news about FREE online workshops with Frank Degenaar. Sign up here.

29 Comments

  1. Excellent post and thanks a lot for the shout-out, Frank!

    Personally and as you can imagine, I use the Stylish option and deactivate the /* WorkFlowy With No Images */ — as I call the toggle now — only when I do want to view an image. Perfect for me 🙂

    The icing on the cake would be the “hover over” solution.

    For the adaption of Google Drive links I use the following PE snippet:

    {#settemp -name google-drive -content {#replace {#insertclipboard} -oldtext file/d/ -newtext uc?export=view&id=}}{#setclipboard ![IMAGE]({#replace {#gettemp -name google-drive} -oldtext /view?usp=sharing -newtext })}{#clipboard -paste}

    A big Thank You to Dan, Rawbytz and Wizmann too, for this awesome enhancement of WorkFlowy.

    1. You mean that you can also inline images that are stored on Google Drive? That would be great! Where do you exactly paste that code? In the Tampermonkey script or elsewhere? I’m a newbie here.

    2. Here’s a pretty cool solution. Upload your image to imgur.com and use HoverCards to see them, when you want to.

  2. Can’t take credit for much here… I did modify the Clip to WorkFlowy bookmarklet to spit out ‘direct’ imgur links in WF notes, but past testing, I haven’t really used it much.

    I played around with this, and here are my thoughts:
    There is definitely a “wow” factor.. seeing inline images is very cool. But as I used it, the wow factor faded. For me it mainly has to do with “flow”… always on, inline images just seemed to get in the way more than they provided a benefit for me. There definitely needs to be an easy way to toggle inline images.

    Dynalist has a slightly different implementation, better in one way with the preview on hover, but lacking the inline view. Both approaches share one aspect: making links that work is a PITA. 1) links have to be in markdown format, which isn’t necessary, imo. 2) Each service I tried, imgur, Dropbox, Google Photos & Google Drive all require formats that aren’t their “default” shared format… meaning more user tweaking.

    These issues could be solved with direct attachment of images into WorkFlowy, but that opens up new trade-offs… I’m not sure I would prefer attaching. Clicking a link or viewing the preview is pretty quick already, and I like the benefits of a lean WorkFlowy file.

    I’m going to wait for a WorkFlowy solution if there is one. My suggestion: if you are clamoring for images and are comfortable with Tampermonkey, try this out. You may or may not like it, but you’ll also be able to provide better feedback to WorkFlowy on how you want images done.

  3. What if the images were included as links but they could be opened in a popover, pinterest style. So there is a hopping to view them, and back to the flow of the words-based list.

  4. I’ve been waiting for inline images since I started using Workflowy. This might be a solution for the fairly technical to try out, but this isn’t that accessible less skilled user (me). I’m blind copy pasting and it ain’t working for me. Likely all my fault.

    Bottom line – I don’t think this would impede the writing flow at all. I’m not going accidentally type in img urls. I would love to test this out at some point. A collapsible document is a fantastic concept. I’d like the ability to substitute a bullet for an image. A visual bullet list of sorts.

    Anyways, great work. I’d like to try it at some point.

  5. Couldn’t you also use images more for organizational purposes? I.e. iconography, nice looking dividers or header markers, etc. People could actually build an online library of such things

  6. Nice idea… I have thought about that… and if one does some head-scratching you could come up with some nice minimalistic designs. The difficulty here is that the inline images in this implementation only manifest in notes… and if they did preview in a bullet itself, it’d all still be linear. “Header markers” sounds like an interesting idea. If you come up with some graphics/ ideas that you are happy with, I wouldn’t mind showcasing them.

    As far as header styling goes, do yourself a favor and look for this userstyle:

    https://userstyles.org/styles/119273/matflow-dark-emerald-workflowy

    This Emerald skin does an amazing job of creating divider lines between hierarchies and stylizing headers, notes, etc.

  7. like this very much!
    any way to squeeze the image inside the notes so that it only appears if the note is opened completely – not while it’s in 1-line preview mode?

    tx!

  8. I cannot figure for the life of me how to hide the image link. Can anyone elaborate on this? I have went through the GIF many times recently, but cannot figure it out. I have the link in the second line of the note, but it always remains. Any ideas?

    1. Hi Ryan,

      First, make sure you’re not using a Stylish style that always shows the contents of all notes fully expanded… and second, your note needs to be in a child list’s note… not in the list title’s note.

    2. Wow! Thanks for the quick reply. The only Stylish style that I am using is the following:

      DIV.notes DIV.content {
      height: auto !important;
      overflow: visible !important;
      display: block !important;
      }

      DIV.content-img img {
      max-width: 85%;
      }

      I took out the “Display” line, and that made the link hide on top of the image, but it was still visible.

      When you say it needs to be in a child list’s note, you mean that it can not be the full title of the Workflowy? I have it nested in the 4th level, and then it is 2/3 down from the top level of that specific level (sorry thats a pretty bad description, but I think I did that part correct unless I am missing something).

  9. Thanks a bunch!! Got it now!

    Just changed the code to :

    DIV.notes DIV.content {
    height: auto !important;
    }

    DIV.content-img img {
    max-width: 85%;
    }

    And it works perfect!

    Thanks again!

  10. I often feel a desire to embed images into workflowy, but you can’t do that without making your outlines look ugly and messy. The power of workflowy is that it looks uniform, and it’s blazing fast. You navigate very quickly through information. You don’t want images in your way. My take on it. I prefer to use Workflowy exclusively as an outlining tool, and when there is a node within which I need diagrams or images (like a technical book with illustrations), I couple that node with a Pages document (or Word, or Google Doc) of same title. I just put the images inside the document in the same order as they are referenced in workflowy, ex having a workflowy item with a note “see image 13”.

  11. For images just install the chrome extension : Imagus.
    A cool side-effect of the imagus extension is you can also hover over
    links if they link directly to the picture.
    So for instance, if I hovered over : https://s-media-cache-ak0.pinimg.com/564x/86/12/d3/8612d3e3f2b8db68b429206af5af4a23.jpg

    a red line appears under it, you wait a second, and the picture just appears without moving
    from that page.
    If that link is in my WorkFlowy, it expands right there in my notes.

    Why this is better :
    It also works for just browsing the web (amazon, google image search etc) and just hovering over
    almost any thumbnail makes the picture expand to its full file format.

    PS Speaking of extensions, use “Tab-Snap” to dump all your open tabs into WorkFlowy Text.

    Imagus and Tab-snap are indispensable for WorkFlowy, in my opinion.

    1. Hey @Yep, thanks for both tips. Imagus is (unconsciously) a huge part of my workflow. Amazing. You’ll find a post I’ve written on Imagus in this space if you do a quick search. I’m going to take a look at Tab-Snap… But if you haven’t yet discovered Clip to WorkFlowy (by rawbytz), it’s a must. Also a post in the WorkFlowy archives 🙂

  12. I try to use JavaScript Bookmarklet with this snippet: (same script from the gist in the post)

    javascript:(function()%7Bfunction%20do_parseImg()%7B%24(this).nextAll(%22.content-img%22).remove()%3Bfor(var%20t%3D%24(this).text().split(%22%5Cn%22)%2Ce%3D%2F%5E%5C!%5C%5B.*%5C%5D%5C((.%2B)%5C)%24%2F%2Cn%3D0%3Bn%3Ct.length%3Bn%2B%2B)%7Bvar%20i%3Dt%5Bn%5D.trim()%2Co%3Di.match(e)%3Bnull!%3D%3Do%26%26%24(this).after(‘%3Cdiv%20class%3D%22content-img%22%3E%3Cimg%20style%3D%22width%3A85%25%22%20src%3D%22’%2Bo%5B1%5D%2B’%22%2F%3E%3C%2Fdiv%3E’)%7D%7Dfunction%20parseImg()%7B%24(%22div.notes%20div.content%22).live(%22click%20keyup%22%2Cdo_parseImg)%2C%24(%22div.notes%20div.content%22).each(do_parseImg)%2C%24(%22%23expandButton%22).live(%22click%22%2Cfunction()%7B%24(%22div.notes%20div.content%22).each(do_parseImg)%7D)%7D%24(window).bind(%22load%20hashchange%22%2CparseImg)%7D)()

    and it just worked! Now I just need to click the bookmarklet once and I can get the inline image both in the desktop and the phone.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: