Archive for the ‘plugins’ Category

Sollas Bookbinding

Thursday, March 26th, 2009

Over on Nice Wee Sites we’ve just launched the Sollas Bookbinding website. This describes the craft of local (North Uist) bookbinder Corinna Krause and gives details of the workshops she runs and how to buy her products. There are loads of pictures arranged into NextGen galleries and using this method to open an entire gallery from a single image.

Sollas Bookbinding

I went on Corinna’s box-making workshop the other day. She’s an excellent teacher and I recommend it or the bookbinding workshop if you get the chance.

New NextGen category

Wednesday, February 18th, 2009

My posts about the NextGen Gallery plugin for Wordpress are attracting a lot of traffic, so I’ve grouped them in a single category for easier browsing:
www.scotproof.com/category/nextgen

Language Switcher tip: accented characters menu

Friday, February 13th, 2009

Also helpful if you’re using the Language Switcher plugin for Wordpress is to have a dropdown menu in the edit post/page section for inserting the HTML codes for accented characters. Donald Noble’s website has a solution – here’s a breakdown of what it does.

1. In the wordpress/wp-includes/js/quicktags.js file, add the following code before function edToolbar() { (around line 257).

// 2 new functions added by DRN to give dropdown character select
function edInsertChar(tmpChar) {
	edInsertContent(edCanvas, tmpChar);
	document.getElementById('ed_char').value=0;
}
function edInsertCharSelect(){
								//  1/4    1/2    3/4                         ^2     ^3
	var edChars = new Array(
	'auml','euml','iuml','ouml','uuml','Auml','Euml','Iuml',
'Ouml','Uuml','agrave','aacute','egrave','eacute','igrave',
'iacute','ograve','oacute','ugrave','uacute','Agrave',
'Aacute','Egrave','Eacute','Igrave','Iacute','Ograve',
'Oacute','Ugrave','Uacute','ccedil','Ccedil','nbsp','trade',
'copy','times','#188','#189','#190','euro','times','deg',
'#178','#179'
	);

	document.write('<select id="ed_char" onchange="edInsertChar(this.value);" title="">');
	document.write('<option value="0" selected="selected">char </option>');
	for(i=0;i<edChars.length;i++) {
		document.write('<option value="&amp;'+edChars[i]+';">&'+edChars[i]+';</option>');
	}
	document.write('</select>');

}

Note that more characters can be inserted into this list or the order changed – just insert the HTML character codes between single quotes, minus the ‘&’ and the ‘;’.

2. Then, in the edToolbar function itself, add the line edInsertCharSelect(); as shown:

function edToolbar() {
	document.write('<div id="ed_toolbar">');
	for (i = 0; i < edButtons.length; i++) {
		edShowButton(edButtons[i], i);
	}
	document.write('<input type="button" id="ed_spell" class="ed_button" onclick="edSpell(edCanvas);" title="' + quicktagsL10n.dictionaryLookup + '" value="' + quicktagsL10n.lookup + '" />');
	document.write('<input type="button" id="ed_close" class="ed_button" onclick="edCloseAllTags();" title="' + quicktagsL10n.closeAllOpenTags + '" value="' + quicktagsL10n.closeTags + '" />');
//	edShowLinks(); // disabled by default
	edInsertCharSelect(); // DRN addition
	document.write('</div>');
}

The result should look something like this:

dropdown

You should now be able to select accented characters from the list and drop them into your post, without having to remember the HTML codes.

Language Switcher tip: adding quicktags

Friday, February 13th, 2009

Wordpress’s Language Switcher plugin for bilingual blogs requires that text is enclosed in language tags, e.g. [lang_en]English[/lang_en][lang_de]Deutsch[/lang_de].

These language tags can be added to the quicktags menu in the edit post/page screen in Wordpress – it’s simple to do and makes life much easier. Here’s how to do it. (Note that this method applies only to the HTML editor, and not to the visual editor.)

original

1. Open your wordpress/wp-includes/js/quicktags.js file and make a backup copy of the original.

2. From about line 36 you’ll see the code for all the existing buttons. Decide where you want your new quicktags to appear. I wanted mine at the start of the row, so inserted the new code before the code for the first tag (b).

3. Insert the following code, replacing my languages (English (en) and German (de)) with your own and remembering to use the correct two-letter ISO codes. lang_all is for text that you want to appear in all versions, no matter what the language – you might not need it.

edButtons[edButtons.length] =
new edButton('ed_lang_en'
,'lang_en'
,'[lang_en]'
,'[/lang_en]'
,'lang_en'
);

edButtons[edButtons.length] =
new edButton('ed_lang_de'
,'lang_de'
,'[lang_de]'
,'[/lang_de]'
,'lang_de'
);

edButtons[edButtons.length] =
new edButton('ed_lang_all'
,'lang_all'
,'[lang_all]'
,'[/lang_all]'
,'lang_all'
);

4. Save the file, upload to your server and check the edit post/page screen – you should see the new quicktags:

languagetags

5. As with other quicktags, you just need to highlight your text and click on the button and the opening and closing tags be inserted automatically.

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.

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.