I'm trying to embed an "clickable" image (Html code with links and shapes in it) to a new style sharepoint site. As the new one doesn't feature the option to edit the source code I tried to embed it via an iframe and the embed webpart. I managed to get some html code in the iframe via the srcdoc attribute but it isn't showing my image. The image is on the Sharepoint and the link also correct.
The Code:
<iframe srcdoc="<img src=https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/SC%20EMEA%20CoE%20Stamp%20SLENDER%20neg.png" width="400" height="400" "="" src="https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/Weltkarte%20fertig.jpg?csf=1&web=1&e=v7OI07"></iframe>
The scr attribute is for the Sharepoint, because without it it doesn't accept the code.
Is it just not possible or did I something wrong?
What is stopping you from using the Image Web part?
Cheers
Truez
I know it has almost been 2 years but just in-case you still need the solution here it is:
The Solution:
Your img syntax is incorrect, you do not have a closing ">". Here is the proper syntax:
<iframe srcdoc="
<img src='https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/SC%20EMEA%20CoE%20Stamp%20SLENDER%20neg.png' width='400' height='400'/>" src="https://Testsite.com/:i:/r/sites/GBPMTest1/Shared%20Documents/Pictures/Weltkarte%20fertig.jpg?csf=1&web=1&e=v7OI07" width="iframe width here" height="iframe height here"></iframe>
Don't forget to include an iframe height and width as SharePoint requires it. Also remember when embedding any html code that requires ", you need to change it to ' instead as it will break the code.
Related
I'm writing a documentation for my codebase in Confluence and I want to add dynamically generated gitgraphs (https://gitgraphjs.com/).
Doing it with images is obviously possible, but I'd like to insert the HTML instead so that modifications can be done directly in the confluence page.
I've managed to use 'HTML Macro' to insert the HTML code, but it only renders as a tiny square inside the confluence page.
I tried fiddling around with CSS and tried to backwards-engineer the classes that Confluence was using, without success. I'm using Confluence 6.13.10
Thanks for the help
What do you use within the HTML macro? An <iframe>?
If iframe is used, then pass it some parameters:
<iframe src="https://gitgraphjs.com/..." frameborder=0 width="100%" height="1080px" scrolling="no"></iframe>
I am using django cms to create my website and a google calendar. However, when I added the code, it comes up as just plain code and won't display the calendar.
here is the link to my site:
http://138.68.6.151:8000/en/events
Can someone explain how to fix this?
I did some more research and found that I had to add the following inside my settings.py
TEXT_ADDITIONAL_TAGS = ('iframe',)
TEXT_ADDITIONAL_ATTRIBUTES = ('scrolling', 'allowfullscreen', 'frameborder',
After going to your site and using browser's console to inspect your iframe, I found that the iframe tag is improper (like a text in quotes) and therefore its not rendering properly. In your paragraph tag, the iframe tag should be in following way:
<p><iframe frameborder="0" height="500" scrolling="no" src="https://calendar.google.com/calendar/embed?height=500&wkst=1&bgcolor=%23FFFFFF&src=6uemf0u3aqg89knqb4ndic0n04%40group.calendar.google.com&color=%23853104&ctz=America%2FChicago" style="border-width:0" width="500"></iframe></p>
To verify this, after playing at front-end level I got following results.
Previous state (also notice the HTML code on the right)
After making above mentioned changes in the code at frond-end (notice on the right that now the iframe tag is highlighted as a tag which was not the case previously):
So the iframe tag is not rendering properly in your case.
Since you are using iframe in Django CMS, recipe mentioned in this stackoverflow post will assist you.
I had an HTML Object tag like this:
<object class="someclass" id="someid" type="image/svg+xml" data="/relative/path/to/svg/file.svg">Your browser does not support SVG files, and so your visualization cannot dislpay</object>
This displayed my SVG image file fine. However, I wanted to move the SVG image file outside of the website root, so that users that do not have an account cannot see the file. So the data attribute would become a link to an intermediate page, which would construct the path to the SVG image and show it to the browser.
Now I have:
<object class="someclass" id="someid" type="image/svg+xml" data="/some/intermediate/page?image=/parameter/file.svg">Your browser does not support SVG files, and so your visualization cannot dislpay</object>
However, this does not display the image. When I use an Img tag instead, it does display when I right click it and select 'view image'. I tried things such as urlencode the query part of the URL, urlencoding the entire string, replacing the question mark for %3F, switching between Object and Img tags, but it does not seem to work.
Thanks for the help!
The problem ended up being HTTP header information. SVG images have to be served as header('Content-type: image/svg+xml'), and not just as XML
Though the OP has solved his problem, I came across a similar error in which the object tag was unable to render the data. The error turned out to be due to the X-Frame-Options, which in some cases is by default set to DENY.
If this is the case, you need to set to the appropriate value to be able to render.
I got an assignment to build a website and I was wondering, how can I change a iframe on clicking a link without using javascript or giving the iframe a ID?
I'd rather do it with a ID aswell, but yeah, that's not allowed.
You can use an html link outside of the iframe, and set the target to the name of the iframe.
See the w3schools Example Here
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p>W3Schools.com</p>
If the link is inside the iframe, you simply need to set target=_self on the link.
W3Schools.com</p>
Is there a way to embed a div from another website on my own without using anything other than HTML and/or CSS? I have not really started on JS, jQuery or PHP yet so I would like to see if there is a way without it.
The div I would like to embed is:
http://imgur.com/user/BeachyBoy/favorites/#likes
You can use an iframe to insert content on your site from another domain. Not sure you can isolate just a single div though. The code to embed external content is:
<iframe src="http://addressofsite.com"></iframe>
see here for info on how to use the tag and all its available options.
You can use iframe to implement.
For example:
<iframe src="http://www.google.com" width="100%" height="4000" frameborder="0" scrolling="yes"></iframe>
If you need to import a chunk of the page, it is not possible only using HTML/CSS. it involves cross-domain issue, so jquery, ajax..are needed.