Skip to content

Instantly share code, notes, and snippets.

@Wizmann
Last active June 14, 2023 13:29
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
  • Save Wizmann/605ff2a609348b6ec3a3 to your computer and use it in GitHub Desktop.
Save Wizmann/605ff2a609348b6ec3a3 to your computer and use it in GitHub Desktop.
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
Copy link

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

@drosenstark
Copy link

Note: this works with image tags like

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

@Wizmann
Copy link
Author

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
Copy link

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

@drosenstark
Copy link

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

@alexandre28f
Copy link

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
Copy link

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

@kitbashive
Copy link

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
Copy link

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

@colineberly
Copy link

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

@SplitZadar
Copy link

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
Copy link

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
Copy link
Author

Wizmann commented Dec 27, 2017

@abbood

working on that

sorry for the inconvenience

@lasares
Copy link

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