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

Feature request: image scaling #72

Closed
khinsen opened this Issue Jan 10, 2014 · 19 comments

Comments

Projects
None yet
@khinsen
Copy link

khinsen commented Jan 10, 2014

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

This comment has been minimized.

Copy link
Owner

gnab commented Jan 18, 2014

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

This comment has been minimized.

Copy link

khinsen commented Jan 22, 2014

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

This comment has been minimized.

Copy link
Owner

gnab commented Jan 29, 2014

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

@gnab gnab added the feature label May 15, 2014

@matf

This comment has been minimized.

Copy link

matf commented Jun 20, 2014

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

This comment has been minimized.

Copy link

JPFrancoia commented Jul 3, 2014

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

This comment has been minimized.

Copy link
Owner

gnab commented Jul 3, 2014

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

This comment has been minimized.

Copy link

JPFrancoia commented Jul 3, 2014

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

This comment has been minimized.

Copy link

howardroark commented Jul 4, 2014

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

This comment has been minimized.

Copy link

maple-leaf commented Sep 10, 2014

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 added a commit that referenced this issue Nov 7, 2014

Add initial support for macros. (#72)
Occurrences of \![:name arg1, arg2](obj), where only name is mandatory,
will be handled as macros, whose corresponding expansion functions are
expected to be predefined on the remark.macros object.
@gnab

This comment has been minimized.

Copy link
Owner

gnab commented Nov 7, 2014

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%" />

@gnab gnab added the 0.7.1 label Nov 7, 2014

@howardroark

This comment has been minimized.

Copy link

howardroark commented Nov 8, 2014

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

@howardroark howardroark referenced this issue Nov 8, 2014

Closed

Macros #15

@torgeir

This comment has been minimized.

Copy link
Contributor

torgeir commented Nov 9, 2014

Awesome, gj! 🍻

@khinsen

This comment has been minimized.

Copy link

khinsen commented Nov 10, 2014

This looks really good, thanks!

@gnab gnab referenced this issue Dec 4, 2014

Closed

Multiple Slideshows #150

@gnab

This comment has been minimized.

Copy link
Owner

gnab commented Dec 21, 2014

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

This comment has been minimized.

Copy link

yijisoo commented Jan 26, 2015

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

davidonlaptop added a commit to davidonlaptop/presentations that referenced this issue Mar 23, 2015

@enricoferrero

This comment has been minimized.

Copy link

enricoferrero commented Mar 25, 2015

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

@jochenvanwylick

This comment has been minimized.

Copy link

jochenvanwylick commented May 28, 2015

@enrico16 : right before this line

var slideshow = remark.create();
@eduardohenriquearnold

This comment has been minimized.

Copy link

eduardohenriquearnold commented May 2, 2016

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.

floswald added a commit to floswald/Remark.jl that referenced this issue Aug 26, 2018

add scale macro to template
with this macro, as per gnab/remark#72, one can now do 

````julia
# A plot

```@example index
using Plots; gr()
Plots.plot(rand(10))
savefig("statplot.png");
```
![:scale 90%](statplot.png)
````
@sffc

This comment has been minimized.

Copy link

sffc commented Sep 9, 2018

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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment