A pre-built Hugo website template I have has an iframe (from Google Maps) in the HTML of one of its pages.
<div class="map">
<iframe src="https://www.google.com/maps/embed?...."
width="100%" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
The layout of the resulting webpage is exactly my desired output, but I would like to replace the iframe with a static jpg.
The static jpg I would like to link to is on a different page (but part of the same pre-built Hugo template site), which seems to be generated by a *.toml file:
[params.about]
image = "images/about/photo1.jpg"
Unfortunately, I do not know any HTML nor any toml. Is there any easy way for me to replace the iframe with the jpg?
Or if it's not as easy as a simple cut and paste, are there some particular aspects of HTML that I should read up on?
This is probably not the best answer, but if anyone is looking for a workaround to this sort of a question, this is what I did.
I ended up uploading the jpg to imgur and then changing the iframe tags with a simple img tag:
<div class="map">
<img src="https://www.imgur.com/...."
width="100%" height="400" frameborder="0" style="border:0" allowfullscreen></img>
</div>
If anyone has a better solution, so that I don't have to refer to the src= from a website like imgur, I'd be all ears. I suppose I could try to work out the relative path of where the images are kept, but I'm not sure how to go back up a directory tree.
Related
Using React-Markdown on Next.JS, the post pages are stored as Markdown files, but for some reason the Markdown file won't render the iFrame. However if I use a standard Markdown Editor such as the one I created markdown-edit.now.sh the embed code works perfectly fine.
Any reason as to why it wouldn't be loading on my pages but is fine in
Embed Code
<iframe src="https://open.spotify.com/embed/album/0BRICN5TGMT1WqFcZkYOaF" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
Try this:
<ReactMarkdown escapeHtml={false} source={blog.content} />
ReactMarkdown handles iframes as "dangerous html". To disable this just do:
<ReactMarkdown allowDangerousHtml={true}>Your content here<ReactMarkdown/>
A friend (and like me, HTML novice) shared this bit of code for embedding a live video stream from a camera on a web page:
<iframe scrolling="no" width="640" height="480"
<img src = http://10.0.0.172:8086/stream_simple.html"
stream=BoardOne" frameborder="0" allowfullscreen>
</iframe>
This seems obviously wrong to me (and never mind the missing open quotes before the URL and "BoardOne"). In fact, PHPStorm flags a "Tag start is not closed" error right after the "480". The unclosed img tag plopped right in the middle of the iframe attributes can't work, can it?
And yet my friend tells me it does. Worse, when I try to correct it to what seems right to me, he tells me it doesn't work. Here's my version:
<iframe scrolling="no" width="640" height="480"
stream="BoardOne" frameborder="0" allowfullscreen>
<img src="http://10.0.0.172:8086/stream_simple.html"/>
</iframe>
Again, I'm a novice: can someone explain how my friend's code can work and yet he claims mine doesn't?
It "works" depending on what your definition of "works" is.
An iframe is supposed to have a src attribute, and the content of that URL will be rendered into the <iframe> element. The content of an <iframe> element is only fallback content that appears if the browser doesn't understand what an <iframe> is.
In the first case, the HTML is pretty much garbage, so you're depending on how the browser will actually leniently interpret it. It looks like it's largely ignoring the partial <img tag in there and associates the src attribute with the iframe, so it has that attribute and displays the content.
In the second, syntactically correct case, the <iframe> is correctly understood to be an iframe and the <img> to be its fallback content, so it doesn't show up, because your browser understands iframes. And you have moved the src attribute to be an attribute of the <img>, so the iframe is missing a src and doesn't display anything.
Your code definitely works. Your friends code doesn't work. There is no way unclosed tag won't cause a syntax error
The first code example is obviously wrong. You can check HTML validation using a tool like the w3c markup validation tool. Try going to the tool typing in
<!DOCTYPE html>
<html>
<head><title></title></head>
<body>
<iframe scrolling="no" width="640" height="480"
stream="BoardOne" frameborder="0" allowfullscreen>
<img src="http://10.0.0.172:8086/stream_simple.html"/>
</iframe>
</body>
</html>
and read the error messages about the iframe tag.
Also if you are new to HTML and you are relying on your friend to tell you if your code works you should really learn how to test it on your own computer, (in most cases you can just create a plain text file ending in .html extension and open it in a browser), or use an online tool like codepen or codesandbox to test your code.
On my sharepoint I can display my excel file in mht file. but when I get to display the aspx page it keeps asking me if I want to display all content.
I know I just need to change the way the sharepoint goes to the source but if I do change it, the file just try's to download. I do not want that. I wanted to display a directory page that has a few mht files. and while I can display it, it keeps displaying a warning saying its only displaying secure content. How should I go about this, I know it needs to be https but how do I go about this ???
<p>
<strong>
<iframe align="middle" src="\\sharepoint.company.com\sites\Display\SitePages\HTML\Type\fileA.mht" width="100%" height="150%" scrolling="no" ></iframe>
</strong>
</p>
What I had to do was post it as a iframe with a separate page. that got rid of the security problem.
<strong>
<iframe align="middle" src="\\sharepoint.company.com\sites\Display\SitePages\HTML\Type\fileA.aspx" width="100%" height="400px" frameBorder="0"></iframe>
I have multiple .html files that is been created through notepad.
the 1st .html page is link to the rest of the pages
I need a solution to have all the data inserted into 1st page of html but it should open the same way as they open while they are separate pages.
i don't want to create a particular folder and past all files into it so that it opens from there only.
if anyone has a solution please help me with the coding for the same.
I think you're after an <iframe>
i.e.
<iframe src="file1.html" width="400" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="file2.html" width="400" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
<iframe src="file3.html" width="400" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
It almost sounds like you are looking to create a dynamic web page. This means that you want to have several pages that look very similar but with different text and picture elements. To do this you will need to create a database with each element inside it. Then you can create a MENU page with all of the links to all of the pages on it. The links will be assigned to a dedicated ID in the database. When you click on the link it will open up your DYNAMIC web page. Then you can grab the correct database row with POST, run a QUERY on that particular row and then display the elements as you see fit. We can help you, but as Leandro stated, we need some code to be sure of what you are looking for.
Here is an array with a loop to help create a link to all of your pages...
$pages = array('page1','page2',);
foreach($pages as $value) {
echo "<a href='http://www.yourwebsite.com/$value'>$value</a><br>";
}
Does anyone know if it's possible to embed a Google Map using iframe into a Github pages page built using the automatic page generator?
For example, I would like to embed something like this:
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d100921.8397227734!2d-122.50711698562192!3d37.77111185957552!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sGithub!5e0!3m2!1sen!2sus!4v1464784986282" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
When I try to embed the above, however, the iframe element appears to be stripped from the final HTML so that no map is shown.
I looked around a bit and couldn't find much information on embedding maps, or in general, using iframe elements in Github pages.
People appear to have luck embedding Youtube videos within an iframe, but the same tweak does not help with the maps.
Any suggestions?
You will not be allowed to insert iframe from the page generator.
You have to edit your page from, for example, https://github.com/username/repositoryname/blob/gh-pages/index.html, by clicking on edit button (see picture) and insert your iframe code.