slidify - how to position an image?

Question

I'm experimenting with using slidify for making html5 presentations. While the use of markdown for creating bullets and text is clear, I'm unsure how to work with images. I can resize and such using imagemagick, but how do I center (or flush top/right/bottom) and image using markdown?

EDIT

I'm referring generally to images here, but this also applies to R graphics. The default appears to be centering images - I'd like to be able to place them side-by-side, or even in arbitrary locations.

I'm working through this same problem right now. I would have thought that `fig.align='center'` would have done the trick, but it doesn't appear to...or maybe I'm missing something. — Chase, Jun 03 '13 at 19:14
I think you'll have to use html to do this. You can do a few things 1) contact Ramnath directly through [slidify's GitHub](https://github.com/ramnathv/slidify/issues?page=1&state=open) and ask (he's very open to feedback) 2) using the [github version](https://github.com/trinker/reports) of the reports package with slidify you can add images with some control using `IM` (which really just produces the html for images). I think (though can not speak for Ramnath) slidify is intended to utilize Markdown as much as possible and where not use the HTML. — Tyler Rinker, Jun 03 '13 at 19:19
I just realized you mean R produced graphics. You could still do as I said but grab the graphics from the cache. Sorry about the misunderstanding. — Tyler Rinker, Jun 03 '13 at 21:10
Hi Ramnath, link to my example .Rmd and .html is published on https://github.com/johnstantongeddes/JSGtest ('publish' to github being one of the features of slidify I really appreciate btw). I've made an edit to the question. I realize know that the likely answer is that I can change position using the .html output, but this would be wiped out with each 'knit'. Would it require a new template? — JohnSG, Jun 04 '13 at 16:35

Keith Hughitt · Accepted Answer · 2016-08-18T20:24:08.293

Here is an (ugly) work-around to center and resize images to make sure they all fit on your slides.

Add the following to the top of your index.Rmd, just below the description block.

<!-- Limit image width and height -->
<style type='text/css'>
img {
    max-height: 560px;
    max-width: 964px;
}
</style>

<!-- Center image on slide -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
<script type='text/javascript'>
$(function() {
    $("p:has(img)").addClass('centered');
});
</script>

The CSS will limit the height of images to avoid having them overflow.

The JS will load jQuery and then find all paragraph elements which contain an <img> element, and add the .centered class, which sets text-align: center.

The same version of jQuery is loaded later on by Slidify, but I couldn't find a straight-forward way to load the <script> block after Slidify has loaded jQuery.

Alternatively, you could also manually achieve this using plain HTML:

<div style='text-align: center;'>
    <img height='560' src='x.png' />
</div>

However, you would need to do this for each image.

slidify - how to position an image?

1 Answers1