I would like to add a hyperlink function to a PNG I have added to my flexdashboard.
I've managed to add a hyperlink to a text as shown in the code below (in the first section), but I would like to add it to the PNG icon I have added in the second section of my code
---
title: "PNG Hyperlink"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
# Homepage
## Column {data-width=500}
### Introduction
<font size = "5">Please read user manual before exploring this dashboard. You can find user manual by clicking <a href="file:///C:/Users/Filip/Desktop/Dashboard%20guide.htm" target=_blank>here</a></font><br><br><br>
### Introduction 2
<font size = "5">Please read user manual before exploring this dashboard. You can find user manual by clicking the following icon</font><br><br><br>
```{r}
knitr::include_graphics("document-icon.png")
```
Additionally, it would be great if someone knows how to make this picture smaller and wrap text arround it.
Add an href attribute.
This should work
I have managed to solve this issue by working with the code following #samarmohan input.
Here is the code
### Introduction 2
<font size = "5">Please read user manual before exploring this dashboard. You can find user manual by clicking the following icon</font><br><br><br>
<a href="file:///C:/Users/Filip/Desktop/Dashboard%20guide.htm" target=_blank><center>
```{r dpi=10}
knitr::include_graphics("document-icon.png")
```
</center></a>
I have added href in order to add hyperlink to the icon and make the icon smaller using dpi = inside the {r} box
Related
I am writing a report with Knitr and am trying to use bookdown to automatically number figures and refer to them.
Here is my header :
---
title: "My title"
author: "Me"
email: "My email"
output:
bookdown::html_document2:
number_sections: true
toc : true
fig_caption : TRUE
---
```{r setup, include=FALSE}
library(bookdown)
knitr::opts_chunk$set(echo = TRUE)
setwd(dir=dirname(rstudioapi::getActiveDocumentContext()$path))
```
And my first figure :
```{r fig1,echo=F, eval=T, fig.align = 'center', fig.cap="My first figure"}
knitr::include_graphics(here::here("images", "Formule 3.png"))
```
When I knit it, I can see my figure but under it, I can see:
(#fig:fig1)My first figure
I expected:
Figure 1 : My first figure
When I remove fig1 in the code chunk, I get an automatic number, but I do not know how to refer to it, because I do not have any reference.
Could anybody explain me what I am doing wrong?
Thank you in advance.
Best regards,
Jean-Luc.
If knitr::include_graphics() does not work, you can use the markdown notation for figure insertion supported by pandoc . See also r2evans' answer for more detail (e.g. about how to resize the figure). You can cross-reference to the figure, as shown below:
<!-- figure insertion -->
<!-- Reference to the figure in a text -->
Figure \#ref(fig:tag-for-figure) shows an awesome results...
I'm working on a single RMD file with 'output: bookdown::html_document2'. I noticed that when cross-referencing to figures in tabbed sections (e.g. # Header {.tabset}), clicking on the link works nicely for content in the first tab but not for any of the following tabs. I mean, clicking on the number linking to the figure in the second tab does not open/activate the second tab.
Among the tons of questions regarding cross-referencing, I was not able to find any dealing with the same problem. I'm afraid that it might just not be possible to 'activate' a tab by clicking on a cross-reference, but I do hope to find some workaround. I'm happy about any hints.
Here's a minimal example:
---
title: "Untitled"
date: "17 2 2021"
output:
bookdown::html_document2:
number_sections: FALSE
---
# First section {.tabset}
## Subsection 1
```{r plot1, fig.cap="A first figure"}
plot(cars)
```
## Subsection 2
```{r plot2, fig.cap="A second figure"}
plot(cars)
```
# Second section
Here I want to cross-reference Figures \#ref(fig:plot1) and \#ref(fig:plot2)
```
If we take a look at the final html created, the "figure number link" is a normal html anchor tag linking to the image itself, so clicking on it the page will be scrolled to the figure position, without activating the containing tab.
As suggested by #cderv I would add some js code in order to achieve your desired result.
First of all I would work on naming:
set a naming convention for images contained in tabs (e.g. simply adding a fixed prefix "TBIMG-")
set a naming convention for tabs containing this kind of images (e.g. another custom prefix "TBTAB-" + figure name)
So we'll end up having images with name "TBIMG-name1", "TBIMG-name2", etc.. contained in "TBTAB-name1", "TBTAB-name2", etc.
Now we just need to bind the functionality to the click event of "figure number links" (only the ones having our special prefix).
In their href attribute we'll find the image id.
This one can lead us to the containing tab (using our second custom prefix)
Then we just activate the tab and finally we scroll the page to the tab itself.
Here's the JS code you need to add:
$(document).on("click", 'a[href^="#fig:TBIMG"]', function(event){
//this in order to prevent the page to scroll to the image itself
event.preventDefault();
//from the img name we build the tab name
var tabKey = 'TBTAB' + $(this).attr('href').replace('#fig:TBIMG', '');
//set the tab active
var tabPlc = $('.nav[role="tablist"] a[href="#' + tabKey + '"]')
tabPlc.tab('show');
//the page scrolls to the tab containing the image
$("html, body").animate({ scrollTop: tabPlc.offset().top }, 700);
});
Maybe this could help you:
---
title: "Untitled"
date: "17 2 2021"
output:
bookdown::html_document2:
number_sections: FALSE
---
# First section {.tabset}
## Subsection 1
```{r plot1, fig.cap="A first figure"}
plot(cars)
```
## Subsection 2
```{r plot2, fig.cap="A second figure"}
plot(cars)
```
# Second section
Here I want to cross-reference Figures [1](#subsection-1) and [2](#subsection-2)
The links are good, but not working on Firefox neither Chromium. I dot not know why it does not refresh the window when we click on the link.
Here is the Html code that works to activate the tab (Subsection 2) (I do know how to implement it here, sorry):
<a role="tab" data-toggle="tab" href="#subsection-2" aria-controls="subsection-2" aria-expanded="true">Subsection 2</a>
I'm curious if anyone knows in Rmarkdown how to not select a tab by default and show it's content? I'm actually getting pretty close, so for example using the code below I'm getting nothing popping up by default because of that "dummy" tab with no content, but I'd like that dummy tab to not appear. Even if I could change tab to completely white I think that would do the trick, or other suggestions are welcome. I think this could be accomplished in a .css file but not sure how to edit ONE tab with a css for a html output.
---
title: "Example"
output:
html_document:
theme: simplex
code_folding: hide
output: bookdown::html_document2
---
##Stuff {.tabset .tabset-fade .tabset-pills}
###{-}
###A
###B {.tabset .tabset-fad .tabset-pills}
###C {.tabset .tabset-fad .tabset-pills}
Did a work around method that seemed to work. Made a css file, inspected properties in google chrome, selected for something applicable to only that tab and changed the background color to white and made it non clickable: {background-color: #ffffff;pointer-events: none;}
Is there any way to reduce the right and left margins when shiny-server sees an .Rmd file instead of ui.R and server.R? As you can see below, nearly half of the window is right and left margins. Is there a way to modify an internal css script to make the change or is there a more simple solution by adding an geometry option in the markdown header?
Here is the sample code generated when I create a new Shiny Rmarkdown file in Rstudio:
---
title: "Untitled"
author: "Me"
date: "10/13/2015"
output: html_document
runtime: shiny
---
This R Markdown document is made interactive using Shiny. Unlike the more traditional workflow of creating static reports, you can now create documents that allow your readers to change the assumptions underlying your analysis and see the results immediately.
To learn more, see [Interative Documents](http://rmarkdown.rstudio.com/authoring_shiny.html).
## Inputs and Outputs
You can embed Shiny inputs and outputs in your document. Outputs are automatically updated whenever inputs change. This demonstrates how a standard R plot can be made interactive by wrapping it in the Shiny `renderPlot` function. The `selectInput` and `sliderInput` functions create the input widgets used to drive the plot.
```{r, echo=FALSE}
inputPanel(
selectInput("n_breaks", label = "Number of bins:",
choices = c(10, 20, 35, 50), selected = 20),
sliderInput("bw_adjust", label = "Bandwidth adjustment:",
min = 0.2, max = 2, value = 1, step = 0.2)
)
renderPlot({
hist(faithful$eruptions, probability = TRUE, breaks = as.numeric(input$n_breaks),
xlab = "Duration (minutes)", main = "Geyser eruption duration")
dens <- density(faithful$eruptions, adjust = input$bw_adjust)
lines(dens, col = "blue")
})
```
## Embedded Application
It's also possible to embed an entire Shiny application within an R Markdown document using the `shinyAppDir` function. This example embeds a Shiny application located in another directory:
```{r, echo=FALSE}
shinyAppDir(
system.file("examples/06_tabsets", package="shiny"),
options=list(
width="100%", height=550
)
)
```
Note the use of the `height` parameter to determine how much vertical space the embedded application should occupy.
You can also use the `shinyApp` function to define an application inline rather then in an external directory.
In all of R code chunks above the `echo = FALSE` attribute is used. This is to prevent the R code within the chunk from rendering in the document alongside the Shiny components.
After looking at the HTML produced by an Rmd file, it looks like the main content is under a div with class main-content and it has a max-width property. Looking at the rmarkdown source code, I believe that perhaps this happens here. Try adding a css rule like div.main-container { max-width: inherit; }
The above CSS change did not work for me, as I am having the same issue rendering HTML from Rmd in RStudio, but this did work. Added after YAML in Rmd:
<style>
.main-container {
max-width: 940px;
margin-left: 0;
margin-right: auto;
}
</style>
I'm writing an application, a reporter with heirarchy of folders and files, in the lower heirarchy level there are 2 types of reports: the simple one is a flat (non link) report that being presented as a single simple line.
the second type is a link with a general description in the header and if you press the link you get a full report.
example: if I run a telnet command, I will see the command in the header and if I want to see the entire session with the device I will press the link and it will be presented.
My problem is that most of this lined-files are small but the OS reserve a minimum space for every file so I loss alot of disk space for nothing.
The solution I want to implement is a "dummy" links, which will be presented and will behave like a regular links but actually will be stored in the same file like their "parent" (probably with alot of other links like them).
The solutions I saw so far are only for "jumping" inside a page but this is not what I'm looking for, I want it to be presented like a seperated file and I dont want the "parent" file to present this information at all (the only way to see it will be by pressing the link and even then it will present only this information and not the other file content).
any idea guys?
To link to a specific part in a web page, place an anchor link where you want the user to go to when they click a link with:
<a name="anchor"></a>
and link to it with:
Click here
You can replace "anchor" with a more descriptive name if needed.
To hide/show a div (the following code is untested, but should work)
JQuery solution (If you're using JQuery):
function toggle(divname) {
$(divname).toggle();
}
The corresponding HTML:
<div id="content">some content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>
Non-JQuery Solution:
function toggle(divname) {
var adiv = document.getElementById(divname);
if (adiv.style.display === 'block' || adiv.style.display === '') {
adiv.style.display = 'none';
} else {
adiv.style.display = 'block'
}
}
The HTML:
<div style="display:hidden" id="content">Content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>