Parsedown set image width and height

Question

Currently I use CodeIgniter 3.1.3 and Parsedown / Markdown Guide

With parse down I would like to be able to set the width and height of the image

![enter image description][1]

[1]: http://www.example.com/image.png '100x200' <-- widthxheight

I try the the way above but sets image title instead.

Output would be

<img src="http://www.example.com/image.png" width="100" height="200" alt="enter image description">

Question in parsedown library is there any way to modify it so can get and set the width and height of image?

protected function inlineImage($Excerpt)
{
    if ( ! isset($Excerpt['text'][1]) or $Excerpt['text'][1] !== '[')
    {
        return;
    }

    $Excerpt['text']= substr($Excerpt['text'], 1);

    $Link = $this->inlineLink($Excerpt);

    if ($Link === null)
    {
        return;
    }

    $Inline = array(
        'extent' => $Link['extent'] + 1,
        'element' => array(
            'name' => 'img',
            'attributes' => array(
                'src' => $Link['element']['attributes']['href'],
                'alt' => $Link['element']['text'],
                'width' => '',
                'height' => ''
            ),
        ),
    );

    $Inline['element']['attributes'] += $Link['element']['attributes'];

    unset($Inline['element']['attributes']['href']);

    return $Inline;
}

score 6 · Accepted Answer · answered Jan 12 '17 at 09:31

6

Last element from this (reference) syntax [1]: http://www.example.com/image.png '100x200'

Will be passed as title attribute, so you might do it this way:

class MyParsedown extends Parsedown
{
    protected function inlineImage($Excerpt)
    {
        $Inline = parent::inlineImage($Excerpt);

        if (!isset($Inline['element']['attributes']['title'])) { return $Inline; }

        $size = $Inline['element']['attributes']['title'];

        if (preg_match('/^\d+x\d+$/', $size)) {
            list($width, $height) = explode('x', $size);

            $Inline['element']['attributes']['width'] = $width;
            $Inline['element']['attributes']['height'] = $height;

            unset ($Inline['element']['attributes']['title']);
        }

        return $Inline;
    }
}

Attribute will be changed to width+height if title matches NUMERICxNUMERIC pattern. You might limit number of digits or size to protect breaking the page, also leading 0 should be excluded (or sizes with only 0).

answered Jan 12 '17 at 09:31

shudder

2,076
2
20
21

I tried to extend it codeigniter way but no luck is there another way to mix it in with my code – Jan 12 '17 at 10:36
@wolfgang1983 It shouldn't be a problem. How do you load `Parsedown` library? If you're using `$autoload` array then both `Parsedown` and `MyParsedown` (or whatever you name this class & file) should be registered. The only easier way would be altering original file by pasting body of this method (without initial parent call) at the end of original one (line 1188) – shudder Jan 12 '17 at 11:35
If I put the parse down library in the system libraries and not application then use MY_Parsedown in application libraries then it works. – Jan 12 '17 at 20:18
@shudder _"pasting body of this method (without initial parent call) at the end of original one (line 1188)"_ Not sure if I've done it correct. Just copy and paste your method at the end of the current `Parsedown.php` file ([Parsedown with Image Resize](https://pastebin.com/YFkYtcDk)). Unfortunately, it did not worked. Any idea why? – Mark Messa Aug 22 '18 at 19:48
@shudder Just found the issue: `$parsedown = new MyParsedown;` – Mark Messa Aug 22 '18 at 20:12

Mark Messa · Answer 2 · 2019-09-16T20:18:30.233

Just a slight variation from the accepted answer to make it possible to keep the original aspect ratio by setting width or height to zero:

class MyParsedown extends Parsedown
{
    protected function inlineImage($Excerpt)
    {
        $Inline = parent::inlineImage($Excerpt);

        if (!isset($Inline['element']['attributes']['title'])) { return $Inline; }

        $size = $Inline['element']['attributes']['title'];

        if (preg_match('/^\d+x\d+$/', $size)) {
            list($width, $height) = explode('x', $size);

            if($width > 0) $Inline['element']['attributes']['width'] = $width;
            if($height > 0) $Inline['element']['attributes']['height'] = $height;

            unset ($Inline['element']['attributes']['title']);
        }

        return $Inline;
    }
}

Parsedown set image width and height

2 Answers2