diff --git a/Readme.org b/Readme.org index 7ec5ca7..de46cf0 100644 --- a/Readme.org +++ b/Readme.org @@ -85,8 +85,9 @@ - [[Javascript Src Block][Javascript Src Block]]([[https://github.com/yjwen/org-reveal#javascript-src-block][gh]]) - [[Perl Src Block (not klipsified)][Perl Src Block (not klipsified)]]([[https://github.com/yjwen/org-reveal#perl-src-block-(not-klipsified)][gh]]) - [[Properties for Sub-headings][Properties for Sub-headings]]([[https://github.com/yjwen/org-reveal#properties-for-sub-headings][gh]]) - - [[My org-reveal presentation among many within the same Org-mode file][My org-reveal presentation among many within the same Org-mode file]]([[https://github.com/yjwen/org-reveal#my-org-reveal-presentation-among-many-within-the-same-org-mode-file][gh]]) + - [[Customize iframe background slide][Customize iframe background slide]]([[https://github.com/yjwen/org-reveal#customize-iframe-background-slide][gh]]) - [[Thanks][Thanks]]([[https://github.com/yjwen/org-reveal#thanks][gh]]) + * Reveal.js and Org-Reveal - *Reveal.js* is a tool for creating good-looking HTML presentations, @@ -320,8 +321,8 @@ Available transitions are: default|cube|page|concave|zoom|linear|fade|none. ** Set Slide Background - Slide background can be set to a color, an image or a repeating image - array by setting heading properties. + Slide background can be set to a color, an image, a repeating image + array or an iframe by setting heading properties. *** Single Colored Background :PROPERTIES: @@ -379,6 +380,25 @@ Available transitions are: default|cube|page|concave|zoom|linear|fade|none. :END: #+END_SRC +*** Iframe background + :PROPERTIES: + :reveal_background_iframe: https://hakim.se + :reveal_background: rgb(0,0,0) + :reveal_background_opacity: 0.8 + :END: + + When =iframe= is being used as slide background, the content of the slide will + be put inside a dedicated division. The other background options can be used to + configure this new division. The =reveal_background= supports both color and + image as a normal slide. +#+BEGIN_SRC org + :PROPERTIES: + :reveal_background_iframe: https://hakim.se + :reveal_background: rgb(0,0,0) + :reveal_background_opacity: 0.8 + :END: +#+END_SRC + *** Title Slide Background Image To set the title slide's background image, please specify the @@ -908,19 +928,34 @@ to properties of sub-headings like: This way, each org-reveal presentation can have its own settings. An example heading with corresponding settings would look like: #+BEGIN_SRC org -* My org-reveal presentation among many within the same Org-mode file -:PROPERTIES: -:reveal_overview: t -:EXPORT_AUTHOR: Test Author -:EXPORT_DATE: 2018-01-01 -:EXPORT_TITLE: My Title -:EXPORT_EMAIL: Test@example.com -:EXPORT_OPTIONS: num:nil toc:nil reveal_keyboard:t reveal_overview:t -:EXPORT_REVEAL_HLEVEL: 3 -:EXPORT_REVEAL_MARGIN: 200 -:END: + ,* My org-reveal presentation among many within the same Org-mode file + :PROPERTIES: + :reveal_overview: t + :EXPORT_AUTHOR: Test Author + :EXPORT_DATE: 2018-01-01 + :EXPORT_TITLE: My Title + :EXPORT_EMAIL: Test@example.com + :EXPORT_OPTIONS: num:nil toc:nil reveal_keyboard:t reveal_overview:t + :EXPORT_REVEAL_HLEVEL: 3 + :EXPORT_REVEAL_MARGIN: 200 + :END: #+END_SRC +** Customize iframe background slide +:PROPERTIES: +:reveal_background_iframe: https://hakim.se +:reveal_background: rgb(0,0,0) +:reveal_background_opacity: 0.8 +:reveal_background_position: absolute +:reveal_extra_attr: height: 200px; bottom: -700px; border-radius: 10px; padding: 20px +:END: +#+REVEAL_HTML: +#+BEGIN_SRC org + :reveal_background_position: absolute + :reveal_extra_attr: height: 200px; bottom: -700px; border-radius: 10px; padding: 20px +#+END_SRC +#+REVEAL_HTML: + * Thanks Courtesy to: diff --git a/ox-reveal.el b/ox-reveal.el index 9acc31a..2df9afe 100644 --- a/ox-reveal.el +++ b/ox-reveal.el @@ -385,6 +385,13 @@ exporter." (format "\n" contents)) (org-html-special-block special-block contents info)))) +(defun org-reveal-is-background-img (info) + "Check if a background string is an image format or not." + (and info + (string-match-p + "\\(\\(^\\(http\\|https\\|file\\)://\\)\\|\\(\\\.\\(svg\\|png\\|jpg\\|jpeg\\|gif\\|bmp\\)\\([?#\\\s]\\|$\\)\\)\\)" + info))) + (defun org-reveal-slide-section-tag (headline info for-split) "Generate the
tag for a slide." (let* ((preferred-id (or (org-element-property :CUSTOM_ID headline) @@ -394,30 +401,65 @@ exporter." (default-slide-background-position (plist-get info :reveal-default-slide-background-position)) (default-slide-background-repeat (plist-get info :reveal-default-slide-background-repeat)) (default-slide-background-transition (plist-get info :reveal-default-slide-background-transition)) -) - (format "
\n" - (org-html--make-attribute-string - `(:id ,(concat org-reveal-slide-id-head - preferred-id - (if for-split "-split" "")) - :class ,(org-element-property :HTML_CONTAINER_CLASS headline) - :data-transition ,(org-element-property :REVEAL_DATA_TRANSITION headline) - :data-state ,(org-element-property :REVEAL_DATA_STATE headline) - :data-background ,(or (org-element-property :REVEAL_BACKGROUND headline) - default-slide-background) - :data-background-size ,(or (org-element-property :REVEAL_BACKGROUND_SIZE headline) - default-slide-background-size) - :data-background-position ,(or (org-element-property :REVEAL_BACKGROUND_POSITION headline) - default-slide-background-position) - :data-background-repeat ,(or (org-element-property :REVEAL_BACKGROUND_REPEAT headline) - default-slide-background-repeat) - :data-background-transition ,(or (org-element-property :REVEAL_BACKGROUND_TRANS headline) - default-slide-background-transition) - :data-background-opacity - ,(or (org-element-property :REVEAL_BACKGROUND_OPACITY headline) - (plist-get info :reveal-default-slide-background-opacity)))) - (let ((extra-attrs (org-element-property :REVEAL_EXTRA_ATTR headline))) - (if-format " %s" extra-attrs))))) + (slide-background-iframe (org-element-property :REVEAL_BACKGROUND_IFRAME headline)) + ) + (if slide-background-iframe + ;; for iframe, we will wrap the slide in a new div + ;; all the background configuration of the original slide will be used for this new div + (format "
\n
\n" + (org-html--make-attribute-string + `(:id ,(concat org-reveal-slide-id-head + preferred-id + (if for-split "-split" "")) + :class ,(org-element-property :HTML_CONTAINER_CLASS headline) + :data-transition ,(org-element-property :REVEAL_DATA_TRANSITION headline) + :data-state ,(org-element-property :REVEAL_DATA_STATE headline) + :data-background-iframe ,slide-background-iframe)) + (concat + "style=\"" + (let ((attr (or (org-element-property :REVEAL_BACKGROUND headline) + default-slide-background))) + (if (org-reveal-is-background-img attr) + (format "background-image: url('%s'); " attr) + (if-format "background: %s; " attr))) + (let ((attr (or (org-element-property :REVEAL_BACKGROUND_REPEAT headline) + default-slide-background-repeat))) + (if-format "background-repeat: %s; " attr)) + (let ((attr (or (org-element-property :REVEAL_BACKGROUND_SIZE headline) + default-slide-background))) + (if-format "background-size: %s; " attr)) + (let ((attr (or (org-element-property :REVEAL_BACKGROUND_POSITION headline) + default-slide-background))) + (if-format "position: %s; " attr)) + (let ((attr (or (org-element-property :REVEAL_BACKGROUND_OPACITY headline) + default-slide-background))) + (if-format "opacity: %s; " attr)) + (let ((extra-attrs (org-element-property :REVEAL_EXTRA_ATTR headline))) + (if-format "%s;" extra-attrs)) + "\"")) + (format "
\n" + (org-html--make-attribute-string + `(:id ,(concat org-reveal-slide-id-head + preferred-id + (if for-split "-split" "")) + :class ,(org-element-property :HTML_CONTAINER_CLASS headline) + :data-transition ,(org-element-property :REVEAL_DATA_TRANSITION headline) + :data-state ,(org-element-property :REVEAL_DATA_STATE headline) + :data-background ,(or (org-element-property :REVEAL_BACKGROUND headline) + default-slide-background) + :data-background-size ,(or (org-element-property :REVEAL_BACKGROUND_SIZE headline) + default-slide-background-size) + :data-background-position ,(or (org-element-property :REVEAL_BACKGROUND_POSITION headline) + default-slide-background-position) + :data-background-repeat ,(or (org-element-property :REVEAL_BACKGROUND_REPEAT headline) + default-slide-background-repeat) + :data-background-transition ,(or (org-element-property :REVEAL_BACKGROUND_TRANS headline) + default-slide-background-transition) + :data-background-opacity + ,(or (org-element-property :REVEAL_BACKGROUND_OPACITY headline) + (plist-get info :reveal-default-slide-background-opacity)))) + (let ((extra-attrs (org-element-property :REVEAL_EXTRA_ATTR headline))) + (if-format " %s" extra-attrs)))))) ;; Copied from org-html-headline and modified to embed org-reveal ;; specific attributes. @@ -483,7 +525,11 @@ holding contextual information." (concat ;; Slide footer if any footer-div - "
\n
\n"))))))) + (if (org-element-property :REVEAL_BACKGROUND_IFRAME headline) + "") + "
\n
\n") + (if (org-element-property :REVEAL_BACKGROUND_IFRAME headline) + ""))))))) (defgroup org-export-reveal nil "Options for exporting Orgmode files to reveal.js HTML pressentations."