Fork me on GitHub

Friday, April 27, 2007

Rant-of-the-day: Internet Explorer 7

w00t! the most used browser on the Earth got its damn upgrade, so that it now has a decent supports for CSS and (you won’t believe it) alpha transparency in PNG’s! Great! Yay! Weeeeeh.

921_ie7logo.gifOK. Now the bad news.

Put a video from Youtube on your page, then let’s have any javascript more complex than alert(’hello world’);, like for instance slimbox the image lightbox implementation we use in lightbox plugin we have in our alpha (lightbox is that box appearing in the middle of the page with the nice fade transition).

You’ll get a “Cannot display web page” error, and no content for your web page :/

here’s the code from youtube

<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/BrjSKMgGXJw"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/BrjSKMgGXJw" 
type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed>
</object>

first of all, this code does not validate, and so breaks the validation of your blog (if you’re using flatpress) here’s a working and validating markup:

<object width="425" height="350" data="http://www.youtube.com/v/BrjSKMgGXJw">
<param name="movie" value="http://www.youtube.com/v/BrjSKMgGXJw"></param>
<param name="wmode" value="transparent"></param>
</object>

307.jpgstill, the wmode and transparent couple is what breaks IE7 (d’oh). This parameter makes your flash nicely not overlap other contents. In fact, as Flash is an external plugin object it is usually drawn OVER the rest over the content. But if, say, we have a dropdown menu, we would wont it to appear OVER the flash object and not BEHIND. So this is the reason for having the transparent parameter (as far as I’ve understood :P): it will make the plugin behave how you would expect, to stay as it should stay :)

Anyway, if you need IE to work (and you should), then your markup should read

<object width="425" height="350" data="http://www.youtube.com/v/BrjSKMgGXJw">
<param name="movie" value="http://www.youtube.com/v/BrjSKMgGXJw"></param>
</object>

So, no, “transparent” thingie. In most of the cases you shouldn’t have issues, though.

Please notice this may not be related (only) to IE but to Flash… Firefox and Opera are not affected.

Now.

Oh, dear NoWhereMan, are you really telling use we should edit our markup every time we want to add a video?

Well, not really. If you have FP alpha you can (and you should!) use the cool [unsupported video] tag, which automagically generates the correct and valid markup. And now you can even say w00t.

It currently works with youtube and google video.

Here’s a description.

Bye :)

Saturday, April 21, 2007

Javascript cookie

I’ve added a small javascript cookie to the comment form so the next time you’ll have to fill the antispam only :) (if it works :P)

bye

Sunday, April 15, 2007

Adding Gravatars to FlatPress

Yeah, I know it’s not this big discovery, I already knew Gravatar, but I didn’t know they were so easy to implement.

What is a gravatar?

A gravatar, or globally recognized avatar, is quite simply an 80×80 pixel avatar image that follows you from weblog to weblog appearing beside your name when you comment on gravatar enabled sites. Avatars help identify your posts on web forums, so why not on weblogs?

First, register to http://site.gravatar.com/

Choose your Gravatar.

Then, open your theme’s comments.tpl

Find the lines between {comment}{/comment} tags.

Paste in the following, after the
{include file=shared:commentadminctrls.tpl} and before the {$content}

<img class="avatar"
src="http://www.gravatar.com/avatar.php?gravatar_id={$email|md5}&size=40" 
alt="Avatar for {$name}" title="Avatar for {$name}" width="40" height="40" />

Of course you can paste it anywhere else, even though it must stay between the {comment} block.

Paste then this to your style.css (or something along the lines… it’s your taste, at this point)

img.avatar {
        float:right;
        margin: 10pt;
        padding: 2px;
        border: solid #ddd 1px
}

You’re done :)

You can find more info on what parameters you can pass to the img src url reading here: http://site.gravatar.com/site/implement

I’ve also managed to have an hack for SPB, if you’re interested. But it’s very hackish :/

Open sb_comments.php, then search for the line saying

'if ( isset( $comment_entry_data[ 'EMAIL' ] ) ) { 
/* other stuff here */ 
}

after that line, paste this

// yeah, this way I'm doing the isset twice, 
// but at least instructions are simpler for you
 $comment_email = isset($comment_entry_data['EMAIL'])? $comment_entry_data['EMAIL'] : '';
                $grav_url = "http://www.gravatar.com/avatar.php?gravatar_id=".md5($comment_email)."&size=40"; 
                $avatar = "<img class=\"avatar\" src=\"$grav_url\" alt=\"Avatar for $name\"".
                          "width=\"40\" height=\"40\" title=\"Avatar for $name\" />";

then, you’ll have a bunch of $blog_entry[’…’]; change the last one (”$entry_array[ ‘entry’ ]”) into the following

$entry_array[ 'entry' ] = $avatar . blog_to_html( $comment_entry_data[ 'CONTENT' ], true, false, true, true ) . '<br clear="all" />';

It looks like there’s no cleaner way :/

Bye :)

Monday, April 9, 2007

Whoops

Ouch. Sorry, I forgot.

Happy Easter.

Erm… so late…

Friday, April 6, 2007

Lightbox, small graphic bug

I’ve update slimbox to 1.3 in FP Crescendo alpha, but I’ve forgot to update its CSS with the last version (required)

You can download it here
http://www.nowherela … .it/misc/slimbox.css

and the ovewrite the one you find in fp-plugins/lightbox/res/

bye :)