2013-06-03 17 views
15

मैं html5 प्रस्तुतियों को बनाने के लिए slidify का उपयोग कर प्रयोग कर रहा हूं। जबकि गोलियां और टेक्स्ट बनाने के लिए मार्कडाउन का उपयोग स्पष्ट है, मैं अनिश्चित हूं कि छवियों के साथ कैसे काम करना है। मैं आकार बदल सकता हूं और imagemagick का उपयोग कर सकता हूं, लेकिन मैं मार्कडाउन का उपयोग करके केंद्र (या ऊपर/दाएं/नीचे फ्लश) और छवि कैसे कर सकता हूं?slidify - छवि को कैसे स्थानांतरित करें?

संपादित

मैं आम तौर पर छवियों के लिए यहाँ जिक्र कर रहा हूँ, लेकिन यह भी आर ग्राफिक्स पर लागू होता है। डिफॉल्ट छवियों को केंद्रित करने के लिए प्रतीत होता है - मैं उन्हें साइड-बाय-साइड, या यहां तक ​​कि मनमानी स्थानों में भी रखने में सक्षम होना चाहता हूं।

+0

मैं अभी इसी समस्या के माध्यम से काम कर रहा हूं। मैंने सोचा होगा कि 'fig.align =' center '' चाल चलती, लेकिन ऐसा प्रतीत नहीं होता ... या शायद मुझे कुछ याद आ रहा है। – Chase

+0

मुझे लगता है कि आपको ऐसा करने के लिए HTML का उपयोग करना होगा। आप कुछ चीजें कर सकते हैं 1) रामनाथ से सीधे [slidify's GitHub] (https://github.com/ramnathv/slidify/issues?page=1&state=open) से पूछें और पूछें (वह फीडबैक के लिए बहुत खुला है) 2) [github संस्करण] (https://github.com/trinker/reports) रिपोर्ट पैकेज के slidify के साथ आप 'आईएम' (जो वास्तव में सिर्फ छवियों के लिए एचटीएमएल पैदा करता है) का उपयोग कर कुछ नियंत्रण के साथ छवियों को जोड़ सकते हैं। मुझे लगता है (हालांकि रामनाथ के लिए बात नहीं कर सकते) स्लीडिफाइज का उद्देश्य मार्कडाउन जितना संभव हो उतना उपयोग करना है और जहां एचटीएमएल का उपयोग नहीं किया जाता है। –

+0

मुझे अभी एहसास हुआ कि आपका मतलब आर उत्पादित ग्राफिक्स है। जैसा कि मैंने कहा था, आप अभी भी कर सकते हैं लेकिन कैश से ग्राफिक्स को पकड़ो। गलतफहमी के बारे में खेद है। –

उत्तर

6

यहां एक (बदसूरत) कार्य-केंद्र है और यह सुनिश्चित करने के लिए छवियों का आकार बदलता है कि वे सभी आपकी स्लाइड पर फिट हैं।

विवरण ब्लॉक के ठीक नीचे, अपने 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> 

सीएसएस छवियों की ऊंचाई को ओवरफ्लो से बचने के लिए सीमित करेगा।

जे एस jQuery लोड होगा और उसके बाद सभी पैरा तत्व है जो एक <img> तत्व मिल जाए, और .centered वर्ग है, जो सेट text-align: center जोड़ें।

jQuery का एक ही संस्करण स्लीडिफी द्वारा बाद में लोड किया गया है, लेकिन मुझे <script> ब्लॉक को लोड करने के लिए सीधे आगे बढ़ने का तरीका नहीं मिला है।

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

हालांकि, आप प्रत्येक छवि के लिए यह करने के लिए की आवश्यकता होगी:

वैकल्पिक रूप से, आप मैन्युअल रूप से भी इस का उपयोग करते हुए सादे HTML को प्राप्त कर सकता है।

संबंधित मुद्दे