I am building a Quarto Blog, in my post I am adding a image to, it shows in my post but at the homepage it gives a error as a thumbnail:
I tried in different ways to insert the image, all of them gave the same result:
Using the visual mode in RStudio
Using image: "An intro to chi-squared test.png in the .qmd header
Using  inside my .qmd
After rendering each one, the image shows inside the post but does not as a thumbnail in my home, as shown in the figure above.
I got it! so I removed the image from inside the post but kept the image command in the post .qmd header.
image: "An intro to chi-squared test.png
Then in my main index.qmd file I added the following below listing:
fields: [image, date, title, description, categories,author]
So my header became:
---
title: "Blog"
about:
template: jolla
image-width: 70%
listing:
contents: posts
fields: [image, date, title, description, categories,author]
sort: "date desc"
type: default
categories: true
sort-ui: false
filter-ui: false
page-layout: full
title-block-banner: true
---
Now my blog looks like this:
Related
and pardon what might be a repeat question, the solutions to the others didn't solve my problem. I'm working on a Hugo site and attempting to embed an iframe. The element shows but the I get the message 'This content is blocked. Contact the site owner to fix the issue.' when it loads, so no one can see the content.
Here is my .md information
+++
title = "Resources"
description = "Hugo, the world's fastest framework for building websites"
date = "2019-02-28"
aliases = ["about-us", "about-hugo", "contact"]
author = "Hugo Authors"
+++
<iframe src="//docs.google.com/spreadsheets...."></iframe>
I've also updated my config.toml file by adding the following:
[markup.goldmark.renderer]
unsafe = true
I'm not sure what I'm missing. Please let me know if you need more information about what I've done. I've tried shortcode as well but that doesn't render anything at all (I'm still new to shortcodes which is why I am embedding the iframe).
Thank you for your time and consideration.
For those who just want to embed an iframe into a Hugo site, like the question title says:
In the examples below, the content between --- is called front matter and it is in YAML syntax. You can add here your own structured data or use predefined Hugo's front matter fields. The rest of the file (below the second ---) is a standard Markdown syntax formatted content.
You don't need to use the YAML syntax in your front matter. Also TOML and JSON formats are supported by Hugo (see docs)
Solution 1: direct HTML in the content
You can add the HTML code itself to the Markdown content (like T.J.'s .md file example in the question). Hugo's markdown engine will then render the iframe as it is.
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---
<iframe src="https://example.com/"></iframe>
Solution 2: custom shortcode
You can implement your own shortcode which can be useful when using some kind of CMS or in a case when you want to style the iframe somehow.
<!-- layouts/shortcodes/iframe.html -->
<iframe src="{{ .Get 0 }}"></iframe>
You can then add iframes to your content in markdown files like this:
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
---
{{< iframe https://example.com/ >}}
Shortcodes allow you also to create named attributes so you would use the shortcode like {{< iframe url="https://example.com/" >}}. The benefit of this solution is that you are free to set up the HTML code that will be rendered when using the iframe shortcode. For more information, see the shortcode docs.
Solution 3: using the front matter
If you build your page from predefined blocks or components or the page is a very simple one where you for example don't use the markdown content but just the front matter fields, you can be interested in this solution which is basically just using the front matter for storing the iframe's URL or other settings you want to use during the HTML rendering.
---
title: "Your title"
description: "Your description, you can add more fields below of course..."
iframe: "https://example.com/"
---
In your layout file, you will get this piece of information by using {{ .Params.iframe }}.
I have an R markdown document that uses flexdashboard and shiny. The document/app has several pages and I would like to be able to link the navbar title defined in the YAML header to the first page so that a user gets the feeling of being redirected to the "Home" page when clicking the title.
I've attached a very simple example of an .Rmd file that uses flexdashboard and has 2 pages. In this example the user should be directed to Page 1 when clicking on App title.
---
title: "App title"
output: flexdashboard::flex_dashboard
runtime: shiny
---
Page 1
====================================================================================
This is some random text on page 1...
Page 2
========================================================================================
And some even more random text on page 2....
I have seen examples where pages are linked within an external .yml file (bookdown) or where the logo/title is linked to an external site, but I couldn't find examples of how to link the navbar title to a section/page within the R markdown document itself.
To add complexity: in my app, the document is used for several applications and the title is therefore read in via an environment variable:
---
title: '`r Sys.getenv("TIER")`'
Any help is much appreciated!
To make the title clickable as link you can use additional JavaScript.
<script>
document.querySelector(".navbar-header").innerHTML =
"<a href=\"path_to_destination\" class=\"navbar-brand navbar-inverse\">
My Dashboard
</a>";
</script>
The querySelector looks for the title element and replaces it with a custom one. Here I replace it with a link to the path_to_destination. You can see the class names which are added to the link, to format the link according to the predefined classes. Otherwise the link is not formatted like the title.
As you said the title is based on some variable we can insert R code like in every other place in the document:
<script>
document.querySelector(".navbar-header").innerHTML =
"`r 2+2`";
</script>
Following this example: https://learn.getgrav.org/forms/blueprints/example-page-blueprint
I created my video.yaml file under "user/themes/MYTHEMENAME/blueprints", contents of its file:
title: Gallery
'#extends':
type: default
context: blueprints://pages
form:
fields:
tabs:
type: tabs
active: 1
fields:
gallery:
type: tab
title: Gallery
fields:
header.txf:
type: text
label: Add a number
default: 5
validate:
required: true
type: int
header.sb:
type: select
label: Select one of the following
default: one
options:
one: One
two: Two
three: Three
Cleared all caches, but i still don't see that tab under "/admin/pages" or "/admin/pages/home" advanced tab. What's wrong? Is it bug?
UPDATED INFO
"user/themes/MYTHEMENAME/MYTHEMENAME.yaml":
enabled: true
dropdown:
enabled: true
"user/config/site.yaml":
title: domain.org
author:
name: Name
email: 'email#mail.com'
metadata:
description: 'analytical news feed'
generator:
Tried to put them under "user/blueprints/pages/" - still not EFFECT! Why such an easy tasks is too complicated in grav...
Your blueprint is correct, it works on my side.
You said you don't see that tab under "/admin/pages" or "/admin/pages/home". This is not how a blueprint works, blueprint is only available for its page template. You didn't mention any sample paths of your page so it seems your page use a different template.
If your blueprint is user/themes/yourtheme/blueprints/video.yaml, it is only available for the pages which use video template, for example user/pages/home/video.md. Your blueprint will not available to all pages on the site.
Similar to modular template, you need to put your blueprint in modular folder: user/themes/yourtheme/blueprints/modular/video.yaml, and your modular page needs to use that template as well user/pages/home/_myvideo/video.md
I've got a blog that I update using R Blogdown. It's got a Hugo theme with YAML configuration and front matter. I host on Netlify. I'd like to create a post where, upon clicking the link for the post, the user sees a totally separate html file instead of the titled post. For example, I thought the following front matter would work where I've placed the desired document inside 'static/files'...
---
title: 'Example blog post'
author: Logit
date: '2018-02-21'
URL: ["/files/page_to_display_instead.html"]
---
But my desired page doesn't load. Instead, my address bar tries to load '/posts/2018-02-21-example-blog-post'
I note that including the following inside the body of my post does exactly what i want and verifies that my relative path, file name, and desired page is correct...
Click [here](/files/page_to_display_instead.html) to see the right page.
But this requires the user make an extra click to get to the content and isn't very elegant.
Likewise, putting the following in the body of the above post comes close to working...
But this solution retains the blog title and theme and just displays my desired page inside a frame. It looks kind of ugly.
There's got to be a simple solution to load or redirect to the desired page instead of the titled post per se. Have I misunderstood the use of Hugo's "URL" variable in my front matter? Should I be using another front matter variable or syntax? Thanks in advance for any suggestions.
EDIT: In addition to Sebastien Rochette's excellent answer below, I discovered that since I'm working in R Markdown, the following solves the problem as well:
```{r, include=FALSE}
shiny::includeHTML("/files/page_to_display_instead.html")
```
I think that you can directly show your html file if you put it directly in the blog folder. The name of the html file would be used as the slug. However, if your html page does not contain your template, you may not want that.
Use iframe
Hence, you can add your html file as an iframe:
---
title: 'Example blog post'
author: Logit
date: '2018-02-21'
---
<iframe width="100%" height="150" name="iframe" src="/files/page_to_display_instead.html"></iframe>
Auto resize iframe to fit content
And if you do not want that your visitors see it as an iframe, you can use some javascript to auto resize the iframe.
You need to add this in the "head" of your theme:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
Then your post will be:
---
title: 'Example blog post'
author: Logit
date: '2018-02-21'
---
<iframe width="100%" height="150" name="iframe" src="/files/page_to_display_instead.html" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>
I have tried a couple of approaches but none worked so far. I want to include an image preview for a blog post written in R markdown (.Rmd) on my main blog page where a number of posts and projects are generally shown. I can make it work in plain markdown (.md) using below code taken from the Hugo academic-theme here
+++
# Optional image to display on homepage (relative to `static/img/` folder).
image_preview = "bubbles.jpg"
+++
The result would look as shown here (see section Projects).
However, I do not know how to translate this to the .Rmd yaml in my blog post. I can include an image at the top using below but since I'm using a toc table of content option, the image is only shown after the toc and thus does not appear in the post preview on the main page.
---
title: some title
author: some author
date: 'some date'
slug: some-slug
categories:
- some category
tags:
- some-tag
output:
blogdown::html_page:
toc: true
number_sections: true
toc_depth: 2
---
Ideally, the image is only shown in the preview on the main page and not in the actual blog post (intention is to "lure" the reader with visually appealing image to actual content) but if not possible otherwise I'm also fine if the image shows on top of the actual post as long as it shows in the preview of the main page.
If the image_preview parameter works with the md document, it should also work with the Rmd one, provided that you use the syntax with : I guess:
---
title: some title
author: some author
date: 'some date'
slug: some-slug
categories:
- some category
tags:
- some-tag
output:
blogdown::html_page:
toc: true
number_sections: true
toc_depth: 2
image_preview: 'bubbles.jpg'
---