2013-06-03 5 views
15

Ich experimentiere slidify mit mit html5 Präsentationen zu machen. Während die Verwendung von Markdown zum Erstellen von Aufzählungszeichen und Text klar ist, bin ich mir nicht sicher, wie ich mit Bildern arbeiten soll. Ich kann die Größe und solche mit imagemagick, aber wie kann ich Zentrum (oder bündig oben/rechts/unten) und Bild mit Abschlag?glitify - Wie positioniert man ein Bild?

EDIT

Ich bin hier im Allgemeinen auf Bilder beziehen, aber das gilt auch für R-Grafiken. Der Standard scheint Bilder zu zentrieren - ich möchte sie nebeneinander oder sogar an beliebigen Stellen platzieren können. Hier

+0

arbeite ich jetzt durch das gleiche Problem. Ich hätte gedacht, dass 'fig.align = 'center'' den Trick gemacht hätte, aber es scheint nicht zu ... oder vielleicht vermisse ich etwas. – Chase

+0

Ich denke, dass Sie HTML verwenden müssen, um dies zu tun. Du kannst ein paar Dinge tun 1) kontaktiere Ramnath direkt über [sliplify's GitHub] (https://github.com/ramnathv/slidify/issues?page=1&state=open) und frag (er ist sehr offen für Feedback) 2) benutze die [github Version] (https://github.com/trinker/reports) der Berichte Paket mit slidify Sie Bilder mit einiger Steuerung mit 'IM' hinzufügen können (die eigentlich nur die hTML für Bilder erzeugt). Ich denke (obwohl ich nicht für Ramnath sprechen kann), slidefify soll Markdown so gut wie möglich nutzen und nicht HTML verwenden. –

+0

Ich habe gerade gemerkt, dass du meinst R produzierte Grafiken. Sie könnten immer noch tun, was ich gesagt habe, aber greifen Sie die Grafik aus dem Cache. Entschuldigung wegen des Missverständnisses. –

Antwort

6

ist eine (hässlich) Behelfslösung Bilder zu zentrieren und die Größe, um sicherzustellen, dass sie alle auf Ihren Folien passen.

folgendes an die Spitze Ihres index.Rmd, direkt unterhalb des Beschreibungsblock hinzufügen.

<!-- 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> 

Das CSS begrenzt die Höhe der Bilder, damit sie nicht überlaufen.

Die JS wird jQuery laden und dann alle Absatzelemente finden, die ein Element enthalten, und die .centered Klasse hinzufügen, die text-align: center setzt.

Die gleiche Version von jQuery wird später von Slidify geladen, aber ich konnte keine einfache Möglichkeit finden, den <script> Block zu laden, nachdem Slidify jQuery geladen hat.

Alternativ können Sie auch dies mit einfachen HTML manuell erreichen:

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

jedoch würden Sie dies für jedes Bild müssen tun.