Create a gist now

Instantly share code, notes, and snippets.

Embed
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);
@drosenstark

This comment has been minimized.

Show comment
Hide comment
@drosenstark

drosenstark Dec 26, 2015

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

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

@drosenstark

This comment has been minimized.

Show comment
Hide comment
@drosenstark

drosenstark Dec 26, 2015

Note: this works with image tags like

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

Note: this works with image tags like

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

This comment has been minimized.

Show comment
Hide comment
@Wizmann

Wizmann 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%;
}
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%;
}
@frankman777

This comment has been minimized.

Show comment
Hide comment
@frankman777

frankman777 Dec 28, 2015

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

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

@drosenstark

This comment has been minimized.

Show comment
Hide comment
@drosenstark

drosenstark Mar 19, 2016

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

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

@alexandre28f

This comment has been minimized.

Show comment
Hide comment
@alexandre28f

alexandre28f Jun 15, 2016

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.

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.

@alexandre28f

This comment has been minimized.

Show comment
Hide comment
@alexandre28f

alexandre28f Jun 15, 2016

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

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

@kitbashive

This comment has been minimized.

Show comment
Hide comment
@kitbashive

kitbashive Nov 20, 2016

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.

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.

@kitbashive

This comment has been minimized.

Show comment
Hide comment
@kitbashive

kitbashive Nov 20, 2016

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

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

@incace

This comment has been minimized.

Show comment
Hide comment
@incace

incace Jun 6, 2017

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

incace commented Jun 6, 2017

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

@SplitZadar

This comment has been minimized.

Show comment
Hide comment
@SplitZadar

SplitZadar Jun 26, 2017

@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>')
    }
}

SplitZadar commented Jun 26, 2017

@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>')
    }
}
@abbood

This comment has been minimized.

Show comment
Hide comment
@abbood

abbood Sep 22, 2017

this code is outdated.. it simply doens't work with me

  • first i added this line
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

then i'm getting this error:
screen shot 2017-09-22 at 10 04 09 am

abbood commented Sep 22, 2017

this code is outdated.. it simply doens't work with me

  • first i added this line
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

then i'm getting this error:
screen shot 2017-09-22 at 10 04 09 am

@Wizmann

This comment has been minimized.

Show comment
Hide comment
@Wizmann

Wizmann Dec 27, 2017

@abbood

working on that

sorry for the inconvenience

Owner

Wizmann commented Dec 27, 2017

@abbood

working on that

sorry for the inconvenience

@lasares

This comment has been minimized.

Show comment
Hide comment
@lasares

lasares Mar 19, 2018

Hi Wizmann! Thanks for your work. Any hope for an upgrade on this one sometime in the future?

lasares commented Mar 19, 2018

Hi Wizmann! Thanks for your work. Any hope for an upgrade on this one sometime in the future?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment