Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
workflowy-with-image.js
// ==UserScript==
// @name New Userscript
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world!
// @author You
// @match https://workflowy.com/*
// @grant none
// ==/UserScript==
/* jshint -W097 */
'use strict';
function do_parseImg() {
$(this).nextAll(".content-img").remove();
var lines = $(this).text().split("\n");
var img_re = /^\!\[.*\]\((.+)\)$/;
for (var i = 0; i < lines.length; i++) {
var line = lines[i].trim();
var img = line.match(img_re);
if (img === null) {
continue;
}
console.log(i, img[1]);
$(this).after('<div class="content-img"><img src="' + img[1] + '"/></div>')
}
}
function parseImg() {
$("div.notes div.content").live("click keyup", do_parseImg);
$("div.notes div.content").each(do_parseImg);
$("#expandButton").live("click", function() {
$("div.notes div.content").each(do_parseImg);
});
};
$(window).bind("load hashchange", parseImg);

This is awesome! I added a width="400" to the image tag, but this worked really nicely. Thanks.

Note: this works with image tags like

![hamburger](http://i.imgur.com/R72rW81.jpg)
Owner

Wizmann commented Dec 27, 2015

@drosenstark

This is my stylesheet.

max-width: 100%; is used to limit the width of the image to avoid overflow.

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%;
}

85% works well for me, because I zoom in to 125% in my browser :-)

Thanks @Wizmann, didn't see your reply from December until now.

Hi I was trying to use this script following the indications on this page: https://blog.workflowy.com/2016/01/06/inline-images/ ("the how")
...but here is a screenshot of what I get in Tampermonkey: https://www.dropbox.com/s/pczn05969y00n7i/Screenshot%202016-06-15%2016.32.14.png?dl=0 ('$ is not defined' , 'console is not defined', etc...)
...Maybe I missed something?
Thanks a lot for your help in advance! This tool would be wonderful.

Ha nevermind, It seems to work anyway! (when i tried first i forgot to put the image link in 'note')

Hello, can you tell me which line in your code tells the script to parse the text in the note? I would like to change it to use an image link in the workflowy item itself, rather than in the item note.

Ahh, sorry, figured it out. Made a fork. My first fork! Exciting :)

incace commented Jun 6, 2017

Does this work anymore? I can't get it to work at all for any image.

SplitZadar commented Jun 26, 2017 edited

@incace works like a charm

My improvement:
![75](http://i.imgur.com/R72rW81.jpg) will resize image to 75%

function do_parseImg() {
    $(this).nextAll(".content-img").remove();
    var lines = $(this).text().split("\n");
    var img_re = /^\!\[(.*)\]\((.+)\)$/;

    for (var i = 0; i < lines.length; i++) {
        var line = lines[i].trim();
        var img = line.match(img_re);
        if (img === null) {
            continue;
        }
        console.log(i, img[1]);
        console.log(i, img[2]);
        
        if (img[1] === "") {
            img[1] = 100;
        }
        
        $(this).after('<div class="content-img"><img width="' + img[1] + '%" height="'+ img[1] +'%" src="' + img[2] + '"/></div>')
    }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment