I'm trying to make a little HTML file using Rmarkdown. I'm using HTML to set the images into the blocks.
Here is what I currently have.
But my desired goal is do something like this. Where I have two images per block.
I'm not sure if HTML is the best way to do this but I am open to using knitr
Here is my code
---
title: "Landing Page"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
```
<div style="text-align:center;">
<div style="display:inline-block;">
<div class="wp-block-image" style="display:inline-block;">
<center>
<figure class="aligncenter size-full">
<a href="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png" target="_blank" rel="noopener">
<img loading="lazy" width="517" height="261" src="https://www.idashboards.com/wp-content/uploads/2020/06/IT-Service-Desk.png" alt="" class="wp-image-5379">
</a>
<br>
<figcaption>
<b><u><font size="+2">
Dashboard Example 1
</font size>
</b></u>
</figcaption>
</figure>
</center>
</div>
</div>
Adopted from this answer, you can put images in a kable:
---
title: "Fun with flags"
output: html_document
---
```{r results='asis'}
image_stringer = function(abbr){
sprintf('', abbr)
}
dat <- data.frame(
col1 = c(image_stringer('nl'), image_stringer('de')),
col2 = c(image_stringer('ch'), image_stringer('be'))
)
library(knitr)
kable(dat, col.names=NULL)
```
Alternatively, you can put your image in a <table> format (for an example, just inspect the output of the kable block), which gives wider control over formatting.
Related
I'm using the windmill template in the pagedreport package in R to generate a report (Link to Package). Here is a snippet of my YAML
---
title: "Here is my Title"
subtitle: "Here is my subtitle"
author: "Here is my name"
date: "`r format(Sys.time(), '%B %Y')`"
output:
pagedreport::paged_windmill:
front_img: Cover Page and Logo/cover.png
logo: Cover Page and Logo/logo.svg
logo_to_white: TRUE
img_to_dark: TRUE
toc: TRUE
knit: pagedown::chrome_print
toc-title: "Table of Contents"
main-color: "#6d1d26"
google-font: FALSE
main-font: "Arial"
header-font: "Arial"
---
```{r, echo=FALSE}
htmltools::img(src = logo.png"),
alt = 'logo',
style = 'position:absolute; bottom:-10%; right:40%; padding:10px; width: 110px; height: 128px')
```
When I run this, my logo only goes on the cover page and not on every other page in the report. Is there any way to put my logo on each page in the report?
In R Markdown, with html output, I want to use the following raw HTML code, together with some R Markdown code to include an image in a grid.
The HTML code starting with "<" appears to propagate to HTML output without problems. However, HTML code such as "::before" gets converted to <p>::before</p> which is not what I want.
How can I specify to R Markdown that I want to 'escape' certain pieces of code, such as "::before" and "::after", preventing the automatic encapsulation of them in <p> tags?
<div class = "row", id = "abc">
::before
<div class = "col-md-4">
{ style="height: 70px"}
</div>
::after
</div>
You can output those parts of your code using knitr::raw_html(). For your example, the middle line is Markdown, not HTML, so you'd want:
```{r echo=FALSE}
knitr::raw_html(
'<div class = "row", id = "abc">
::before
<div class = "col-md-4">')
```
{ style="height: 70px"}
```{r echo=FALSE}
knitr::raw_html(
'</div>
::after
</div>')
```
Using rmarkdown and the include_graphics function from knitr I would like to be able to do something like:
<img src="image.png" alt="image" width="30%">
Where I can see a small version of an image and click on it to see its full size original version. I am sure there is an easy way to wrap something like:
```{r ,out.width="30%"}
knitr::include_graphics('image.png')
```
within an html link but I can't find how.
What I like with knitr::include_graphics() is that
it's in a chunk so I can generate the image's names with R
it copies images to the final folder where I want my Rmardown code to be compiled.
An example of what I would like to do but I don't how nor if it's possible:
```{r ,out.width="30%"}
images=paste0('image',1:3,'.png')
for( i in images){
#open <a href = i>
knitr::include_graphics(i)
#close </a>
}
```
Should do something like:
<img src="image1.png" alt="image" width="30%">
<img src="image2.png" alt="image" width="30%">
<img src="image3.png" alt="image" width="30%">
You can use the chunk option fig.link, e.g.,
```{r, out.width="30%", fig.link='image.png'}
knitr::include_graphics('image.png')
```
```{r}
images = paste0('image', 1:3, '.png')
```
```{r, out.width="30%", fig.link=images}
knitr::include_graphics(images)
```
you can simply do:
<a href = "./image.png">
```{r, out.width="30%"}
knitr::include_graphics('./image.png')
```
</a>
For me, this works.
adding on top of what Jrm_FRL said, just incase you ment the link takes you where the link is originally from I added this code, had to shorten the link with stackoverflow and imgur, let me know if you have issues.
---
title: "picture_as_link"
author: "stackoverfl"
date: "5/27/2020"
output: html_document
---
<a href = "https://en.wikipedia.org/wiki/Lake_of_the_Ozarks">
```{r, out.width="30%"}
knitr::include_graphics('https://i.stack.imgur.com/JRy36.jpg')
```
</a>
the main idea is showing picture according to selected id:
<div *ngIf="t">
<h2>{{t.name}} details!</h2>
<h3>{{t.description}}</h3>
<img src="images/inside/1.jpg" class = "grid grid-pad">
</div>
instead of 1.jpg i would like to use t.filename? How can i do this?
I am trying to use Nokogiri's CSS method to get some names from my HTML.
This is an example of the HTML:
<section class="container partner-customer padding-bottom--60">
<div>
<div>
<a id="technologies"></a>
<h4 class="center-align">The Team</h4>
</div>
</div>
<div class="consultant list-across wrap">
<div class="engineering">
<img class="" src="https://v0001.jpg" alt="Person 1"/>
<p>Person 1<br>Founder, Chairman & CTO</p>
</div>
<div class="engineering">
<img class="" src="https://v0002.png" alt="Person 2"/></a>
<p>Person 2<br>Founder, VP of Engineering</p>
</div>
<div class="product">
<img class="" src="https://v0003.jpg" alt="Person 3"/></a>
<p>Person 3<br>Product</p>
</div>
<div class="Human Resources & Admin">
<img class="" src="https://v0004.jpg" alt="Person 4"/></a>
<p>Person 4<br>People & Places</p>
</div>
<div class="alliances">
<img class="" src="https://v0005.jpg" alt="Person 5"/></a>
<p>Person 5<br>VP of Alliances</p>
</div>
What I have so far in my people.rake file is the following:
staff_site = Nokogiri::HTML(open("https://www.website.com/company/team-all"))
all_hands = staff_site.css("div.consultant").map(&:text).map(&:squish)
I am having a little trouble getting all elements within the alt="" tag (the name of the person), as it is nested under a few divs.
Currently, using div.consultant, it gets all the names + the roles, i.e. Person 1Founder, Chairman; CTO, instead of just the person's name in alt=.
How could I simply get the element within alt?
Your desired output isn't clear and the HTML is broken.
Start with this:
require 'nokogiri'
doc = Nokogiri::HTML('<html><body><div class="consultant"><img alt="foo"/><img alt="bar" /></div></body></html>')
doc.search('div.consultant img').map{ |img| img['alt'] } # => ["foo", "bar"]
Using text on the output of css isn't a good idea. css returns a NodeSet. text against a NodeSet results in all text being concatenated, which often results in mangled text content forcing you to figure out how to pull it apart again, which, in the end, is horrible code:
doc = Nokogiri::HTML('<html><body><p>foo</p><p>bar</p></body></html>')
doc.search('p').text # => "foobar"
This behavior is documented in NodeSet#text:
Get the inner text of all contained Node objects
Instead, use text (AKA inner_text or content) against the individual nodes, resulting in the exact text for that node, that you can then join as you want:
Returns the content for this Node
doc.search('p').map(&:text) # => ["foo", "bar"]
See "How to avoid joining all text from Nodes when scraping" also.