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.

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.