Please note this is a technical article to help people embed theCrag stuff on their blog and WordPress sites. If you don't know, embeding means you can type in a resource url (eg photo) and the website will render it as the actual photo rather then the url you typed in. This is very handy shorthand for saving a lot of HTML coding. This is a really exciting area because it is not just photos that can be embedded, but content as well.
If you want to read about embeding external photos and videos into theCrag descriptions and forums then read the Embeding photos and videos article.
This article is a technical how to article for people who have either got expertise in WordPress or in setting up client side oEmbed.
Currently embeding theCrag stuff is limited to theCrag photos, competitions, ascent facets and streams.
http://www.thecrag.com/photo/*
http://www.thecrag.com/competition/* [under development]
http://www.thecrag.com/*/ascents/* [under development]
http://www.thecrag.com/*/stream [under development]
http://www.thecrag.com/climber/*/stream/mine [under development]
A demonstration of each of these in action on a WordPress site can be seen here:
http://www.simon-dale.com/demo-of-thecrag-photo-embeding-on-wordpress/
http://www.simon-dale.com/demo-of-thecrag-competitions-embeding-of-wordpress/
http://www.simon-dale.com/demo-of-thecrag-ascents-logbook-embeding-in-wordpress/
Note that if you are embedding through an https page then you should call the above urls using https, which tells theCrag oEmbed service to return https resource references.
Further resources will be developed. Please let us know if you have a good idea you would like to persue on your page.
WordPressVoltar a conteúdo
The latest WordPress releases have significant embeding capability, but it will not embed theCrag conent without you making some amendments. To make it easier we have written a WordPress plugin ('WP theCrag oEmbed', current version 1.1.1) which you can manually install from your WordPress dashboard. Unfortunately we have not yet registered this plugin with WordPress so you cannot search and install.
Instructions for manually installing the 'WP theCrag oEmbed' plugin (requires WordPress 4.0):
- Download the plugin from github: https://github.com/theCrag/wp-thecrag-oembed
- Login to your WordPress site dashboad as administrator.
- Click on Plugins link on the left of the page.
- Click 'Add New' link near the top of the page.
- Click 'Upload Plugin' link near the top of the page.
- Select the plugin zip file you save to your computer and then click 'Install Now'.
- Activate the plugin.
Now that you are setup, type in the embed url on it's own line in your post/page and WordPress should do the rest. If you do not want a particular url turned into embeded content then make sure it is not on it's own line (hint turn it into an link or quote it).
If you no longer want to embed theCrag content on your WordPress site then just deactivate the plugin.
Please note that WordPress caches the oEmbed results so even if you deactivate the plugin you may still have embedded content on pages.
Content on theCrag is licensed under Creative Commons - Attribution Non-Commercial Share Alike. If you want to use this content commercially then you will have to contact us to negotiate the terms, otherwise you should attribute content to theCrag. If in doubt please just contact us.
Note that content provided under an alternate publisher copyright may not be returned.
DIY oEmbedVoltar a conteúdo
If you do not know what oEmbed is then you are brave reading this far. Here is some extra reading:
theCrag oEmbed provider url is:
http://www.thecrag.com/oembed
And accepts the following parameters:
- format: theCrag currently only supports 'json' format. If this parameter is omitted then json will be assumed.
- url: mandatory url of the resource you want to embed.
- callback: the callback function name for jsonp
- maxwidth: part of the standard, but most sites are going responsive so should not be used
- maxheight: ditto
Returns json resource as per oEmbed standard.
The url regular expressions that are currently accepted are:
- https?:\/\/(www\.)?thecrag\.com\/photo\/\d+
- https?:\/\/(www\.)?thecrag\.com\/competition\/.+
- https?:\/\/(www\.)?thecrag\.com\/(.*\/)?ascents(\/.*)?
- https?:\/\/(www\.)?thecrag\.com\/climbing\/(.+)\/stream
- https?:\/\/(www\.)?thecrag\.com\/climber\/([^\/\?]+)\/stream\/mine
In accordance with the Creative Commons - Attribution Non-Commercial Share Alike license please attribute the author for photos which will be returned in the json. If you want to use this commercially then please contact us to negotiate the terms.
Please note that some content by publishers may not be returned or may be returned with alternate an alternate license as descripted in the returned json parameters.
Note that resizing oembed iframe height to the size of the embeded content can be problematic. We are successfulling using David Bradshaw's iframe-resizer for this purpose:
https://github.com/davidjbradshaw/iframe-resizer
theCrag iframe appropriate content is templated with the iframeResizer.contentWindow.min.js javascript file referenced and the iframe returned with a class="thecrag-oembed".
You can find the iframeResizer.min.js hosted on theCrag here:
http://static.thecrag.com/iframe-resizer/iframeResizer.min.js
Then in your code you must initialise the iframe resizer something like:
<script>
$(function(){
$('iframe.thecrag-oembed').iFrameResize({
checkOrigin: false
});
});
</script>