Image resizing #487

Closed
polsvoice opened this Issue May 9, 2015 · 4 comments

Comments

Projects
None yet
4 participants
@polsvoice

I was wondering if Redcarpet supports image resizing, as mentioned in the top comment in this StackOverflow thread. For example, to display an image at 300px wide x 450px high:

![](http://www.example.com/myImage.png =300x450)

Would this type of behavior be considered an extension or a renderer?

@robin850

This comment has been minimized.

Show comment
Hide comment
@robin850

robin850 May 10, 2015

Collaborator

Hi @polsvoice,

Actually that's pretty easy to implement yourself with a custom render:

class CustomRender < Redcarpet::Render::HTML
  def image(link, title, alt_text)
    if title =~ /=(\d+)x(\d+)/
      %(<img src="#{link}" width="#{$1}px" height="#{$2}px" alt="#{alt_text}>")
    else
      %(<img src="#{link}" title="#{title}" alt="#{alt_text}">)
    end
  end
end

With this custom render, you'll have, however, to surround the =wxh syntax with quotes. If you do not want to, you can do link = link.split(" ") and do the =~on link[1] and replace link with link[0].

Thanks for spotting this! :-)

Collaborator

robin850 commented May 10, 2015

Hi @polsvoice,

Actually that's pretty easy to implement yourself with a custom render:

class CustomRender < Redcarpet::Render::HTML
  def image(link, title, alt_text)
    if title =~ /=(\d+)x(\d+)/
      %(<img src="#{link}" width="#{$1}px" height="#{$2}px" alt="#{alt_text}>")
    else
      %(<img src="#{link}" title="#{title}" alt="#{alt_text}">)
    end
  end
end

With this custom render, you'll have, however, to surround the =wxh syntax with quotes. If you do not want to, you can do link = link.split(" ") and do the =~on link[1] and replace link with link[0].

Thanks for spotting this! :-)

@robin850 robin850 closed this May 10, 2015

@polsvoice polsvoice referenced this issue in diaspora/diaspora May 11, 2015

Open

Image resizing with Markdown #5948

@GreenGremlin

This comment has been minimized.

Show comment
Hide comment
@GreenGremlin

GreenGremlin Oct 14, 2016

One note, the image height and width attributes shouldn't have units.

class CustomRender < Redcarpet::Render::HTML
  def image(link, title, alt_text)
    if title =~ /=(\d+)x(\d+)/
      %(<img src="#{link}" width="#{$1}" height="#{$2}" alt="#{alt_text}>")
    else
      %(<img src="#{link}" title="#{title}" alt="#{alt_text}">)
    end
  end
end

GreenGremlin commented Oct 14, 2016

One note, the image height and width attributes shouldn't have units.

class CustomRender < Redcarpet::Render::HTML
  def image(link, title, alt_text)
    if title =~ /=(\d+)x(\d+)/
      %(<img src="#{link}" width="#{$1}" height="#{$2}" alt="#{alt_text}>")
    else
      %(<img src="#{link}" title="#{title}" alt="#{alt_text}">)
    end
  end
end
@robin850

This comment has been minimized.

Show comment
Hide comment
@robin850

robin850 Oct 15, 2016

Collaborator

Ah thanks @GreenGremlin !

Collaborator

robin850 commented Oct 15, 2016

Ah thanks @GreenGremlin !

@soundasleep

This comment has been minimized.

Show comment
Hide comment
@soundasleep

soundasleep May 18, 2017

I think this would be a great idea to add into the engine. I found the example code a little broken (it wasn't regexping against the link, just title), this worked really well for me:

    def image(link, title, alt_text)
      if link =~ /^(.+?)\s*=+(\d+)(?:px|)$/
        # e.g. ![alt](url.png =100px)
        # e.g. ![alt](url.png =100)
        %(<img src="#{$1}" style="max-width: #{$2}px" alt="#{alt_text}">)
      elsif link =~ /^(.+?)\s*=+(\d+)(?:px|)x(\d+)(?:px|)$/
        # e.g. ![alt](url.png =30x50)
        %(<img src="#{$1}" style="max-width: #{$2}px; max-height: #{$3}px;" alt="#{alt_text}">)
      else
        %(<img src="#{link}" title="#{title}" alt="#{alt_text}">)
      end
    end

If you'd like I can submit this as a PR, perhaps as a renderer option. I think it's a pretty common scenario.

soundasleep commented May 18, 2017

I think this would be a great idea to add into the engine. I found the example code a little broken (it wasn't regexping against the link, just title), this worked really well for me:

    def image(link, title, alt_text)
      if link =~ /^(.+?)\s*=+(\d+)(?:px|)$/
        # e.g. ![alt](url.png =100px)
        # e.g. ![alt](url.png =100)
        %(<img src="#{$1}" style="max-width: #{$2}px" alt="#{alt_text}">)
      elsif link =~ /^(.+?)\s*=+(\d+)(?:px|)x(\d+)(?:px|)$/
        # e.g. ![alt](url.png =30x50)
        %(<img src="#{$1}" style="max-width: #{$2}px; max-height: #{$3}px;" alt="#{alt_text}">)
      else
        %(<img src="#{link}" title="#{title}" alt="#{alt_text}">)
      end
    end

If you'd like I can submit this as a PR, perhaps as a renderer option. I think it's a pretty common scenario.

soundasleep added a commit to soundasleep/railswiki that referenced this issue May 18, 2017

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