I’m working on a redesign for the Podcasts @ PSU site which includes a really cool flash object that our multimedia guy, Zac Zidik, made to sample a few of the top PSU at iTunes U podcasts on the home page. I thought I’d write up a little “how to” for replacing the home page image with a flash object on a Blogs@Penn State blog.
Keep in mind, this covers only if you want to replace the homepage-image with a Flash object. You don’t need to alter templates if you just want to embed a Flash object into a Page or a Post. My colleague, Erin Long, made a post on her blog about how to embed audio or video on your blog with a bit on embedding a Flash object too. Mine’s just more specific to replacing the home page image with Flash.
- After you’ve created a Flash object or movie, you can export your files from for the web to include an [file name].swf, an .html file with the object embed code, and possibly and AC_RunActiveContent.js and and folder with audio clips (at least in this case).
- Log in or FTP into your personal web space, and upload the swf, the audio folder, and the js files. You do not need to upload the html file.
- Log in to your blog at http://blogs.psu.edu
- Click Design -> Templates, then find the Header template under Template Modules.
- In the Header template, you’ll see a bunch of html and MT template code. Scroll towards the bottom and look for a tag called
div id="homepage-image". - Open the html file that exported with your Flash file and Copy all of the code below the
down to the. - Paste this below the
div id="homepage-image"tag in your blog’s Header template. Make sure that the remaining code below your paste in the Header template still shows: - Hit the Save button and Republish your index page of your blog.
- You’ll probably have to customize some of the page CSS to display the Flash properly, depending on the width/height of your Flash object. The easiest way to do this is to go to your file directory for your web space, click through the folders to your blog (e.g. /pass/users/a/b/abc111/www/blogs/nameofyourblog/styles/psu_professional) and edit the screen.css file.
Search the file for “homepage-image” and edit the height and width values to the same dimensions as your Flash object. Save the screen.css file on your web space in the same place (overwrite/resave). Then go back to your Blogs dashboard and republish your site again.
That should do it.
