New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support image resizing #339

Closed
SimonCropp opened this Issue Jan 29, 2014 · 20 comments

Comments

Projects
None yet
@SimonCropp

SimonCropp commented Jan 29, 2014

is there any support for changing the size of an image. or do we have to drop back to html?

@rayshan

This comment has been minimized.

rayshan commented Apr 21, 2014

+1

Something like this would be great:
![](./pic/pic1_50.png =100x20)
Or just 1-dimension then set other to auto:
![](./pic/pic1s.png =250x)
More info:
http://stackoverflow.com/questions/14675913/how-to-change-image-size-markdown

@nbari

This comment has been minimized.

nbari commented Apr 21, 2014

I am using the title to set the size, maybe this can give an idea:

    renderer.image = function(href, title, text) {                                                                                                                                                                       
    if (title) {                                                                                                              
        var size = title.split('x');                                                                                          
        if (size[1]) {                                                                                                        
            size = 'width=' + size[0] + ' height=' + size[1];                                                                 
        } else {                                                                                                              
            size = 'width=' + size[0];                                                                                        
        }                                                                                                                     
    } else {                                                                                                                  
        size = '';                                                                                                            
    }                                                                                                                         
    return ('<img src="' + href + '" alt="' + text + '" ' + size + '>');                                                      
};

So you just can use:

![alt](http://img.png "420x420") 
@SimonCropp

This comment has been minimized.

SimonCropp commented Apr 21, 2014

considering this seems not too hard to implement on my own perhaps this should be documented somewhere and then close this issue??

@nbari

This comment has been minimized.

nbari commented Apr 21, 2014

@SimonCropp

This comment has been minimized.

SimonCropp commented Apr 21, 2014

@nbari yep. but it would be nice to have a page with a list of "useful renderer overrides"

@rayshan

This comment has been minimized.

rayshan commented Apr 22, 2014

Thanks @nbari! +1 on "useful renderer overrides" in docs. This could be implemented as an option but there may be too many edge cases to cater to (setting just 1 dimension, icon fonts, etc.)

@sun2rise

This comment has been minimized.

sun2rise commented Oct 30, 2014

+1 for the resize of the image!

@nchicong

This comment has been minimized.

nchicong commented Dec 3, 2014

+1

3 similar comments
@timlevett

This comment has been minimized.

timlevett commented Nov 21, 2015

+1

@eugeniop

This comment has been minimized.

eugeniop commented Dec 15, 2015

+1

@ponyesteves

This comment has been minimized.

ponyesteves commented Dec 30, 2015

+1

@isiahmeadows

This comment has been minimized.

isiahmeadows commented Jan 16, 2016

Edit (Feb. 17, 2018): Fix a bug

In my particular case, where I already had to modify the renderer to properly highlight a code block (known issue), I just added another method to do just this.

// Super simple sanitizer
function sanitize(str) {
    return str.replace(/&<"/g, function (m) {
        if (m === "&") return "&amp;"
        if (m === "<") return "&lt;"
        return "&quot;"
    })
}

/**
 * Make Marked support specifying image size in pixels in this format:
 *
 * ![alt](src = x WIDTH "title")
 * ![alt](src = HEIGHT x "title")
 * ![alt](src = HEIGHT x WIDTH "title")
 *
 * Note: whitespace from the equals sign to the title/end of image is all
 * optional. Each of the above examples are equivalent to these below,
 * respectively:
 *
 * ![alt](src =xWIDTH "title")
 * ![alt](src =HEIGHTx "title")
 * ![alt](src =HEIGHTxWIDTH "title")
 *
 * Example usage:
 *
 * ![my image](https://example.com/my-image.png =400x600 "My image")
 */
renderer.image = function (src, title, alt) {
    var exec = /\s=\s*(\d*)\s*x\s*(\d*)\s*$/.exec(src)
    var res = '<img src="' + sanitize(src) + '" alt="' + sanitize(alt)
    if (exec && exec[1]) res += '" height="' + exec[1]
    if (exec && exec[2]) res += '" width="' + exec[2]
    return res + '">'
}

It takes advantage of the fact Marked parses images this way:

![img](http://foo.com/img.png =100x300)
![img](http://foo.com/img.png =100x300 "foo")
<p><img src="http://foo.com/img.png =100x300" alt="img"></p>
<p><img src="http://foo.com/img.png =100x300" alt="img" title="foo"></p>

Do note that you can't flip the two:

![img](http://foo.com/img.png "foo" =100x300)
<p><img src="http://foo.com/img.png &quot;foo&quot; =100x300" alt="img"></p>

Although, most definitely +1 @SimonCropp on a "useful renderer overrides" list.

@chjj What do you think of both of these (my idea and the "useful renderer overrides" list)?

@mustafakasap

This comment has been minimized.

mustafakasap commented Mar 3, 2016

+1

@mustafakasap

This comment has been minimized.

mustafakasap commented Mar 3, 2016

Direct HTML coding is not working in MAC VSCode also.

this is what I tried:
Drawing

@vithar

This comment has been minimized.

vithar commented Mar 27, 2016

@uptownhr

This comment has been minimized.

uptownhr commented Apr 15, 2016

@isiahmeadows i thought i was going crazy! I know this is months old but your code used href for image! Thanks for the code either way. Works like a charm after you change href to src.

@isiahmeadows

This comment has been minimized.

isiahmeadows commented Apr 15, 2016

Oops... Oh well. Sorry about that!

On Fri, Apr 15, 2016, 00:51 James Lee notifications@github.com wrote:

@isiahmeadows https://github.com/isiahmeadows i thought i was going
crazy! I know this is months old but your code used href for image! Thanks
for the code either way. Works like a charm after you change href to src.


You are receiving this because you were mentioned.

Reply to this email directly or view it on GitHub
#339 (comment)

@joshbruce

This comment has been minimized.

Member

joshbruce commented Dec 11, 2017

See #956

Closing as complete or stale

@joshbruce joshbruce closed this Dec 11, 2017

@carloslfu

This comment has been minimized.

carloslfu commented Feb 16, 2018

Is this feature implemented?

@isiahmeadows

This comment has been minimized.

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