Archive for the ‘Wordpress’ Category

NextGen Smooth Gallery in action

Wednesday, December 3rd, 2008

Over on Hebridean Graphics:

Hebridean Graphics

Email Immunizer

Wednesday, November 26th, 2008

Email Immunizer is a subtle but effective Wordpress plugin that will hide email addresses on your site from harvesters by converting them to numeric character references. Upload it, activate it, then view the source of a page or post containing an email address – genius.

Fixing arrows in NextGen Smooth Gallery

Wednesday, November 26th, 2008

In IE7, the left/right rollover arrows in NextGen Smooth Gallery don’t work properly (for me, at least). To fix them, add the bit of code recommended here to the end of your nggsmoothgallery/SmoothGallery/css/jd.gallery.css – that should do the trick. Took me a while to find this, which is why I’m posting it here.

NextGen Smooth Gallery: adding links to descriptions and ALT tags to images

Sunday, November 16th, 2008

See also my previous post on Smooth Gallery.

A feature of NextGen Smooth Gallery is the “info panes” that slide up at the bottom of pictures, containing text entered in NextGen’s “Description” boxes. These descriptions can be enabled to use HTML, for example to include a hyperlink in the description or to make a word or phrase bold, by editing line 98 in nggsmoothgallery/SmoothGallery/nggSmoothSharedFunctions.php from:

<p>‘.$picture->description.’</p>

to:

<p>‘.html_entity_decode(stripslashes($picture->description)).’</p>

HTML entered in a picture’s description box will now be recognised, eg

Description: text here <a href="http://www.google.co.uk">link here</a>

Note that the “Embed links” box in the Smooth Gallery settings does not need to be ticked.

Thanks to Hubba for setting me on the right track with this!

Next, to get rid of some HTML validation errors, we need to add ALT tags to the images. To do this, fill in the “Alt & Title Text” box in NextGen for each picture and, in the same file (nggsmoothgallery/SmoothGallery/nggSmoothSharedFunctions.php), edit lines 100 and 101, adding

alt="’.$picture->alttext.’"

to each. The lines will now read:

<img src="’.BASE_URL."/".$picture->path."/".$picture->filename.’" class="full"
 alt="’.$picture->alttext.’" />
<img src="’.BASE_URL."/".$picture->path."/thumbs/thumbs_".$picture->filename.’"
class="thumbnail"  alt="’.$picture->alttext.’" />

There’s also a picture border lurking in this file which, if you want, can be removed by deleting

border: 1px solid;

in line 92.

Nice Wee Theme

Thursday, October 23rd, 2008

Over on Nice Wee Sites we recently released the Nice Wee Theme for Wordpress, and it’s just been approved for inclusion in the Wordpress theme directory. It’s loosely based on the design of this site (but nicer) and has a customisable header icon and avatar, allowing you to tailor it to suit the style of your site. View the demo site or download here.

Update: This site now uses the Nice Wee Theme by way of a demo.

Nice Wee Theme

NextGen Smooth Gallery for Wordpress

Saturday, October 4th, 2008

Smooth Gallery is a nice little addon for the NextGen gallery, but I had a couple of problems getting it to do what I wanted.

First of all I got the error message “Sorry, NextGEN Smooth Gallery works only in Combination with NextGEN Gallery”. To solve this, I renamed the nextgen-smooth-gallery folder to nggsmoothgallery and the plugin activated no bother.

Then I couldn’t find the admin panel for the gallery in Wordpress. It turned out to be in the Settings area, rather than the Gallery area. Duh.

Finally, my images were displaying with a black border and background and I wanted to change this to white. To do this, look in nggsmoothgallery/SmoothGallery/css/jd.gallery.css and change instances of #000 to #FFF (or whatever your preferred colour is).

And I guess you could also customise the arrows by uploading your own images to nggsmoothgallery/SmoothGallery/css/img, replacing fleche1.gif, fleche1.png, fleche2.gif and fleche2.png.

Now if I could just work out how to change the colour of the info pane…

Update: The info pane properties can be changed in the same jd.gallery.css file. For .jdGallery .slideInfoZone, change “background” from #333 to your chosen colour – simple as that.

Inserting a NextGen gallery or slideshow in a custom field

Thursday, September 11th, 2008

I’m working on a project where I’m using custom fields to display NextGen galleries and slideshows separately from Wordpress’s main page content (it’s an unusual layout – I’ll post a link here once it’s ready for viewing). Searching for help led to info on using custom fields to set parameters for the galleries, which wasn’t what I wanted, and then I found this solution, which almost worked but not quite (it displayed some unwanted text).

Here’s how I eventually did it:

Install and activate the NextGen plugin. Create a gallery, add images and configure the options. Full instructions here: http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery/.

Then:

  1. On the page on which you want the gallery to be displayed, create a custom field called gallery and, in the value box, enter gallery=1 (enclosed in square brackets!) or slideshow=1,560,280 (choose your own parameters) or whichever tag you want (polaroid, singlepic, album – see the gallery plugin page for options). Click update.
  2. In your theme’s page.php file (or whichever template file is relevant to your needs – I’m using pages), insert the following in the place where you want the gallery to appear:
    <?php $gallery = get_post_meta($post->ID, ‘gallery’, true); ?>
    <?php
    $gal = $gallery;
    $gal = apply_filters(‘the_content’, $gal );
    echo $gal;
    ?>
  3. Add the following to your theme’s stylesheet:
    .post-meta {
    list-style-type: none;
    }

    .post-meta-key {
    display: none;
    }

  4. Play with the stylesheet and template file further to position your gallery where you want it. I created a “picturebox” div to contain mine.
  5. Note that you can now display different galleries on different pages by changing each page’s “gallery” custom field value.

Language Switcher plugin

Tuesday, June 10th, 2008

See the brilliant Language Switcher Wordpress plugin in action on the new Stòras Uibhist website:

Storas Uibhist

Inserting a NextGen slideshow in your header

Saturday, April 19th, 2008

I’ve been playing a bit with the NextGen gallery plugin for Wordpress and am very impressed with all that you can do and the various add-ons for making your pictures look pretty. We’ve used it over on niceweesites.com to organise our portfolio and on silversprite.com to display a slideshow in the header.

(Edit: Silversprite has now changed theme.)

The NextGen forums are currently closed and it took me ages to find the information I was looking for yesterday, so while it’s fresh in my mind, here are some notes on how to incorporate a NextGen slideshow into the header of a Wordpress site.

Install and activate the NextGen plugin. Create a gallery, add images and configure the options to display a slideshow. Full instructions here: http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery/.

Then:

  1. Temporarily insert the NexGen widget slideshow into your sidebar (ensuring width and height match those required for your header).
  2. Look at your website in a browser and view the code to find the section relating to the slideshow.
  3. Remove the slideshow widget from the sidebar.
  4. Copy the relevant code to your theme’s header.php file. It should look something like this:
    <div id="header">
    
    	<div class="ngg-widget-slideshow" id="ngg_widget_slideshow1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see the slideshow.</div>
    	<script type="text/javascript" defer="defer">
    	<!--
    	//<![CDATA[
    		var sbsl = new SWFObject("http://www.yoursite.com/wp-content/plugins/nextgen-gallery/imagerotator.swf", "ngg_slideshow1", "780", "200", "7", "#FFFFFF");
    		sbsl.addParam("wmode", "opaque");
    		sbsl.addVariable("file", "http://www.yoursite.com/wp-content/plugins/nextgen-gallery/nggextractXML.php?gid=1");
    		sbsl.addVariable("linkfromdisplay", "false");
    		sbsl.addVariable("shownavigation", "false");
    		sbsl.addVariable("shuffle", "false");
    		sbsl.addVariable("showicons", "false");
    		sbsl.addVariable("overstretch", "true");
    		sbsl.addVariable("backcolor", "0xFFFFFF");
    		sbsl.addVariable("frontcolor", "0xFFFFFF");
    		sbsl.addVariable("lightcolor", "0xCC0000");
    		sbsl.addVariable("screencolor", "0xFFFFFF");
    		sbsl.addVariable("rotatetime", "10");
    		sbsl.addVariable("transition", "lines");
    		sbsl.addVariable("width", "780");
    		sbsl.addVariable("height", "200");
    		sbsl.write("ngg_widget_slideshow1");
    	//]]>
    	-->
    	</script>
    
  5. Adjust your theme’s stylesheet and header.php as necessary, so everything looks nice.

Wordpress as a CMS

Sunday, December 23rd, 2007

Wordpress is open-source blog publishing software with a MySQL database running behind it. The content and structure of the blog is stored in the database, and Wordpress uses PHP to retrieve and display the content in a variety of ways. You can either have a hosted blog on Wordpress.com, where everything is set up for you, or you can install Wordpress yourself (download it from Wordpress.org) on your own hosting package at your own domain, providing the package has a MySQL database and PHP support.

Installing it yourself gives you complete control over the appearance and functionality of your blog. Because of this, and because of the intuitive interface and the fact that there’s an active and helpful support network and an impressive range of plugins, we’ve found it an excellent tool for developing websites:

  • that contain different kinds of content (e.g. news and events as well as static pages)
  • with regularly updated content
  • for clients who want to be able to edit the website themselves without learning HTML or using FTP software.

With a bit of planning and tweaking, Wordpress can become a powerful content management system (CMS) – much more than a simple blogging system. Here’s a list of what I’ve found to be the most useful methods and plugins for using Wordpress in this way:

1. Static front page. This option is now built into Wordpress (version 2.3+) and can be found in the dashboard under Options > Reading. A traditional blog displays latest posts on the homepage, but here you can choose a “static” page to display on the front of your site instead, and select another page on which to display your posts, or even show no posts at all. This is useful if you want to tuck your news or events away in a less conspicuous place, or if posts aren’t appropriate for your site (as in the Polochar Inn website). This option alone opens up huge opportunities for using the software in unconventional ways – and this leads to more experimentation and interesting plugins.

2. Fold Page List. This plugin can be used in websites with a hierarchy of pages and creates a “folding” page menu – in other words, subpages are are hidden in the menu unless the user is viewing a parent or sibling page. This sounds complicated but the effect is simple and intuitive. You can see it in action over at Grogarry Lodge.

3. Fold Category List. I haven’t used this recently, but it creates a folding menu of categories and sub-categories in the same way as Fold Page List.

4. My Page Order. Another simple but powerful plugin. It allows you to control, through the Wordpress dashboard, the order in which pages are listed in your website’s menu (Wordpress’s inbuilt ordering is alphabetical or by date/time the page was created, which is not always how you want your pages to be shown). In my experience, it works seamlessly with the Fold Page List plugin.

5. Page templates. Not a plugin but a part of Wordpress’s core functionality, this requires a bit of coding and moving of files but allows you to have pages on your site that look different from other pages. For example, by default Wordpress (or rather your theme) may display the header, title and content, then the footer for every page in the database. If you want a page that looks different from the others (for example a “splash” or entry page), you can create an alternative template for Wordpress to follow when it displays that page. Fully explained here; see it in action on the Nunton Steadings homepage, which looks completely different from all the other pages.

6. Dagon Design Form Mailer. Another plugin and great if you need to include any kind of form on your website. I’ve used it a couple of times (here and here) and have found it simple to set up, easy to configure and surprisingly problem-free. What it does is fairly complex, but it works “out of the box”.

7. WP-SNAP! This makes it possible to order your posts alphabetically by title and list them on a page. Useful for directories, indexes, glossaries, etc. – in fact any site containing lots of posts and where users might want to browse content by title. I’ve only used this once (and with a lot of tampering) here and the plugin’s developed a lot since then.

Plugins to help the client:
8. Wordpress Database Backup is arguably the most important plugin. It backs up the content of the MySQL database in one click, and is essential for websites that are updated regularly. The backed up file can be emailed, stored on the website’s server or downloaded locally, and backups can be scheduled to occur every hour, day or week. No technical skills necessary.

9. Custom Admin Menu. This is a smart little plugin that enables you to control the appearance of Wordpress’s admin menu (dashboard). Menu items can be hidden, moved around or nested – ideal for tidying up the administration area before handing over the website to a client, and for hiding unused functionality or options you don’t want them to play around with. The screencast shows it all.

Update: The barunsingh.com website has just been down for a couple of days, and I noticed that in my version of the plugin the path to the images for toggling between making a menu item visible or hidden wrongly points to barunsingh.com. To fix this, edit the last and third last lines of custom_admin_menu.css to point to visible.gif and hidden.gif in your own directory (the images themselves are included in the plugin) and upload. You might need to do a hard refresh to make the images appear.

10. SlimStat. A statistics plugin that shows up-to-the-minute data on visitors to your site (how many, who, where they came from and when). Easy for clients to access and follow.

Ten’s a nice number to stop at – there’s plenty more I could mention but I’ll save it for later posts.