Indexhibit Support

Hi. I'm testing options for a straightforward news page.

I've tried (and rejected) the Simple News plugin (clunky), and Wordpress with the iFramed plugin (scrollbars). I'm now looking at using Tumblr, embedded with 'tumblr js' (something I picked up here, on the forum).

It works nicely, picking up the CSS I've already set up for Indexhibit, but it seems limited and I don't understand how i can expand it to include things like posting date.

Here's my quick test.

And here's an example of the functionality I'm after.

Any idea how Jody did it?

This works much better. Me and friend played around with it for our upcoming
site.

You might need to edit his JS to get the right functionality, but it's much better than tumblrs copy/paste JS link.

Thanks AUAN. Looks very interesting. I'm a newbie, so not quite sure how to utilize this. I downloaded the JS, edited it to include my tumblr name, and uploaded it to my indexhibit's js folder. Then I created a new exhibit and entered this into the text box:

< script type="text/javascript" src="http://www.richardnicholson.com/indexhibit/ndxz-studio/site/js/tumblrBadge-1.1.js">

Nothing happening. Do I need to edit the index.php?

Thanks, Richard.

Didn't somebody release a Tumblr plugin via the forum? I can't remember...it's not hard though...

Hmm, if they did, I missed it searching 'Tumblr' - I just came up with a few lengthy discussions trouble-shooting scrollbar issues with the iFramed plugin, and a couple of references to Tumblr's embed tumblr js.

The other nice implementation of a blog (Wordpress) that I came across was here:

The Get Involved Blog

I think you (Vaska) set that up for them?

I'm new to keeping a blog, and Tumblr looks even more user-friendly than Wordpress, so if I can embed Tumblr into my Indexhibit I'll be very happy.

ai caramba... ;)

If you want to embed a wordpress blog into iE it's almost backwards logic. I mean personally why embed a CMS inside another CMS?

You are right that tumblr is easier and more disposable, but wordpress does have more features.

As to your code question we did it this way:

1. <div id="tumblr-badge"></div>
2. <script type="text/javascript" src="http://www.firstyeardesign.com/cms/ndxz-studio/site/fydtheme/js/tumblrBadge-1.1.js"></script>

EDIT: Because it was my friend who worked on the badge, from what I can see the script generates itself in the div that has a particular ID.

Thanks AUAN. I've got it working now. It still needs some tweaking, as by default it doesn't show a post's title. But overall, it looks like a more flexible solution than tumblr/js.

I came across this script which grabs everything I need from a Tumblr blog. I just dropped it into Indexhibit's text editor, and replaced 'yourtumblr' with my tumblr name. Seems to work:

1. <script type="text/javascript" src="http://yourtumblr.tumblr.com/api/read/json"></script>

document.onload = most_recent();

function most_recent(){

Oh, that didn't work. Find the whole script here.

That does exactly what the tumblr badge does, which is convert JSON markup into html/css. It appears to only do text posts?

Yes, but it's a shorter, simpler bit of code, so I think I have a better chance of understanding and editing it. Once I've figured it out, I'll take another look at Tumblrbadge. Yes, I think it only renders Tumblr text posts, but these can contain images. I'm new to Tumblr too, and I'm not sure if I need anything other than text posts.

The three news sections on my test page here (temporary) show the default rendering of each script. Obviously I need to figure out the code and tweak to my liking. Thank you for putting me on to this. R

Update. I've tried to edit the tumblrbadge script, but without much success (I don't know javascript). However in the comments on the tumblrbadge page (comments #69 and #73) someone has posted an edited version of the script which includes post titles (and other functionality).

I'm finding it a bit buggy though in testing - sometimes it fails to load the page. Also, when tested on this Internet Explorer rendering page, it never loads, with any version of IE.

The shorter simpler script I mentioned a couple of posts back, seems to successfully render in IE6/7/8. Through trial and error I've successfully edited it to change the output from DATE, CLICKABLE TITLE, POST to TITLE (non-clickable), DATE, POST. Which gives me this (needs styling). I'd like to be able to take the time stamp off the date, but I think that's not so simple. The edited code is (remove spaces from div tags):

document.onload = most_recent();
function most_recent(){
for(var i=0;i

continued.... The edited code is (remove spaces from div tags):

document.onload = most_recent();
function most_recent(){
for(var i=0;i

try again... The edited code is (remove spaces from div tags):

document.onload = most_recent();
function most_recent(){
for(var i=0;i< 30;i++){
var title = tumblr_api_read.posts[i]['regular-title'];
var date = tumblr_api_read.posts[i]['date'];
var body = tumblr_api_read.posts[i]['regular-body'];
document.write('< div class=tumblr_title>' + title + '< /div>< div class=tumblr_date>' + date + '< /div>< div class=tumblr_body>' + body + '< /div>');
}
}

Incidentally, I've realized that the page I mentioned at the top of this thread is actually a tumblr page, with the Indexhibit menu embeddded in an iFrame. Is this a possible solution to all the problems i.e. scrollbars) people have when trying to iframe a third party blog within their indexhibit site?

the tumblr badge almost works for me..

Some titles get definitely hugly on the way, but it works. Just needs some fine tuning.
Anyone knows how to get links a tad smaller? Font automatically gets huge for no reason…

http://mc.lautre.net/pongo/index.php?/photonews/

Could also be fine-tuned but I find that embedding the whole archive page actually doesn't work that bad and I might go with that as a final solution :)

Example of Embedded Tumblr Archive

Just decided to have fun and copy-paste the whole code from my tumblr archive page…
It kinda worked. Looks hugly, but I'm sure with some sleep and effort, it could actually look like something..

Live example

example moved here

If you use firebug you can track down the css selectors generated automatically from the script...

the structure of the css selectors is:

1. ol.tumblr_posts { ... }          /* for all posts */
2. li.tumblr_post { ... }          /* for each post */
3. img.tumblr_photo { ... }        /* for each image of a post */
4. tumblr_caption { ... }          /* for each caption of a post */
5. tumblr_caption p { ... }        /* for each paragraph tag in a caption of a post */

Tumblr Plugin

gave this a go the other day, and forgot i had it.

pulls your tumblr feed into the content area via a js script, you may need to edit the plugin to allow for content text etc. by adding:

1. $s = $rs['content'];

instead of

1. $s = '';

download here

just drop the js file in site/js/ and enter your tumblr username where it says to enter.

then drop the exhibit.tumblr.php file in the site/plugin/ folder, then select it from the format drop down on the page you would like it to display.

turn off page processing to avoid any spacing issues etc.

@Beam - nice work!

Just wondering - why did you implement this as a exhibition rather then a plugin?

but will he see it?

In a way it makes sense that this is an exhibition format instead of a plugin. Because, the page won't have anything else on it but Tumblr...so why even bother with a plugin then.

Well, that's the logic I see there...could go either way though.

Oh yeah, and exhibition formats have more access to building the template whereas the plugins do not. So, you can get your js to insert itself...just one less hassle...

@ Beam - I haven't been able to make this work. Have followed the instructions correctly, I think. What am I missing? Relevant page is here, if someone would be kind enough to take a look.

I have the same problem as jimmythesaint is it to do with the username? I just entered the name of my blog is that correct?

your username is the name of your blog. so its the part of the url you enter when you sign up. ie. username.tumblr.com

i made it an exhibit as i didnt need anything else on the page except tumblr, plus like vaska said, using an exhibit allowed the use of the js function, i started off that way but didnt need it in the end.

it wont take much to change it into a plugin. just add the css to your style sheet and mark it up differently etc.

@jimmythesaint have you turned off page processing and tiling?

ive added a preview of the exhibit so you can take a look at my code
here

like this?

var tumblrBadge = function () {
    // User settings
    var settings = {
        userName : myusernamehere?, // Your Tumblr user name
        itemsToShow : 15, // Number of Tumblr posts to retrieve
        itemToAddBadgeTo : "tumblr-badge", // Id of HTML element to put badge code into
        imageSize : 500, // Values can be 75, 100, 250, 400 or 500
        shortPublishDate : true, // Whether the publishing date should be cut shorter
        timeToWait : 2000 // Milliseconds, 1000 = 1 second

just wondering does the theme you are using on tumblr have any effect of this?

it shouldn't it's a feed.

@beam - Yes, I should've said, I turned off page processing and tiling. And I used the correct username. Had a look at your site with Firebug, but to be honest I don't know what I'm looking for really...

jimmy, just had a look at your tumblr blog by using your username, and you dont have any posts? meaning the script will not return a feed.

this script / exhibit does not embed your tumblr template or page, it will return only a feed of your posts, like a rss feed, which you can style via css. which is included in the plugin.

try making a post, as a test with an image, and i bet it will show up on your page.

and sam, yes thats where you put in your user / blog name. remember to wrap it like "username"

Nice! thanks beam only problem is it does not seem to work in safari

mypage

oh sorry no its all good! thanks loads beam!

Beam - Yup, that was indeed the problem. I don't think it would've occurred to me either. Still got a bit of playing around to do but at least it works. Many thanks for the help. Much appreciated.

I presume it won't work with video (my test video doesn't display anyway) ... or is there a way?

just images /text for the time being. glad you got it up.

Hmm, I can't seem to get this to work. I've edited the plugin and entered my correct username into the js file.

Can anybody take a look for me?
http://fehillustration.com/index.php?/blog/

Hello Beam,
I'm completely noobie in javascript)
How can I change the the layout of my blog:

from:
- POST
- DATE
to:
- DATE
- POST

I just want the date to be on the top of the post.

@ c64admin

copy everything here into your tumblr.js file and save, then add a

1. padding-bottom: 10px;

or whatever to

1. .tumblr .tumblr-post-date

^ add that css in the exhibit.tumblr.php

Thanx a lot, Beam! Everything works fine!

so I was able to make this work for my primary tumblr, but I have a second under the same username and was wondering if there was a way to edit the code to make it work?

1. so on my page I have my primary tumblr on my page<a href="http://dake.tumblr.com/">http://dake.tumblr.com/</a>
2. <a href="http://www.kelseydake.com/index.php?/blog/progress/2/">same feed on my indexhibit</a>  

1. but I want to also link this one:
2. <a href="http://telefono.tumblr.com/">http://telefono.tumblr.com/</a>
3. which is under the same username but has a different url entirely

any advice?

I'd like to see someday a tumblr ajax-based (without page reloading) plugin with "previous 10 posts / next 10 posts", search box

Hi, has someone understood how to make the main tumblr title smaller with beam's plugin? (THANK YOU BEAM!)
The CSS in the plugin gives rules to the text, but not to the title. since the title comes from the exhibition, i guess it's in the js, but I stare at it and can't figure out where..

Ok, I managed to change the color (you have to give a color attribute to the #content) but the size is still not changing.

Use firebug a firefox plugin to change your css and use the inspect button to track down the desired selector...

elenabooh post your site.

are you on about the main title, as in the page title, thats wrapped in h1 tags you can change that in your css.

if your on about the tumblr title / quote / caption etc, thats wrapped in em tags , so your css would be

ul.tumblr li em , its in the plugin i think.

thank you beam! I was nearly there... it's the h1! ok, thanks a lot. anyway:

this is my site (very rough construction).
http://booh.it/index.php?

I am actually doing some tests because I cannot embed video with the plugin, so in the About section there is a Blog exhibit, which has the tumblr plugin,
a Blogjs exh, which has the js called from the text page, and now I'm figuring out the iframe possibility.

Hi there.

I just wanted to share my experience with embedding tumblr so that others can use it on there site.

This is super simple but works for me as it embeds my blog exactly how it appears on tumblr.

Here's how I did it;

I have 3 blogs running on my site in different sections.

www.katebones.com

Hope this works for anyone that needs it.

Hi there.

I just wanted to share my experience with embedding tumblr so that others can use it on there site.

This is super simple but works for me as it embeds my blog exactly how it appears on tumblr.

Here's how I did it;

I have 3 blogs running on my site in different sections.

www.katebones.com

Hope this works for anyone that needs it.