slidify - как позиционировать изображение?

Я экспериментирую с использованием slidify для создания презентаций в формате html5. Хотя использование уценки для создания маркеров и текста понятно, я не уверен, как работать с изображениями. Я могу изменить размер и тому подобное, используя imagemagick, но как мне центрировать (или смещать вверх/вправо? /bottom) и изображение с использованием уценки?

РЕДАКТИРОВАТЬ

Обычно я имею в виду изображения, но это также относится и к R-графике. По умолчанию изображения центрируются - я хотел бы иметь возможность размещать их рядом или даже в произвольных местах.


r slidify
person JohnSG    schedule 03.06.2013    source источник
comment
Я работаю над этой же проблемой прямо сейчас. Я бы подумал, что fig.align='center' справится с задачей, но, похоже, это не так... или, может быть, я что-то упускаю.   -  person Chase    schedule 03.06.2013
comment
Я думаю, вам придется использовать html, чтобы сделать это. Вы можете сделать несколько вещей: 1) связаться с Рамнатом напрямую через GitHub slidify и спросите (он очень открыт для отзывов) 2) используя версию github пакета отчетов с помощью slidify you может добавлять изображения с некоторым контролем, используя IM (который на самом деле просто создает html для изображений). Я думаю (хотя не могу говорить за Рамната), что slidify предназначен для максимально возможного использования Markdown, а не HTML.   -  person Tyler Rinker    schedule 03.06.2013
comment
Я только что понял, что вы имеете в виду графику, созданную R. Вы все еще можете сделать, как я сказал, но взять графику из кеша. Извините за недоразумение.   -  person Tyler Rinker    schedule 04.06.2013
comment
Можете ли вы опубликовать ссылку на ваш RMD-файл и ваш html-файл?   -  person Ramnath    schedule 04.06.2013
comment
Привет, Рамнат, ссылка на мой пример .Rmd и .html опубликована на github.com/johnstantongeddes/JSGtest («Публикация» на github является одной из функций slidify, которую я очень ценю, кстати). Я внес правку в вопрос. Я понимаю, что вероятный ответ заключается в том, что я могу изменить положение, используя вывод .html, но это будет стираться с каждым «вязанием». Потребуется ли новый шаблон?   -  person JohnSG    schedule 04.06.2013

Ответы (1)


arrow_upward
6
arrow_downward

Вот (уродливый) обходной путь для центрирования и изменения размера изображений, чтобы убедиться, что они все помещаются на ваших слайдах.

Добавьте следующее в верхнюю часть index.Rmd, чуть ниже блока описания.

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

CSS будет ограничивать высоту изображений, чтобы избежать их переполнения.

JS загрузит jQuery, а затем найдет все элементы абзаца, содержащие элемент <img>, и добавит класс .centered, который устанавливает text-align: center.

Та же версия jQuery позже загружается Slidify, но я не смог найти прямого способа загрузить блок <script> после того, как Slidify загрузил jQuery.

Кроме того, вы также можете вручную добиться этого, используя простой HTML:

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

Однако вам нужно будет сделать это для каждого изображения.

person Keith Hughitt    schedule 05.09.2013