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.

Humility

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. – Koestler

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 and ask (he's very open to feedback) 2) using the github version 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. – Mojave

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. – Mojave

Can you post a link to your Rmd file and your html file? – Xmas

Hi Ramnath, link to my example .Rmd and .html is published on 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? – Humility

Answer 1

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.

Weakminded