Is there a way to embed html in an iframe?

Photoblogging
1

I have a html file — an interactive chart — that I’d like to embed in a post. When I upload the file I see a placeholder thumbnail but not the image itself, and copying the HTML seems to generate an iframe, see below, but doesn’t seem to work in a post.

<iframe width="950" height="650" src="/files/chart.html" frameborder="0"> </iframe>

Any tips? Thanks

3

I’ve had another strange HTML issue:
the design of my email signature is displaying as different on micro.blog render (see comparison screenshots identifying where the surprising extra vertical height is coming from).
Any ideas any web devs?

4

Hum, the empty box after upload is normal (I think I remember that happening when I would upload GIFs, etc. When the upload fails (like an unsupported file) the copy operation doesn’t actually put anything on the pasteboard so we may find a solution to this). Try clicking on the uploaded resource to see if a page trys to load with the asset.

Update: seeing files instead of uploads is new to me. The copied HTML may not have the correct file path.

5

If it is the space just after the table tag and before the stars, should be easy enough to come up with some CSS targeted at removing the extra space. I could tinker in the morning if someone doesn’t come along behind me with an answer.

6

interesting! so actually… the iframe code i copied isn’t actually being generated on the uploads page, but was actually already on the clipboard from me testing the old site :confused: So, the files/ path is incorrect, but the clarification is that there isn’t any content actually being copied. And clicking on the asset doesn’t open the html, it tries and fails to load some seemingly arbitrarily-named jpg.

7

Might still be able to get it working by copy/pasting the HTML from the page you are trying to upload. I have had success with running regular HTML code through the new post interface.

Another option is to paste it into a new page via the page creation interface and set it to not be included in the menu. Then you would be able to test that the page is correct by navigating to https://your-site/what-you-named-the-page/ … after which you will know the correct url for the iframe.

Update: although the second option would wrap it in your theme.

8

interesting, thanks for the comments.

I was actually able to get it to load (testing - misc.) but only by referencing the file located at a url outside of micro.blog: here’s the iframe that ended up working;

<iframe width="600" height="300" src="https://davidtingle.com/files/nhl_chart.html" frameborder="0"> </iframe>

So there’s no issue loading / rendering the html - it works just fine. But I can’t get the upload to work.

1 Like
9

Please do pal, I’ve managed to avoid learning CSS so would appreciate it!

1 Like
10

Haven’t forgotten ya. I want an actual computer to for messing around with the CSS and I have a hard time talking myself into the office I setup. Ended up updating the operating system this morning; but, next time I sit down Imma pull up your page and see if I can get the gap closed.

11

@warner it looks like line 191 of main.css is adding 70px to margin-top for div.about.

Screen Shot 2021-04-01 at 9.20.42 AM
Screen Shot 2021-04-01 at 9.20.42 AM1327×1009 138 KB

12

Thanks for identifying. Do you know how I can fix? I currently just use vanilla (Typewriter) theme (with dark mode plugin obv).
Happy to dip toe into customizing (at some point I need to learn to, in order to add a SimpleAnalytics tracking script (like the Plausible plugin).

13

Let me peek at the theme repository and get back to yah. Should just need to comment out that line but I want to make sure I can find it first.

14

Okay, so go to Design, click on Edit Custom Themes, under the list of custom files added or overwritten by the typewriter theme find the file static/css/main.css, find the following bit that should be on or around line 190:

/* =Post page */
.about {
  color: #828282;
  margin-top: 70px;
  text-align: center;
  line-height: 24px; }

Comment out the top margin like so:

/* =Post page */
.about {
  color: #828282;
  /*margin-top: 70px;*/
  text-align: center;
  line-height: 24px; }

Click Update Template and once the cached stylesheet is refreshed in the browser you should see the gap close. If you want to play with the gap, just come back to the file, remove the comment begin and end, and play with the value set for the top margin.

1 Like