Remark: Feature request: image scaling

[khinsen]

Non-background images are always shown at their original size, which is often not at all adapted to a slideshow. For locally stored images, preprocessing is a solution, but not for pointing directly to images on other servers. Explicit image scaling would therefore be a nice feature to have.

[gnab]

I agree, that would be a handy feature. Do you have any suggestions to how the feature you're describing could work, and/or what it's syntax could be like?

The background image scaling is pretty easy since the implicit rule for scaling is to keep within the boundaries of the slide. Scaling of non-background images, however, would need a different rules. On option would be to enable setting max width and height per image, that would serve as scaling boundaries.

[khinsen]

Markdown image syntax is not obvious to extend, so for lack of a really good idea, I'd go rather lazily for permitting HTML image tags with all their attributes.

[gnab]

You can actually use HTML image tags, an any other tag for that matter.

There's an issue with the Markdown converter though, that autolinks URLs, even inside the src attribute of an img tag. To prevent this from happening, you have to use URLs without the protocol prefix, i.e. //www.google.com instead of http://www.google.com.

Demo: http://fiddle.jshell.net/VEB7p/2/show/#1

[matf]

What I currently use is something like this:

.image-50[![sketch](assets/sketch.png)]

.image-50 img {
  width: 50%;
}

Apparently, some markdown implementations allow to specify image dimensions like this:

![alt](img.png =100x20)

Would be nice if the proportions could also be given as a percentage. To me that's the whole point, fixed sizes don't help much unless you know at which resolution you're going to be presenting. Some examples:

![alt](img.png =50%)
![alt](img.png =50%x25%)
![alt](img.png =x25%)
![alt](img.png =100x200)
![alt](img.png =100)

What do you think?

[JPFrancoia]

I totally agree for this feature. For now I'm obligated to go for:

<img src="images/hepa.png" width="800">

And that's pretty much all the html code I have to use instead of markdown.

The solution of @matf sounds good.

[gnab]

I think it is a nice solution as well.

Another alternative, however, that I've considered before, is using the initial image alternative text field, i.e.:

![50%](images/hepa.png)

This would be even easier to implement, as the existing parsing and conversion of images could be left as-is, and simply doing an post-processing of the generated HTML looking for image tags whose alternative text matches the suggested dimension formats from above.

Also, using the alternative text field would be in line with what the DeckSet app does, as suggested in #133.

[JPFrancoia]

Yes, it could also be great that way. Moreover, the image's path would be more readable (and more easily accesible trough Vim's shortcuts, but that's not a big deal). And the use of the "[]" is rare, so it could be used for that.

But on the other hand, it would create another "implementation" of Markdown.

[howardroark]

If I could weigh in here, cause I like where this is all going...

I was just looking at this article. I really like the idea of a "macro" that was invented by this dude.

![:macro params](value)

At the end of the day there is going to be a lot of debate around how to extend Markdown. Why not just have a catch all syntax for all the wacky stuff. This method at least allows you to build out specific logic for popular scenarios. Things like youtube and vimeo are great examples. I find that plopping in iframes like reveal.js recommends makes it all so hard to read. Understandably it is not a Markdown first approach, being that it uses data-markdown. Personally I am here because this project is Markdown first!

I think the colon is key because it does make a logical separation from the existing use of [] without going miles away. I'm sure it would also making parsing a simpler process as well.

You could also leave out brackets if you invented some kind of wild macro like this...

![:piechart 51% women, 49% men]

Why not!

[maple-leaf]

I just simply add a style to limit image to fit its container

img {
    max-width: 100%;
}

Now the image will just scale to fit container.

And I think it would be nice if the image can be clicked to popup a simple box to show original image.
Really hope remark can add this feature.

[gnab]

I added support for macros on the develop branch.

Example markdown:

Uppercase: ![:upper](word)

Random: ![:random one, of, these, words]

Corresponding JavaScript:

remark.macros.upper = function () {
  // `this` is the value in the parenthesis, or undefined if left out
  return this.toUpperCase();
};

remark.macros.random = function () {
  // params are passed as function arguments: ["one", "of", "these", "words"]
  var i = Math.floor(Math.random() * arguments.length);
  return arguments[i];
};

var slideshow = remark.create();

Example output:

Uppercase: WORD

Random: these

Macros are currently expanded synchronously during parsing.

As for the original issue, one could easily create a macro that would scale an image by setting the width percentage:

remark.macros.scale = function (percentage) {
  var url = this;
  return '<img src="' + url + '" style="width: ' + percentage + '" />';
};

Usage:

![:scale 50%](image.jpg)

Output:

<img src="image.jpg" style="width: 50%" />

[howardroark]

This is really great stuff! I love the the this vs args handling. This would be super useful for complex images and embedded videos.

If you are curious I have been doing a bit of writing about "Macros" in a more big picture sense. I really feel Markdown is about to take off in big ways.

https://github.com/codingcoop/Markdown-Macros

[torgeir]

Awesome, gj! :beers:

[khinsen]

This looks really good, thanks!

[gnab]

The macro support has now been released in version 0.8.0.

Will have to look into which macros becomes part of remark over time. For now there are no built-in macros, but the examples above illustrates how to add macros, specifically for scaling images.

[yijisoo]

I hope that the instruction on this useful feature should be added to the tutorial / wiki of the page.

[enricoferrero]

Naive question, but where should I place the macro definition?

[jochenvanwylick]

@enrico16 : right before this line

var slideshow = remark.create();

[eduardohenriquearnold]

Great feature, makes Markdown cleaner and more compact. Maybe macro definition should be added to the Wiki page? It would make easier for new users to learn about this tool and use it.

[sffc]

Another little macro that keeps the alt text option:

remark.macros.img = function (altText, width) {
  var url = this;
  return '<img alt="' + altText + '" src="' + url + '" style="width: ' + width + '" />';
};

Usage:

![:img my alt text, 50%](my-image.jpg)

[daaronr]

How could I get this to work with a locally stored image (not a url)?

In the slide

.center[![trachoma](picsfigs/trachoma.jpg)]

Works well, but after adding the
beforeInit: "macros.js"
and adding the macros to that file, knitting yields a blank presentation

[h-2]

This works great, can you add it to https://github.com/gnab/remark/wiki/Formatting#images so that people find it quickly?

One problem I have is that if you put images in Markdown tables, the column width is still scaled to full image size. Is there anyway around this?

Thanks!

[h-2]

One problem I have is that if you put images in Markdown tables, the column width is still scaled to full image size. Is there anyway around this?

px instead of % seems to solve this:

![:scale 50px](image.jpg)