Long Story Short » formatting

NextGen Gallery Slideshow

Tom Long — Sat, 21 Mar 2009 19:26:15 +0000

In the first post of this series, I talked about my decision-making with regard to how to format my blog. Generally, each post has a left-justified thumbnail with a graphic element. The primary elements include an external image, a video, or a slideshow of photos that integrated into a NextGen Gallery on my blog. Typically I create a box (division), using HTML which allows me to control that the contents be left justified on the page, the size of the graphic, and justification of text within the box. This slideshow illustrates a box (division) without border. The caption is centered using a style option.

[[Show as slideshow]]Centered Caption

Here the box (division) is shown with the optional border and centered caption. I am including the simple coding within WordPress for those who choose to try the NextGen Gallery plug-in.

[ slideshow id=1 w=226 h=170]Centered Caption

Leave out the blank before the keyword ‘slideshow’.

If you don’t already have this plug-in installed in WordPress, go to your WordPress dashboard>Plugins>Plugin Browser/Installer

Input the name NextGen Gallery in the search box. Click on NextGEN Gallery in the results. Click on Install Now and wait for it to install. A new heading will appear in your dashboard called Gallery. Go there to set up and manage your albums, galleries, and pictures.

This concludes my series on formatting a WordPress blog. I hope you found it helpful.

UPDATE (2012-01-25): I did not include the hyperlink code for the caption. Sorry. Here you go:

[ slideshow id=1 w=226 h=170 ]Click for Album

Leave out the blank before the keyword ‘slideshow’.

Video Thumbnails in Your Blog

Tom Long — Fri, 20 Mar 2009 06:55:45 +0000

Today you have the opportunity to participate in my first ever ONLINE POLL! Check out the various ways of showing video on a WordPress blog and vote for your favorite. (To put this in context, you might want to read my post from a couple of days ago, Working out my blog format)

YouTube in Division Floated Left without a border

Centered Caption

The most challenging formatting comes with floating a video thumbnail to the left and allowing text to wrap down the right side. The embed code one gets from the video host (YouTube for the example on the left) does not allow for such formatting. If there is a slicker way to handle this, please let me know in the comments.

What I did was create a division within html that I could float left. This also gives the option of including a frame, but in my standard layout I don’t do this. Early versions of Internet Explorer reportedly did not handle the margins (spacing outside the division) or padding (spacing inside the division) properly. IE7 appears to have rectified this.

An example of this code is shown here:

Centered Caption

Embed Life Adventures Player in Division Floated Left without a border

Centered Caption

Another video host is blip.tv, which allows one to modify the appearance of their player slightly. For example, I added the name of my travel blog Life Adventures in the branding field at the bottom of the video. I’m using the exact same division tags as in the previous code but pasting the blip.tv embed code between the tags. I think this looks less visually cluttered on such a small thumbnail than YouTube which superimposes their logo in the bottom right hand area.

Embed Vimeo in Division Floated Left without a border

Centered Caption

Vimeo also offers hosting service. While it doesn’t impact the blog reader’s interface, Vimeo is constantly asking their user’s to upgrade. It is a minor annoyance, but not something YouTube or blip.tv do.

On the other hand, look how cool the player is. Nothing but thumbnail, baby. For the blog reader, this is the cleanest interface I’ve found.

The “also rans”

There are a multitude of ways to show flash video in WordPress. Some require javascript. Others require a plug-in. One is limited only by the lengths to which one is willing to go in order to master this media. Here are some further examples. I might use these in special cases, but it is doubtful. That is why they are not included in the polling. I just include them here for the sake of completeness.

Script to Dreamhost’s JW Player javascript

Get the Flash Player to see this player.

One can also use one’s host’s player. (Be aware of any licensing issues. For more information, contact your host provider.) My host has licensed the use of the JW Player. The advantage here is that one has full control of the display. Another advantage is that one can keep all the video files stored at one’s own site. The disadvantage is that it requires a minimal comfort level with same basic java scripting. I’m not sure it is worth it, when one has the option to just cut and paste embed code from video host providers. (If you use Dreamhost’s video format converting utility they generate the java. If not, remember to add 20 to the video height to get the overall player height if you show a toolbar.)

Dreamhost’s JW Player using the WP-FLV Plug-in

Centered Caption

This plug-in is conveniently provided by my host provider. My main gripe with the plug-in is that it does not allow for a poster image so the video “thumbnail” is a black rectangle. I’m not sure why Dreamhost doesn’t just default to the Embed FLV plug-in.

JW Player set up by the Embed FLV Plug-in

[flv:http://blip.tv/file/get/Tom4Surfing-BarbadosCatamaranLaunch610.flv http://blog.trlong.com/wp-content/gallery/geek-tutorials/barbados-catamaran226_170.jpg 226 170]Centered Caption

Fully customizable player. But all flash players using this plug-in must have the same style in every instance of every post. For example, if the toolbar is set up to auto-hide in this post, it will auto-hide in every post.

I hope this will save someone some time in figuring out how to display flash in WordPress.

And, now, the polls are open.

Loading…

Use a Gallery2 Photo to Lead Your Blog

Tom Long — Thu, 19 Mar 2009 06:29:26 +0000

As mentioned yesterday, my primary layout is a 180px wide photo on the left which may or may not have a link to an album. This is an example of that layout. Use the ‘add an image’ button, then ‘from URL’, to be able to add a hyperlink. In this case the hyperlink is back to the image.
By changing to the HTML (not Visual/WYSIWYG) mode, one should see code similar to what is shown here:

Unfortunately this will result in the hyperlink opening in the same tab or window. Modify the code by adding target=”_blank” to have the album open in a new tab. Also, the text would butt right up against the image, unless you add hspace=”15″. The resulting code is illustrated below.

Use ‘add an image’ button, then ‘from URL’, to be able to add a hyperlink. In this case the hyperlink is back to the Gallery2 page.

Hopefully, this will be helpful to some other bloggers seeking to make their posts visually attractive and easy for their readers to navigate. For those of you with questions or who have a better (or just different idea), let us hear them in the comments. Thanks.