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.
I second what Josh wrote above
“Josh says:
January 11, 2016 at 8:33 am
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).”
My workflow typically in Evernote is using a bulleted outline similar to workflowy, but there are many times I copy paste images using a snipping tool or snagit — the workflow to create an image using dropbox/separate urls takes much too long.
Generally I do only use text with to-do’s and other info, but images can be as 1000 words sometimes depending on what I’m doing.
I’ve asked for the collapse feature as have many, many others in Evernote, but I don’t think your collapse feature is easily implemented in however they built their code. So you might have a nice differentiating feature to pull some Evernote users like me.
My request would be to find a way to
– copy/paste images into your outlines
– allow resizing of images with a selectable box like images pasted in evernote
– allow collapsing of the image itself to keep from harming the usability/condensed look and feel of the outlines
That said, I’m guessing this is pretty difficult to implement and you’d have to house the images on your site, so not sure if this is something you want to do. I’m just selfishly making the request and trying to explain why the current method isn’t user friendly for folks like myself. I had tried workflowy last year and really liked it, but in the end went back to evernote because the image feature outways the collapse feature…for me.
Thanks! If you do ever implement this, even in beta, I would love to try it out — let me know!
[…] Tampermonkey extension allows for inline images in […]
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.
[…] Dropbox，接著把圖片連結以 Markdown 語法放到 WorkFlowy 裡。使用這個技巧，WorkFlowy […]
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 :
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.
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 🙂
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”.
what about .pdf files? 🙂
(when i tried first i forgot to put the image link in ‘note’)
Hi Alexandre,
Great that you’ve got it up and running! Enjoy!
It works!
Hi I was trying to use this script your indications, but here is a screenshot of what I get in Tampermonkey:
?dl=0 (‘$ is not defined’ , ‘console is not defined’, etc…)
…Maybe I missed something?
Thanks a lot for your help in advance! I’m just discovering workflowy since last week and this inline image tool could be wonderful.
[…] you work in Chrome, there are other interesting tools, as well, such as a way to view inline images, and another to view images on hover. Frank Degenaar writes a lot of helpful tips and hacks on […]
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!
Now that you have inline images working… take a look at this outline I set up today:
https://workflowy.com/s/VRCV7Ri1Gs
Very cool!
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?
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.
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).
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!
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.
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
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.
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.
I like it. I need this to be a real feature. Needs to work with my other team members and it needs to work in the app.
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.
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 }{#clipboard -paste}
A big Thank You to Dan, Rawbytz and Wizmann too, for this awesome enhancement of WorkFlowy.
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.
Here’s a pretty cool solution. Upload your image to imgur.com and use HoverCards to see them, when you want to.
… or you could put your images anywhere and do this:
https://blog.workflowy.com/2016/02/09/preview-images/