Embedding Iframe in Hugo Site - iframe

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 }}.

Related

How to link author URLs in a bookdown project?

If I have a {pkgdown} website for an R package, I can include the author URLs in _pkgdown.yml:
authors:
Indrajeet Patil:
href: https://sites.google.com/site/indrajeetspatilmorality/
And the URL will be present in the website footer:
How can I do the same for a {bookdown} website?
You should be able to use Markdown syntax to achieve that
author: '[Indrajeet Patil](https://sites.google.com/site/indrajeetspatilmorality/)'
this will make the author Pandoc variable be a link in the HTML template.
Depending on the theme you are using, you may need to tweak the CSS so the the link can correctly be readable on the footer background

Link R markdown title in flexdashboard to a page in the app

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>

Using tags in DocFX markdown frontmatter / YAML header

I have a DocFX site with a number of pages. I would like to include tags at the top of each page via custom template, and I'd like for authors to be able to add tags in the YAML frontmatter, e.g.:
---
title: My Page Title
tags: tag1;tag2;tag3
---
I would then like to be able to access those tags as some sort of array and process them when generating the HTML output.
I've read the docs here which suggests that I can add a schema.json file somewhere and this will automatically detect items in the schema. What I can't work out is how to access the YAML frontmatter in my template when generating the output.
If I need to write a custom .NET plugin to do this then that isn't an issue, but I believe I should be able to access these properties in the template somehow.
Any guidance at all would be very gratefully-received!
I managed to eventually work this out.
In my custom template I have a conceptual.html.primary.tmpl file which provides access to the frontmatter:
<div id="tags">
{{#tags}}{{tags}}{{/tags}}
</div>
Obviously I now need to process the tags, but I now get HTML produced as expected from my .md files:
<div id="tags">
tag1;tag2;tag3
</div>

How to display another html document in place of a standard blog post?

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...
![](/files/page_to_display_instead.html)
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>

Create an Iframe from a Drupal Website

I have a drupal website. I want to generate an Iframe with content from my drupal site, that other sites can embed.
How I think this can be achieved:
Method 1: Create a php script that is autonomous from the drupal engine.
Import the configuration file and hence gain access to the database. Generate the content as a standalone webpage. Distribute the url of this script as the iframe's source url.
Problems: cannot provide drupal functionality within the iframe such as interaction with logged in user.
Method 2: Create the iframe from within drupal.
Create a new module that defines a menu entry using hoom_menu (the url for the iframe). Define the content of the iframe from the callback function of the menu entry. Then Somehow assign a custom page.tpl.php theme for the desired iframe url so that only the content of the iframe is rendered without all the other page elements (blocks, menus, footer, etc.).
Any comments especially for method 2 will be greatly appreciated! :)
I have done exactly this, just this week!
I created a custom module that outputs only the content that I want (using hook_menu()). Then I created a page template (page-mycustommodule.tpl.php) that only has
<?php print $content; ?>
within the <body> tags.
That was basically all. To find out the name that your page template needs to have, use the devel and theme_devel modules, then just click on your page and it will tell you which templates it looked for.
One thing to look out for: any links in the iframe will only change the contents OF THAT FRAME, so when your module creates links, use the proper target to make the parent page jump to the new URL:
l('link text',
'node/' . $mynode->nid,
array('attributes' => array('target' => '_parent')));
I found the answer by Graham very useful. Unfortunately I don't have enough reputation on this site to add a comment so I will have to put my comment in an answer.
5 years on, the information has changed slightly:
The module theme_devel now seems to be called devel_themer instead.
In D7, the template naming pattern is slightly different with 2
hyphens: page--[front|internal/path].tpl.php (see docs)
D7 templates are slightly different based on render arrays, so the template will need to be something like print render($page['content']);
method 3
you can use this module https://www.drupal.org/project/entity_iframe that allows you to create IFRAME READY webpages
install it and go to the display settings of you content type that you want to use as iframe content admin/structure/types/manage/CONTENTTYPE/display
choose the IFRAME view mode and choose the fields you would like to be shown
and then use url like this domain.com/entity_iframe/node/NID and you will have a display with no extra headers footers etc ...
By default a sample EMBED/IFRAME code is provided to the admin under each node the settings
<iframe width="100%" height="300" src="domain.com/entity_iframe/node/96" frameborder="0" class="entity_iframe entity_iframe_node" id="entity_iframe_node_96" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
The settings in admin/config/system/entity_iframe control some of the details of the embed code
For complete control of the theme used you can use in combination with https://www.drupal.org/project/entity_iframe_theme
What do you exactly need to iframe?
A node? A block? Should it be static or dynamic?
You can simply create a node with a php filter and generate the iframe output.
Then you can put this output between <pre> tags to display it as code that users can copy/paste in their site.

Resources