add better support for images in the betterland template main section.
diff --git a/inst/rmarkdown/templates/posterdown_betterland/resources/template.html b/inst/rmarkdown/templates/posterdown_betterland/resources/template.html
index 0d5aca5..52980da 100644
--- a/inst/rmarkdown/templates/posterdown_betterland/resources/template.html
+++ b/inst/rmarkdown/templates/posterdown_betterland/resources/template.html
@@ -223,24 +223,29 @@
background-color: $if(primary_colour)$$primary_colour$$else$#0b4545$endif$;
color: $if(main_textcol)$$main_textcol$$else$#FFFFFF90$endif$;
font-family: $if(main_fontfamily)$$main_fontfamily$$else$Special Elite$endif$;
+$if(main_image)$
+background-image: url($main_image$);
+background-position: center; /* Center the image */
+background-repeat: no-repeat; /* Do not repeat the image */
+background-size: cover; /* Resize the background image to cover the entire container */
+$else$
background-image: linear-gradient($if(primary_colour)$$primary_colour$$else$#0b4545$endif$ 50%, $if(secondary_colour)$$secondary_colour$$else$#008080$endif$);
}
+$endif$
.main strong {
color: $if(mainstrong_fontcol)$$mainstrong_fontcol$$else$#FFFFFF$endif$;
}
-#main-img-left {
+img.main-img-left {
width: $if(mainimage_leftsize)$$mainimage_leftsize$$else$20%$endif$;
left: 0.5in;
bottom: 0.2in;
position: absolute;
-opacity: 0.5
}
-#main-img-right {
+img.main-img-right {
width: $if(mainimage_rightsize)$$mainimage_rightsize$$else$18%$endif$;
right: 0.5in;
bottom: 0.2in;
position: absolute;
-opacity: 0.6
}
.main p {
padding-top: 20%;
@@ -345,8 +350,8 @@
</div>
<div class="main">
<p>$for(main_findings)$$main_findings$$sep$<br><br> $endfor$</p>
-<img id="main-img-left" src='$if(logoleft_name)$$logoleft_name$$else$$endif$'>
-<img id="main-img-right" src='$if(logoright_name)$$logoright_name$$else$$endif$'>
+$if(logoleft_name)$$logoleft_name$$else$$endif$
+$if(logoright_name)$$logoright_name$$else$$endif$
</div>
</div>
diff --git a/inst/rmarkdown/templates/posterdown_betterland/skeleton/skeleton.Rmd b/inst/rmarkdown/templates/posterdown_betterland/skeleton/skeleton.Rmd
index 28fd1a7..44eeba2 100644
--- a/inst/rmarkdown/templates/posterdown_betterland/skeleton/skeleton.Rmd
+++ b/inst/rmarkdown/templates/posterdown_betterland/skeleton/skeleton.Rmd
@@ -12,9 +12,9 @@
address: Department of Earth Sceicnes, Brock University
main_findings:
- "Make **better posters** with RMarkdown + **posterdown**."
- - "{.main_pic}"
-logoleft_name: https://raw.githubusercontent.com/brentthorne/posterdown/master/images/qr-code-black.png
-logoright_name: https://raw.githubusercontent.com/brentthorne/posterdown/master/images/betterhexlogo.png
+ - '{.main_pic}'
+logoleft_name: '{.main-img-left}'
+logoright_name: '{.main-img-right}'
output:
posterdown::posterdown_betterland:
self_contained: false
@@ -36,6 +36,12 @@
options(knitr.table.format = "html")
```
+```{r myplot, include=FALSE}
+svg('myplot.svg')
+plot(iris$Sepal.Length, iris$Sepal.Width)
+dev.off()
+```
+
# Introduction
This is the `posterdown_betterland` template for the {posterdown} package! I was inspired by the twitter thread of [Mike Morrison](https://mobile.twitter.com/mikemorrison/status/1110191245035479041) and wanted to apply the `#betterposter` concept to the reproducible (yet simple to use) functionality of the {posterdown} package [@R-posterdown]. If you're not an R user don't sweat as you do **NOT** need to use it at all! Feel free to use only the Markdown functionality of this package :)