I have just created a simple interactive map using leaflet package in R. Something like this
leaflet() %>% addTiles()
Now I would like to embed it in my wordpress website.
I clicked on the export button of RStudio Viewer and chosen "Save as web page...", then stored the .html in my local computer.
I tried to embed this map in a post in my WP website by clicking on "Add a media" in the editor of the page and the choosing the .html previously stored. But I get the error:
"1 file could not be uploaded because the file type is not supported."
I tried to open the html file in an editor and copy and paste the (very long, full of coordinates) html code into the html tab of WP page editor. The editor convert this code into
<div id="htmlwidget_container">
<div id="htmlwidget-2390" class="leaflet html-widget" style="width: 100%; height: 400px;"></div> </div>
and I don't see any map in the visual tab.
I really don't know how to proceed. Any help will be appreciated. As you have noticed I am completely new to WP and web applications.
Thanks a lot,
jacopo
U can try to save the widget to a .html file and import this .html file to your media library.
library(htmlwidgets)
library(DT)
a <- datatable(iris)
saveWidget(a, "datatable-iris-example.html")
Next, import the .html file to your media library. Then, add the shortcode to your post. Here's how to encode it in the page when editing the blog post:
<iframe seamless src="http://www.phillipburger.net/wordpress/wp-
content/uploads/2015/05/datatable-iris-example.html" width="100%"
height="500"></iframe>
All credits go to Phillip Burger and his post.
Anyone got a better method?
I have not qa tested this but... my logic is use the raw HTML widget and add a simple php include line. kinda like this
<h3>My aweseome R map</h3>
<?php include 'saved_file.html';?>
The concept comes from Static Content CMS concepts where you import so to speak existing pieces.
Steps:
1) Install the plugin which allows embedding extra File Extensions, and check .html in that plugin's options page.
2) now try to upload .html file in WP.
3) embed the uploaded file as <iframe> element, or use plugins like : include-me or include-url or simple-include
I know this post is old but I just cobbled together a way to do this and wanted to share.
I knew I could save my plot as an html file using the same method #OBB3 described above, and I knew that I wanted to embed it on my website using <iframe>, but I could not figure out how to actually host the file on the internet to then point my <iframe> to.
I ended up finding a GitHub solution, which has the added benefit that I can easily change my plot, push those changes, and the plot will be automatically updated on my website:
Create a new repo
Add the .html file of your plot to the repo
Go to Settings > Pages, and under "Source" choose the "main" branch.
Point your iframe to http://username.github.io/repository/myplot (filling in the bold sections with your GitHub username, the name of the repo, and pre-extension name of your .html file, respectively)
Credit goes to Elizabeth Ter Sahakyan's post for teaching me most of the above.
All the interactivity and different elements of my plot have been preserved using this method.
Related
This is quite similar to what is being asked in this post, but the post does not seem to work for GitHub's parsed Markdown.
Simply put, let us say I have a PDF in a GitHub repository. Is there any way to render/embed that in a markdown file that is in the repository (e.g. the README.md file)?
I would also be open to having the PDF in a location other than GitHub and linking to it from the markdown file if that is what is required to make this work.
Currently there is no way to preview a pdf in github markdown, however you can embed an image of the pdf.
Edit
From here:
The best you can do is a greasemonkey extension which would allow you to call a pdf viewer, like the recent pdf.js (a Portable Document Format (PDF) viewer that is built with HTML5.), allowing you to view a pdf entirely online, without any pdf plugin installed.
As far as I know, this is not possible on GitHub.
However, you can upload it as a file in the same repository and then add a link to it with a relative path.
[Some title here](FILE_NAME.pdf)
I've created a very simple website in a Codecademy exercise that I'd like to upload to the Internet using Github Pages. Because you are unable to export your index.html and main.css files from Codecademy, I copy and pasted them into a word document, with the intent to get them in their proper file formats. However, I have been unable to find a source to convert these plain text files to .html and .css formats. Also, I've created an account on Github and a new repository, but the tutorial doesn't cover how to insert these two files into this repository.
How do I convert code from text in a document to .html and .css file format, and then insert these files into a Github repository? Thanks!
You don't need any special tools to convert plain text files to html or css.
You simply do it yourself as well.
Follow the steps to change .txt files to .html or .css:
Right-click on your index.txt or main.txt
Click on Rename from the list of options shown
Then it will take you to editing the file name
Navigate the cursor and delete txt
Type html in txt's place
Press Enter
Then you might receive a prompt asking if you are sure. Click on Yes/use .html whichever is appropriate for your prompt.
Voila! you have your file extension changed
Follow a similar approach to change the files to css as well
*Please note that my screenshots are from Mac OS and may look different from yours depending on the Operating system you are using
Hosting Webpages on Github:
Github pages website gives you a step by step guide with visual illustrations on how to do it.
If you are looking for a more comprehensive guide, then please refer to this page.
Seems nonsense, but after struggling a lot with Github Pages I have tested (and worked):
duplicate your first html file and rename it as index.html
drag and drop it into the /docs folder
drag and drop the remaining html files to the /docs folder (including the one you
have duplicated, of course with it´s original name)
commit changes
Goto Settings / Github pages and
Go down till “Github Pages”
Clic on the down arrow in [None] and select “main”
Clic on the down arrow in [/root] and select “/docs”
Clic on [Save]
After a few minutes you will see in [Settings] / “Github Pages”
Your site is published at
https://your_account_name.github.io/your_repo_name/
I know i can convert an MD file to HTML with a bunch of scripts.
I become part of a site which is hosted on github, and it has a place_holder.md file. I can view its content if i isit to place_holder domain. If i change anything in the md file, and i push it to the repo it get updated immediately. If i visit the place_holder.html i can see its content, even that the file is not in the github repo
So my question is:
Does github hoster stuff has an auto md converter which i cannot see? In this case where can i get something like this?
Do webbrowsers understand markdown by default? Then why dont i see place_holder.md in the url?
Thanks
If i visit the place_holder.html i can see its content, even that the file is not in the github repo
Of course you can look at the place_holder.html file it is an html file on your computer that your browser can render so you can view it.
Does github hoster stuff has an auto md converter which i cannot see?
I do not believe github has an "auto md converter".
In this case where can i get something like this?
You can use jekyll to convert your plain text and markdown to static html pages which you can host on the web. You also can get text editors to preview your markdown before you convert it into html which can be helpful. Here is one online text editor.
I'm not sure how you're asking to implement this, but take a look at marked. It's super easy to use and very flexible.
I tried to think about it but I can't find good answers for my website. Let say I have a folder (online) with one PDF file in it. I want to have a link to it, no problem.
Problem :
Now let say somebody else is going to change that pdf file with another one. The first pdf is deleted and the new pdf file has a different name... so my html link is broken.
Question :
How can i create a link that will open the single pdf file in that folder (no matter if the pdf file is replaced and renamed later) ?
I'm open to any solution even javascript or using google drive or don't know what other method. The best would be a link that works like http://mywebsite.com/folder/*.pdf or something like that.
THANK YOU & good luck to find the answer:)
Use a server-side redirect. This wiki page explains this and gives snippets for PHP, ASP.NET and JSP. Where you redirect to is an outcome of enumerating the PDF files in your folder.
The page that executes this code is the published URL to your PDF. E.g. http://mywebsite.com/folder/pdf.aspx.
In a MediaWiki page, I want to have a link to both the file and the file's description page. I've seen this done before, but I can't find it now... it looked something like
{{file|MyFileName|pdf|This is my PDF file}}
It ended up with the page showing "This is my PDF file" as a direct link, and a little PDF icon next to it that was actually a link to the description page. This worked with pdf, doc, docx, ppt, pptx, and more, I believe. The prefix at the beginning was always "file" and the 2nd option was where you put the file type.
Of course, I just tried this on my MediaWiki 1.19.0 installation and it doesn't work.
It looks like some kind of template transclusion, and either my configuration is wrong or I don't have the template or my MediaWiki version is too old. I have the File template, though because I can get half of it working like this:
[[:File:MyFileName.pdf|This is my PDF file]]
I even remember seeing a page describing these two formats as the "old" and "new" ways of linking to files, but I can't find that page now either.
To elaborate, the template would probably have a structure like this:
template:file
[[Media:{{{1|}}}.{{{2|}}}|{{{3|}}}]]<!--
-->[[File:{{{2|}}} icon.png|link=File:{{{1|}}}.{{{2|}}}]]
The go ahead and load an icon image for each file type you plan on using. (If the image isn't icon-sized, you'll want to add a width modifier in there as well.) With this template, {{file|MyFileName|pdf|This is my PDF file}} should generate exactly the output you describe: a direct link to MyFileName.pdf called "This is my PDF file", followed by an embedded image File:Pdf icon.png that is also a link to the description page for MyFileName.pdf.
You can create a simple version of such template like this:
[[Media:{{{1}}}.{{{2}}}|{{{3}}}]] [[:File:{{{1}}}.{{{2}}}|(description)]]
The Media namespace is used to directly link to the file; : specifies that you want to link to the description page and not show the file.
If you want to have an icon for each file type, you would need to {{#switch}} on the file types.