ToiBlogs InfoBase
This article covers how to embed content that you've handed in on InfoBase into a post on the TOI Blog system (Wordpress).
Contents
Images
Overview:
- upload your file(s) to InfoBase
- start a new post on your blog
- add an image
- use the url(s) of the image or image thumbnail in infoBase
- publish your post
Upload in infoBase
Use the regular submission page in infoBase. As soon as you've uploaded the image or when you click an image you've submitted earlier, you'll see something similar to the example below:
You can either use the small thumbnail image that infoBase generated, the full size (original) image in infoBase or both.
- Thumbnail (120x90 pixels)
- Right click the thumbnail and choose "Copy Image Location"/"Copy Image URL" (Use Firefox or Chrome, IE doesn't offer this basic option)
- Original image
- Right click the thumbnail and choose "Copy Link Location"/"Copy link address"/"Copy shortcut"
In this example we're going to use both, using the thumbnail as a link to the original. Leave this page open. Use a new window or tab for the next steps.
Adding an image to your Wordpress Post
Start a new post or edit an existing one. Click "Add an Image"
At the top, click From URL
Use the location (URL) of the thumbnail and paste it into the Image URL field. Use the link location (URL) of the original and paste it into the Link Image To field.
It's highly recommended to specify a title and Alt text for your image
Click insert into Post and you're done.
If the original image you've uploaded is suitable to be embedded into your post directly - the image should be about 400-600 pixels wide - you could use the link of the original for both and not use the thumbnail at all.
Next we'll cover a topic that is a bit more advanced. It allows you to have more fine-grained control over the size of the thumbnail that you can use in your post.
Advanced: controlling the image resolution
The default thumbnails in infoBase are pretty small (120x90 pixels). In some cases this is too small to be useful to embed into a post. Luckily infoBase has a thumbnail system that may provide a solution. You have to do a little work, but it's not too difficult though.
Get the Link location (URL) of your original image in infoBase. This may be something like:
This image is 1024 pixels wide. Far too big to be embedded into a post.
You can use the part that is printed in a bold font to feed to the infoBase Thumbnail Cacher (tm)
The following example is for a thumbnail that is 200 pixels wide:
Append the part that was printed in bold. The result is:
That's it! When you use this URL as the Image URL you'll get a thumbnail of your original image that is 200 pixels wide.
Change the part printed in bold to change the width of the thumbnail:
Flash SWF
The first step is submitting your file(s) to InfoBase. For this tutorial we will use the following example:
This content requires Adobe Flash Player.
- Original file: johnny.fla
- Published file: johnny.swf
When embedding published files on your blog it's a good habit to also link to the original file. This allows visitors of your blog to use your work and give feedback on it.
Start new post
TOI Blogs use WordPress as blogging software.
If you need help creating a new post or editing a post in html you can watch the video.
If you use different blogging software the procedure will be similar. Look for something like 'create post', 'new post' or 'add post'. In the post edit mode look for something like 'html' tab, 'edit as html' or 'html mode'.
Add code snippet
To embed the InfoBase file in your post you need to use a code snippet (a few lines of html code). You can copy the code snippet below and past it into your blog post:
<iframe src="EnterYourUrlHere" width="NumberOfPixels" height="NumberOfPixels" scrolling="no" frameborder="0" style="border:medium none;" ></iframe>enter url of InfoBase url
In the code snippet the 'src' parameter ("EnterYourUrlHere") should be replaced the url of the file you have uploaded to InfoBase. To obtain this url simply view the uploaded file (see thumbnail) by clicking on it and copy the url from the address bar in your browser. In our example the url would be "http://infobase.bk.tudelft.nl/bk/upload/p1100/nym0gjohnnyv2.swf". The code snippet should now look like this:
<iframe src="http://infobase.bk.tudelft.nl/bk/upload/p1100/nym0gjohnnyv2.swf" width="NumberOfPixels" height="NumberOfPixels" scrolling="no" frameborder="0" style="border:medium none;" ></iframe>enter height and width
The file will be embedded in your post and should therefore fit in it. If your published file is for instance 800 pixels in width and 600 pixels in height, but your post is only 400 pixels in width you should enter a value in the code snippet for the width of maximum 400. When maintaining the pixel aspect ratio at a width of 400 pixels the height should be 300 pixels. You should replace the 'width' and 'height' parameters ("NumberOfPixels") in the code snippet with these values. In our example the code snippet should then look like this:
<iframe src="http://infobase.bk.tudelft.nl/bk/upload/p1100/nym0gjohnnyv2.swf" width="400" height="300" scrolling="no" frameborder="0" style="border:medium none;" ></iframe>publish post
Finish the post by adding your comment and again it's a good habit to also add a link to the original working file of the embedded published file. In our case:
original file: <a href="http://infobase.bk.tudelft.nl/bk/upload/p1100/nyllzjohnnyv2.fla">johnny.fla</a>
And finally hit 'publish' to share your post with embedded content with the world.
