Image Placement in Wordpress Blogs

Last Amended: 14th November 2009

When I created my blog, one of the first posts I created described how I didn't like the "Point'n'Click" mechanism that Wordpress wanted me to use in order to place images within my posts. I had therefore created one I did like. Unfortunately, my MySQL installation very quickly barfed on me, necessitating a complete re-install and losing all my early posts. However, the functionality I had created did remain, all I had really lost was the documentation for using the functions. So I have re-created the post as a stand-alone web page here, where it'll be safe from the vagaries of MySQL and it's mysqld daemon.

Of course, my excuse for this page is that it is a reminder to me of what I wrote, why I wrote it and how I intended it to be used. But I'm not forgetting my ego, which demands a look-in. So I'm also hoping that someone out there might also find this useful, either as a direct solution, a starting point for an even more sophisticated solution or even a a learning exercise in PHP. Here's hoping, anyway.

Anyway, to business. These functions rely on the excellent Exec-PHP plug-in. This plug-in allows me to embed PHP code in my posts in exactly the same way that I use PHP in my "ordinary" web pages. And that pretty much sums up why I wrote these functions - because I already use a version of them on my web-sites. This does rather imply that I am comfortable hacking my way around web editors looking at raw HTML and CSS. And I am. Maybe one day a true WYSIWYG editor will appear but until then, I'm happy enough hand-cutting my code. Or as I like to say, I am an YGWYG programmer (You Get What You Are Given!)

To activate these functions, all I need to do is copy file "blog_functions.php" to my blog directory, and then edit "header.php" using the Wordpress admin pages, to include the following line at some convenient point...

<?php include_once('blog_functions.php'); ?>

The (public) functions this file declares are...

  • blotto - blog-photo. Displays a photo using Lightbox
  • flickr - flickr. A link to a Flickr set.
  • blink - blog-link. Provides a link to an internal or external web-page.
  • baphic - blog-graphic. Display an image

The file also creates a small amount of CSS used by these functions. I figure it is best to keep everything in a single file rather than try and spread things about... my claim is that it makes it easier to maintain and support

Anyway, on to some examples, which really should be all the documentation I need in order to make these functions umm, functional.


blotto

Place a thumbnail photograph on the page, linked via Lightbox to a full-size image. I have set this up such that the full-size image lives in ../photos and the thumbnail resides in ../photos/thumbs and has a prefix of "th_" - it is up to me to ensure both of these images exist before I try and call this function.

Usage

<?php blotto("photo prefix (mandatory)","title string","alignment"); ?>

Note that the image suffix is NOT supplied (it is presumed that, being a photo image, it is ".jpg")
It is advised that a title string always be supplied.
Alignment values of l,left, r,right or c,centre (default) are allowed.

<?php blotto("Charlie_rear"); ?>
<?php blotto("Charlie_rear","Charlie's Posterior"); ?>
<?php blotto("Charlie_rear","Charlie's Best Profile","l"); ?>

blotto generates the following (example) code

Which in turn results in something similar to this...

Charlie's Posterior

All Rights Reserved© 2017 William Parker


flickr

Place a image link on the page, linked to a Flickr album. Normally, the image itself is hot-linked directly from Flickr. Plug-ins exist in plenty for this sort of functionality within Wordpress, but I haven't found them very intuitive (and therefore, not very easy to use)

Usage

<?php flickr("flickr photo (mandatory)","flickr set (mandatory)","title string","alignment","page (true or false, default=true)"); ?>

I find it quite easy to cut'n'paste the first two parameters for this function directly from Flickr
It is advised that a title string always be supplied.
Alignment values of l,left, r,right or c,centre (default) are allowed.
"page" is a Boolean, accepting true or false. If true, then the Flickr album opens up in a new page (or tab)

<?php flickr("http://farm4.static.flickr.com/3163/2624343210_fbd873e01a.jpg?v=0",
                "http://www.flickr.com/photos/zeltus/sets/72157605897822595/detail/"); ?>

<?php flickr("http://farm4.static.flickr.com/3163/2624343210_fbd873e01a.jpg?v=0",
                "http://www.flickr.com/photos/zeltus/sets/72157605897822595/detail/",               
                "The village celebrates - by eating, of course!"); ?>
 
<?php flickr("http://farm4.static.flickr.com/3163/2624343210_fbd873e01a.jpg?v=0",
                "http://www.flickr.com/photos/zeltus/sets/72157605897822595/detail/",               
                "The village celebrates - by eating, of course!",
                "l"); ?>

<?php flickr("http://farm4.static.flickr.com/3163/2624343210_fbd873e01a.jpg?v=0",
                "http://www.flickr.com/photos/zeltus/sets/72157605897822595/detail/",               
                "The village celebrates - by eating, of course!",
                "c",
                true); ?>

flickr generates the following (example) code

Which in turn results in something similar to this... again, this is a slightly contrived example as I haven't (yet) created a flickr function for non-blog use.

Feu de St. Jean

All Rights Reserved© 2017 William Parker


The purpose of blink is to display an image that links to a new web-page.

Usage

<?php blink("image prefix (mandatory)","target (mandatory)","title string","alignment","page (true or false, default=true); ?>

As with blotto that the image suffix is NOT supplied. This routine checks thru' a number of possible suffixes and if an image exists with that suffix, it is used.
The target must of course, exist, or an error will occur when the link is activated.
It is advised that a title string always be supplied.
Alignment values of l,left, r,right or c,centre (default) are allowed.
"page" is a Boolean, accepting true or false. If true, then the target opens up in a new page (or tab)

I hold all my images in an "images" directory, and of course it is up to me to ensure the image file exists before I try and use this function.

<?php blink("mre",
               "../mre/index.html"); ?>

<?php blink("mre",
               "../mre/index.html",
               "The Microbiological Research Establishment - this article in it's entirety");
               
<?php blink("mre",
               "../mre/index.html",
               "The Microbiological Research Establishment - this article in it's entirety",
               "l");
 
<?php blink("mre",
               "../mre/index.html",
               "The Microbiological Research Establishment - this article in it's entirety",
               "l",
               true);

blink generates the following (example) code


  

One of the advantages of positioning left or right, is that text can wraparound the image in a particluarly pleasing way. A few images dotted around an otherwise dry piece of text make for a much more readable post and improves the chances of a visitor to my blog hanging around long enought to actually read my posts!


baphic

The simple purpose of baphic is to display an image. No hypertext links are applied, just the positioning CSS.

Usage

<?php baphic("image prefix (mandatory)","alignment"); ?>

As with blotto that the image suffix is NOT supplied. This routine checks thru' a number of possible suffixes and if an image exists with that suffix, it is used.
Alignment values of l,left, r,right or c,centre (default) are allowed.

As with blink, this routine searches my "images" directory for the image, and therefore it is up to me to ensure the image file exists before I try and use this function.

<?php baphic("rococo"); ?>
<?php baphic("rococo","r"); ?>

baphic generates the following (example) code


Which in turn results in something similar to this...

One problem that has plagued programmers forever, is what to call your programs and subroutines. Hungarian Notation in one of it's many mutations is extremely popular. OOP has allowed routines (and their names) to be held within classes, whose privacy may be declared by the Programmer - it's a handy way of ensuring the routine you call is actually the routine you really meant to call. I made life rather harder for myself my insisting that my user-facing routines had vaguely meaningful names. So baphic originated as a corruption of "blog-graphic" I originally intended this to be called bling "blog-image" but unfortunately, it's too clever a name and somewhere in the deep dark corners of Wordpress, this name already exists as something (I can't be bothered to find out what exactly, all I'm interested in knowing is whether I can use it or not.)


As I determined on further uses for my original simplistic routine, my code exploded a bit. In general, any piece of code that was used by two or more functions became a "private" function - that is, I used the time-honoured trick or giving such "secret" routines a name with a leading underscore and a long user-unfriendly name that described it's purpose. Such as "_main_blog_image_function" for instance. Not very secure but then, I really didn't need the complexity and overhead of OOP for such a simple system as this.

here then, I display my current code in it's latest incarnation


<?php

 

 William Parker 
© 2017 All Rights Reserved
  Amended:- 14th November 2009
Review:- (whenever)
Best viewed at a resolution of 1024x768 or greater
Powered by PHP
Valid XHTML 1.0 Transitional
Valid CSS!
knot