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: 
The how
- Install the Tampermonkey extension/ addon for your browser of preference (It’s like Stylish, but for JavaScript).
- Go to this GitHub page and copy the entire contents of the code box.
- Click on your Tampermonkey icon in your browser > Add a new script…
- Select everything in the resulting editor and paste over it with the code you just copied from GitHub… and hit the save icon:
- 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.