I don't understand the point of image_tag

#1

Hi,

I’m new to Middleman. I’m trying to understand the point of the Padrino helpers eg image_tag. It seems that

= image_tag 'padrino.png', width: '35', class: 'logo'
will output the same thing as
%img.logo{alt: "Padrino", src: "/images/padrino.png", width: "35"}/

Is there a reason that one would be preferred over the other? Is it a preference, or am I missing some functionality with image_tag. I at first thought it was for allowing asset_hash to rewrite the src url, but found that asset_hash works either way.

Thanks in advance for helping me understand.

#2

There are several reasons to use this helper, or not, depending on your needs.

  1. If you use :relative_links or :relative_assets or other means of manipulating URLs, then this helper will honor this (it uses url_for helper internally). Sure, you can create IMG tag manually and use url_for in it.
  2. If you use some middleman-extensions to amend IMG tag (auto-size?, auto-resize?) they will plug into this helper to make its work.

This and other Padrino-helpers are less useful if you use Haml/Slim languages and don’t need any additional internal work to be done by Middleman or its extensions. But maybe even getting rid of '/images/padrino.png' in favor for 'padrino.png' is worth using it. It’s a static site generator, after all, so some performance loss from using it is not an issue for most projects.

#3

Thanks for explaining that. I think what confused me is that some of the Middleman magic was working even with creating img tags without the image_tag helper. eg asset_hash worked I expected it wouldn’t.

I guess I didn’t realize that some of the magic would work anyway, but it sound like you’re saying that somethings still won’t work without the image_tag helper.

I’ve gone ahead and used the helper throughout my codebase now in case I need those in the future.

Thanks for your help.

#4

I’m not 100% sure, but it’s possible, that Padrino-helpers and/or Middleman also plug into the Haml internals, so any %img or similar tag gets the URL-power of the Middleman or its plugins. Good question, I have to check out of curiosity.