align multiple figures with `fig.align` - r-markdown

I have multiple figures that are output from a single code chunk. The goal is to have them appear next to each other, centered on the page. So far, I have been unable to make this happen. There is a rendered version of these examples here, which comes from this source document.
This first chunk places two images side-by-side and left-aligned on the page. The code results in 2 <img> tags without anything special, other than the specified width.
```{r test1, out.width='32.8%', fig.show='hold'}
knitr::include_graphics(rep('images/knit-logo.png', 2))
```
<img src="images/knit-logo.png" width="32.8%" />
<img src="images/knit-logo.png" width="32.8%" />
Now say I want the figures centered. So perhaps I try setting fig.align='center'. This center aligns the figures, but now they are no longer side-by-side. In the HTML output, we see that style="display: block; margin: auto;" has been added to the <img> tag.
```{r test2, out.width='32.8%', fig.show='hold', fig.align='center'}
knitr::include_graphics(rep('images/knit-logo.png', 2))
```
<img src="images/knit-logo.png" width="32.8%" style="display: block; margin: auto;" />
<img src="images/knit-logo.png" width="32.8%" style="display: block; margin: auto;" />
Now if I add a figure caption, the images are side-by-side again and centered. In the HTML, we can see that using a fig.cap places the images inside a <div>. The div is centered, but there is no "block" display that keeps the images from appearing on the same line.
```{r test3, out.width='32.8%', fig.show='hold', fig.align='center', fig.cap='A test caption.'}
knitr::include_graphics(rep('images/knit-logo.png', 2))
```
<div class="figure" style="text-align: center">
<img src="images/knit-logo.png" alt="A test caption." width="32.8%" />
<img src="images/knit-logo.png" alt="A test caption." width="32.8%" />
<p class="caption">(\#fig:test3-display)A test caption.</p>
</div>
Is there a way to place multiple figures into a <div class="figure" style="text-align: center"> without specifying a figure caption? It seems like there should be a way to do this, but I haven't found any solutions so far. Ultimately the goal is to have the third set of output (rendered version here) but without the caption.
In addition to the linked GitHub repo and rendered site, here's a minimal standalone Rmd file that replicates the issue:
---
title: "Align multiple figures with `fig.align`"
output: bookdown::html_document2
---
I have multiple figures that are output from a single code chunk. The goal is to
have them appear next to each other, centered on the page. So far, I have been
unable to make this happen. Here are some examples:
This first chunk places two images side-by-side and left-aligned on the page.
The code results in 2 `<img>` tags without anything special, other than the
specified width.
```{r test1, out.width='32.8%', fig.show='hold'}
knitr::include_graphics(rep('https://bookdown.org/yihui/bookdown/images/knit-logo.png', 2))
```
Now say I want the figures centered. So perhaps I try setting
`fig.align='center'`. This center aligns the figures, but now they are no longer
side-by-side. In the HTML output, we see that
`style="display: block; margin: auto;"` has been added to the `<img>` tag.
```{r test2, out.width='32.8%', fig.show='hold', fig.align='center'}
knitr::include_graphics(rep('https://bookdown.org/yihui/bookdown/images/knit-logo.png', 2))
```
Now if I add a figure caption, the images are side-by-side again and centered.
In the HTML, we can see that using a `fig.cap` places the images inside a
`<div>`. The `div` is centered, but there is no "block" display that keeps the
images from appearing on the same line.
```{r test3, out.width='32.8%', fig.show='hold', fig.align='center', fig.cap='A test caption.'}
knitr::include_graphics(rep('https://bookdown.org/yihui/bookdown/images/knit-logo.png', 2))
```

knitr does not center the images on the same line if you omit the chunk option fig.cap in chunk test3, i.e., the CSS attribute text-align: center of the enclosing <div> element is missing in the final HTML output.
A remedy is to add fig.cap = ' ' (must be a blank, not an empty string!). Note that this also adds an empty <p> element (for the caption) below the images which results in some additional whitespace.

Related

Add an image to Rmarkdown Bookdown output before top level heading

The example below (i.e. saved as a file index.rmd ) has the same code chunk to display an image above and below the top level heading, but the image doesn't appear above the top level heading. This occurs if there is a file _output.yml with only this entry bookdown::gitbook: in the same directory.
That line seems to enforce a table of contents (which I want) and that appears to strip out anything (image or text) before the first top level heading by default (which I don't want) - so can this behaviour be modified?
---
site: bookdown::bookdown_site
---
```{r echo=FALSE, message=FALSE, warning=FALSE}
library(imager)
im <- load.image(system.file('extdata/Leonardo_Birds.jpg',package='imager'))
plot(im, axes=FALSE)
```
# R Markdown
```{r echo=FALSE, message=FALSE, warning=FALSE}
library(imager)
im <- load.image(system.file('extdata/Leonardo_Birds.jpg',package='imager'))
plot(im, axes=FALSE)
```
What follows is workaround to your Options 2 and 3, using Markdown and CSS to style images and HTML+CSS to style text; also, using base64 image (transparent gif) generator as an space separator between elements.
Beware of whitespaces! (at the end of each line - place two white spaces and hit ENTER)
Does one of these approaches/hacks work for you? If not, it would be better to delete the answer, it may be misleading to others.
---
title: |
![](www/image.png){width=300px}|
|:-:|
![](www/image.png){width=300px style="display: block; margin:0 auto"}
![](www/image.png){width=300px height=90px align=left}
![](www/image.png){width=300px height=90px align=center}
![](www/image.png){width=300px height=90px align=right}
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){width=150px}
R Markdown Title
<center>R Markdown Title</center>
<p style="text-align: right;">R Markdown Title</p>
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){width=150px}
author: "Author Name"
date: "08/03/2020"
---
Using Markdown table to "style" images |-| (left-aligned), |:-:| (centered) and |-:| (right-aligned) will work well with simple RMarkdown outputs.
I realised that you have an image under # top level heading positioned at the very top of the page - with top:0px. causing image duplication and, possibly, hover problem:
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:0px;height:100px;" />
replace with:
![](http://stackoverflow.com/favicon.ico){width=50px style="display: block; margin:0 auto;"}
and see what will happen.
---
title: |
![](https://i.imgur.com/GiViTbA.png){width=300px style="display: block; margin:0 auto;"}
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){width=50px}
R Markdown Title
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){width=50px}
output:
html_document: default
---
# I'm a top level heading {-}
![](http://stackoverflow.com/favicon.ico){width=50px style="display: block; margin:0 auto;"}
Note, you need to replace the image with a local image if you want to show the image in the rstudio viewer.
The image will be visible in the html file created when you knit, if you open in a browser connected to the internet.
```{r echo=FALSE, message=FALSE, warning=FALSE}
plot(cars)
```
EDIT:
Let's try to find a common ground, A Minimal Book Example, github here.
Adjustments made in index.Rmd:
---
title: |
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){height=300px}
author: "Author Name"
date: "`r Sys.Date()`"
site: bookdown::bookdown_site
output: bookdown::gitbook
---
# Prerequisites
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:50px;height:300px;align:center;" />
This is a _sample_ book written in **Markdown**. You can use anything that Pandoc's Markdown supports, e.g., a math equation $a^2 + b^2 = c^2$.
index.Rmd output:
Adjustments made in Chapter: Introduction (01-intro.Rmd):
# Introduction {#intro}
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){height=240px}
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:50px;height:300px;align:center;" />
You can label chapter and section titles using `{#label}` after them, e.g., we can reference Chapter \#ref(intro). If you do not manually label them, there will be automatic labels anyway, e.g., Chapter \#ref(methods).
01-intro.Rmd output:
With this solution we are "masking" a top level heading (# Introduction) with .png image, which will appear in the Table of Content as text.
Disadvantage: besides the obvious hack, image width must be at least equal or wider than top level heading title.
Note: 3 options are provided here, and none of them are perfect. The perfect solution may rely on modifications to the bookdown package?
Option 1:
Use includes with before_body like this in your _output.yml file (suggested here):
bookdown::gitbook:
css: assets/style.css
includes:
before_body: assets/big-image.html
after_body: assets/footer.html
Disadvantages:
i) Requires making a html file just to insert an image.
ii) If using a web-based image, won't show in Rstudio viewer.
iii) If using a local image, path can get mixed up and won't show in online web html rendering
iv) Includes image at the top of each chapter of bookdown if using before_body: my_image.html. Alternative option in_header: my_image.html does not seem compatible with the sidebar index.
Option 2
Insert image via yaml in index.rmd, using the solution under Tip 3 Add a Logo in your title/header/footer at this blog post
---
title: |
![](my_image.png)
My title
Disadvantages:
i) When you hover over the image, it displays a copy of the image in a slightly different location (Can this "Hover" behaviour be disabled?)
ii) If using a web-based image, won't show in Rstudio viewer.
iii) If using a local image, path can get mixed up and won't show in online web html rendering
Option 3
The code below borrowed from here (which you can place below the top level heading) presumably goes direct through the knitting process and inserts itself in the final html. The issue is that the image doesn't make room for itself and ends up over the first text. Is there some simple html/css to sort this out?
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:0px;height:100px;" />
Disadvantages:
i) Image doesn't make room for itself and ends up over the first text. You can get around this with a hack by coding extra space (trial and error) through the yaml title like this:
title: |
.
.
.
.
site: bookdown::bookdown_site
EDIT
This is superseded by Radovan's accepted answer.
This was the best answer, taking option 3 from my previous answer, and combining a code approach to making the relevant space from Radovan's answer.
You will still have problems if you want to include a title in the YAML (I don't need this, as my title is in the image).
Also, on first loading the page, it presents nicely, but image is not seen if you go to the top of the document using the table of contents (the inheader approach used by this bookdown shows a better behaviour, but appears at the top of every chapter, which is not desired).
---
title: |
![](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==){height=300px}
output:
html_document: default
---
# I'm a top level heading {-}
<img src="https://i.imgur.com/GiViTbA.png" style="position:absolute;top:50px;height:300px;align:center;" />
Note, you need to replace the image with a local image if you want to show the image in the rstudio viewer.
The image will be visible in the html file created when you knit, if you open in a browser connected to the internet.
```{r echo=FALSE, message=FALSE, warning=FALSE}
plot(cars)
```
The problem of hovering the image duplicating the image can be fixed by removing the line below from the css file that is generated at \libs\gitbook-2.6.7\css\style.css
.book .book-header h1 a:hover{color:inherit;text-decoration:none}#media (max-width:1000px){.book .book-header h1{display:none}}
as a result, this code below places the image right above the title:
---
title: |
![class='btn noHover'](images/Stats.png){width=400px style="display: block; margin:0 auto; align:center;" }
<center>GEOG380 Basic Stats with R</center>
---

Creating an if statement in Joomla

I've built a website using a purchased template and Joomla. I have a corporate logo which shows up perfectly on desktop. It comes up way too big on mobile. This is the following code I have entered.
<p><img src="images/Logomakr_7azv9e.png" alt="" width="100%" height="100%" /></p>
How would I write an if statement so that logo/picture only shows up on desktops and not mobile? Or perhaps to make the logo appear, just smaller?
As others have noted, CSS is the best way to do this.
HTML
Add a class to your image so you can target it and remove the height and width values:
<p><img class="logo" src="images/Logomakr_7azv9e.png" alt="" /></p>
CSS
Set the default values for the size of the logo
.logo{
width:100%;
height:100%;
}
Use #media queries to hide the logo on mobile, adjust the viewport from 767px to whatever you prefer
#media (max-width: 767px) {
.logo{display:none;}
}
You do have other options though. You mention that the logo is too wide on mobile, so instead of removing it completely you could also make it smaller:
#media (max-width: 767px) {
.logo{
width:30%;
height:30%;
}
}
Good luck!

Displaying columns with space between them

How I can display columns with space between them? by default they are all following each other and I can't find a way to change that.
Here is an example from youtube:
Depends on how much spacing do you want... when you use a frontend framework sometimes you need to make some tradeoff, development speed vs "not too customized". The sample you take from youtube has less spacing than default column gutter of the framework, so your affirmation of "by default they are all following each other", I think is not quite precise; they have spacing, if you want to remove, just use row collapse as the class of the columns container.
Now, if you want more spacing than the default, you still have options:
You can leave a column between each element, just a matter to add one column offset to each one.
You can change the column gutter size on framework settings (if you're using the CLI version or customized, not the prebuilt)
You can also write some CSS to increase spacing for an specific column container (I won't recommend to do so globally because you could mess with the framework).
Your solution is to use a framework such as Bootstrap or Foundation. in foundation, every 'column' is inside padded, so you're able to display a grid such as this.
Read here for more info: http://foundation.zurb.com/sites/docs/grid.html
This post is tagged with Zurb Foundation, so I will solve it using their classes with what is a little bit of a workaround. For example, if you want three columns with the ability to keep adding items and have it automatically wrap you could have the following simple example with the block grid:
<div class="grid-x small-up-3">
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
<div class="cell">
Placeholder Text
</div>
</div>
and the following CSS
.small-up-3 > .cell {
width: calc(33.33333% - 4px);
margin-left: 2px;
margin-right: 2px;
}
.small-up-3 > .cell:nth-of-type(n+4) {
margin-top: 2px;
}
The calc is needed to subtract your margin from the width of each cell to prevent the wrapping you are seeing when just adding normal margin.

Zurb-foundation: Using divs inside of a label tag

i am using foundation for my first project right now and i really love the functionality it provides out of the box, but i am having trouble with my custom radio boxes.
The idea is to not only have text inside of the radio buttons label, but also an image and some bold text.
As soon as i start using either an img or a bold tag inside of the label, the radio button selection via the labels text is broken.
The code i am using is this
<label for="radio2">
<img src="img/nho_musicians_flute.png">
<input name="radio2" type="radio" id="radio2" style="display:none;" CHECKED>
<span class="custom radio checked"></span>
<b>Radio</b> Button 1
</label>
With this it is only possible to select a radio box by clicking on it DIRECTLY, clicking the text or the image results in erratic selections, it seems that the foundation JS selectors didn't account for extra tags inside of a label.
Is there a way to make this work with foundation, or do i have to resort to workarounds (making the whole text bold and put the image outside of the label)?
Good question, I had the same issues as you when I needed to create custom forms through F4's custom form implementations.
If you look in the implementation (custom.forms.scss) you can see that they use the :before and content: "" in order to be able to achieve this. I suspect that's why you can't add any tags after the <span class="custom radio"></span>
Now what you CAN do as a workaround is to place your custom elements etc inside the <span> element. This will work just fine, but will look wierd as the width and height is very small. But from then on its just a matter of styling it until you get it to look as you want. Here is a really simple example using absolute positioning:
<span class="custom radio">
<span style="position: absolute; top: 0; left: 0; width: 500px; margin-left: 30px;">
<b>test</b> foo
</span>
</span>

Aligning text within a 'hover over' jquery

I am designing a site that has images that when hovered over fade a text appears.
I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.
DIV with text over an image on hover
Here is my amended code, amended
CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}
html
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->
Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!
Any ideas on how to solve this would be greatly appreciated.
Thanks,
John
A simple answer using CSS is to use the :hover pseudo class on an anchor tag.
Set you image container as position:relative in CSS.
Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.
THE HTML
<div class="container">
<a><img src="img.jpg" alt="background">
<div class="text">I will show on hover</div>
</a>
</div>
CSS
div.container{position:relative;}
div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}
a:hover div.text{display:block;}
This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.
w3 schools have some excellent definitions and examples on all the code above if it is new to you.
The effect you are after can be achieved with html and css alone. I would advise you focus on:
design your site on paper
layout your page with html and CSS
add your rollover effects and jQuery animations
before adding the jQuery animation
CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.