My first blog since 2009!!!!!!

Date: 18th June 2011 at 11:04 am | Filed under: blog | Author: Sam Burdge

Wow, the time has just flown by!!! Sorry for the lack of recent code and wordpress goodness.

Firstly, I am glad to see that my WP Post Columns Plugin is still going strong!!! Although it has not been updated since 2009 it seems that it is still working (for most people at least) and the comments keep flooding in!

Many of my WordPress plugins, themes and code tutorials are now unfortunately un-supported. But they are still free, and many people add solutions and answers as well as questions in the comments. I am still working with WordPress every day, but can no longer spare the time to provide free support for free plugins and tutorials.

I have had quite a few comments from people saying that they find it hard to read white text on a black background. Some of these comments have been so strongly worded that I was unable to publish them on the site! If you really can't stand it then you could always try getting firebug addon for firefox and changing the colours however you want (yellow text on a pink background looks quite good). I probably won't be changing my theme in the near future. Also, it's probably a good idea not to get into server administration like linux / apache stuff if you don't like light text on a dark background...

Some new wordpress tutorials and goodies coming soon I promise!

Leave a Comment

WordPress Attachment Page Template Code Snippets

Date: 15th November 2009 at 4:25 am | Filed under: scripts, wordpress | Author: Sam Burdge | Tags: , , , , ,

I haven't written as many WordPress tutorials as usual lately, as I have been so busy building websites and blogs, so I thought I would take the time out to share a few WordPress codes I have developed recently for attachment page templates and specifically the image attachment page template. The attachment page template is the page that displays a single image when the images link URL is set to 'Post URL'. You can set the image's link URL when inserting a single image into a post, and also when using the gallery shortcode.

The codes in this article are mostly applicable to images inserted using the gallery shortcode as they are most useful for posts or pages that have multiple image attachments. Read more about using image and file attachments.

These template codes can be added to your WordPress theme using the attachment.php and image.php files. If these template files do not exist in your theme you can create them, or WordPress will default to using single.php or index.php to show attachments by default. (See more about template hierarchy).

If you don't want to create a seperate image.php or attachment.php template you can always edit the index.php or single.php files and wrap the attachment specific codes in the is_attachment clause like so:

if(is_attachment()){
//attachment page specific code goes here
}

These php functions are loosely based on code I found in this article: Adding text links to WordPress Gallery by Michael Fields. In this article he provides code examples of how to show previous and next thumbnail links in a WP attachment page. I also made use of this previous-next keys in array function which is infinitely useful!

My first set of functions will return text links for previous image, next image and back to gallery. The functions themselves will need to be added to your theme's functions.php file before calling them in your image.php or attachment.php files. So here we go:
Read on…

15 Responses to “WordPress Attachment Page Template Code Snippets”

  • Comment by doriggidy
    Date: April 25th, 2010 at 8:08 pm

    Hi this is a great tutorial. I’m currently using nextgen gallery but want to try your gallery on my sister’s blog…so using the built in image features of WP seem to be the best solution. What you have here should be perfect for her. Great job. One question, If I wanted to have the images themselves link to the next image…how wold i do that?

  • Comment by muscle car
    Date: May 24th, 2010 at 4:29 pm

    hay that’s the cool one,but how to create thumbnail picture in random,place in sidebar or in home page header,thaks b4

  • Comment by Ted
    Date: May 27th, 2010 at 11:47 pm

    This worked perfectly for me … except, for some reason I can’t get the image captions to display. Any thoughts why they might not be coming in?

  • Comment by Shariff
    Date: July 7th, 2010 at 4:13 pm

    Wonderful Tutorial, at last I found it, I am going to try this in my blog.

    Great Going

  • Comment by Jason
    Date: July 9th, 2010 at 4:16 pm

    Thank you for this tutorial, it helped me immensely.

  • Comment by David Hobson
    Date: August 5th, 2010 at 3:59 pm

    First let me say, I am an experienced computer/internet user, however my developer side is still just an apprentice. But as a user, the second I saw white and other colored text on black background, I closed it and went on. I decided to come back and let you know because I’m sure I’m no the only one who’s done so. You might want to see what other developers think and if this technique is advisable. At least my eyes are hurting right now. Peace.

  • Comment by 2k
    Date: October 4th, 2010 at 12:27 pm

    Hi, excellent function to output the all thumbnails to attachments.php Would be amazely cool to adapting it to single.php. Is there any way to output all thumbnails the same way for single.php?

  • Comment by michelle
    Date: October 26th, 2010 at 12:56 am

    Very helpful. Thank you!

  • Comment by Clark
    Date: January 16th, 2011 at 7:38 pm

    Helpful stuff, exactly what I needed!

  • Comment by David
    Date: January 23rd, 2011 at 11:20 am

    Hi, nice tuto ! I just want to say I think the function array_navigate / prev_att_link / next_att_link could be done with one line of code ! See the wordpress function : wp_link_pages(); (http://codex.wordpress.org/Function_Reference/wp_link_pages) and to see an exemple you can look the code of the attachment.php twentyten wordpress theme.

  • Comment by David
    Date: January 23rd, 2011 at 2:15 pm

    Sorry, it’s not wp_link_pages () but previous_image_link(false) and next_image_link () with false option to insert the title : http://codex.wordpress.org/Function_Reference/previous_image_link

  • Comment by onetrek
    Date: February 27th, 2011 at 5:21 am

    This tutorial is good. But it difficult to read because of the page color. Font size if too small. As a web developer I Suggest you to make your template white color. and big font size.

  • Comment by Marirano MARINI
    Date: March 31st, 2011 at 7:44 am

    When I split an article into 2 column the first row of the second column start one line bottom.
    How can I prevent this?

    Thank you. I appreciate your job and I’ll use it when this “bug” will be take off.
    Great work!

  • Comment by surface encounters
    Date: April 7th, 2011 at 5:17 pm

    Thanks manos! Taking the two leading spaced off the end of the functions.php file worked great. Thanks!

  • Comment by Kevin
    Date: June 21st, 2011 at 8:02 pm

    Thanks for the thumbnail function! Works great!!!
    The selecting of text with your particular color scheme is hard to see though!
    Excellent work =)

Leave a Comment

Flash Tutorial - Adding an animated shine effect to your logo

Date: 12th February 2009 at 6:14 pm | Filed under: development, flash | Author: Sam Burdge | Tags: , , , , , , , , ,

This is a basic flash tutorial which explains how to apply an animated shine effect to a logo or image, as displayed in the example. This technique only really works well with colour logos.

You will need Flash 8 or above, as the effect utilises the filters which were a new addition in version 8. The source file for this project is available for download at the bottom of the tutorial.

Leave a comment if you find this useful!

GETTING STARTED

  1. Open a new flash document
  2. Go to 'File ->Import -> Import to Stage...' (or CTRL+R) and import your logo image.
  3. Move your logo to the top left corner of the stage (position 0,0)
  4. Go to 'Modify -> Document' (CTRL+J) and set your document's height and width to the height and width of your logo image. Set the framerate to 12fps.

CREATING THE SHINE

  1. Create a new layer above the logo layer for your shine
  2. In your new layer draw a white rectangle with no outlines (about 25ph high and the width of your logo)
  3. Select your rectangle and go to 'Modify -> Convert to Symbol' (F8) and choose 'Movie clip' as the symbol type, name it 'shine'.
  4. Double click on your new movieclip to open it, select the rectangle again and repeat step 4, converting it into another new Movie clip, but this time name it 'rectangle'.

ANIMATING THE SHINE

  1. Inside your 'shine' movie create a new keyframe at frame 25. This keyframe will be the point that your rectangle ends at after it has moved accross the logo. Frame 1 will be it's starting point.  See images opposite.
  2. Set the starting point for your rectangle on frame 1. Then go to frame 25 and move it to its ending point. You can also rotate your rectangle as I have done in the opposite example.
  3. Right click on the first keyframe in the timeline and select 'Create Motion Tween' from the dropdown menu.
  4. Press return to preview your animation
  5. You will notice that in my example I have added some blank keyframes to the timeline to add a couple of seconds pause between each shine.

flash-tutorial-1flash-tutorial-2

ADDING THE EFFECTS

  1. Select your 'rectangle' movie clip on frame 1 of the timeline, and open the filters properties ('Windows -> Properties -> Filters').
  2. Click on the plus symbol to add a new filter and select 'blur' from the list.
  3. Set the Blur X and Blur Y values to about 25, and set the quality to Medium. See opposite.
  4. Make sure the same values are set for the blur filter on frame 25.
  5. Go to Scene 1 of your flash project. Select your 'shine' movie clip and in the Properties panel change its Blend mode from 'Normal' to 'Overlay'

flash-tutorial-3

DOWNLOAD SOURCE FILE




6 Responses to “Flash Tutorial - Adding an animated shine effect to your logo”

  • Comment by vale
    Date: April 2nd, 2009 at 2:08 pm

    Hi!
    I’ve been searching for such a tutorial for a long time!thank you!!
    I just wanted to ask if it’s possible to activate the effect on rollover with actionscript, it would be for a website!
    thank you very much,
    Valentina

  • Comment by Sam Burdge
    Date: April 2nd, 2009 at 4:19 pm

    Hi Valentina

    You could attach the effect to a button or movie clip rollover. You could attatch it to the rollover state of a button without any actionscript. You could also activate the rollover effect in as2 using the following method:
    1. Select the shine (Symbol 3) movieclip and give it the instance name ’shine’
    2. Add this action to frame 1 of the ’shine’ movie clip:
    stop();
    3. Create a button. you could make it transparent by setting it’s alpha to 0.
    4. Add this action to the button:
    on (rollOver) {
    shine.play();
    }

    I hope this helps.

    Sam

  • Comment by Valentina
    Date: April 8th, 2009 at 8:17 am

    Hi Sam and thank you very much for your infos. I am a newbie of flash and actionscript so I always need every step to be clear like in your tutorial to do it :)
    Could u help me out with a sample flash file?you could send it to my email if that’s not a problem for you.
    I would really like to understand both ways to make such a rollover button, love your tutorial!
    thank you very much,
    valentina

  • Comment by fatih
    Date: September 12th, 2010 at 9:46 am

    hey

    thanks for your sharing but. ı have some problem
    I downloand the .fla document but ı didnt open it with mocromedia flash 8 can you help what is he problem please ? ı am waiting your answer

  • Comment by Scott
    Date: October 19th, 2010 at 10:05 pm

    Well Done just what I was looking for!!!

    Thank You!!!

  • Comment by George Garchagudashvili
    Date: November 9th, 2010 at 9:18 pm

    Nice tutorial, also would be great if only as3 version will be posted :)

Leave a Comment

Admin76 Web Content Management System

Date: 22nd January 2009 at 9:43 pm | Filed under: development | Author: Sam Burdge | Tags: , , ,

Admin76 is a powerful and versatile web content management system (CMS) designed and developed by 76 Creative. It is a PHP / mySQL driven project, for which I developed it's coding framework.

The main difference between Admin76 and other commercial CMS's is it's potential to be tailored exactly to the website it is powering. It can be transformed into a very 'bespoke' system, and so can be used to power many different genres of website, from a simple 5 page website, to a large news site, image or video gallery or a recruitment site. The only controls available in the CMS will be the exact controls you need to manage your site, nothing more, nothing less!

Other CMS's have certain 'tendencies' which relate to their intended user-base. For instance, WordPress is very much associated with blogging, Drupal is associated with community-driven sites. This is reflected in the possible themes, plugins and addons available for each.

Admin76 on the other hand is more flexible in this respect.  It can power a site with static pages, and news with categories and date based archives in the same way that WordPress can, but it can also power all sorts of different types of lists, with as many custom fields as you wish, e.g. address lists, list of file downloads, event diary, mp3 playlists, video playlists, etc. It can even be made to output XML, so it can be used to fully manage Flash Sites too.

As Admin76 is currently only available to customers of 76 Creative it has no 3rd party features, like plugins etc., available. This, however, is another strength of the system. All of Admin76's features are built in. It has an advanced image gallery system, with multiple file upload, medium size and thumbnail image creation.

Other standard features include RSS Feeds, Multiple Authors / Administrators, Flash Slideshow System, Flash Video Gallery System.

For more info about Admin76, and to enquire about getting your own self-managed, elegantly designed website get in touch with 76 Creative.

Some of the mySQL and PHP functions I have utilised in Admin76 will soon be available as tutorials on my site.

1 Response to “Admin76 Web Content Management System”

  • Comment by New e-commerce module for Admin76 CMS | Sam Burdge
    Date: June 26th, 2009 at 12:16 am

    [...] cart76, e-commerce I have been working for some months now to develop an e-commerce module for Admin76,  the CMS which is currently exclusive to 76 Creative. The e-commerce module, called Cart76, [...]

Leave a Comment

Style highlighted / selected text - CSS Tutorial

Date: 26th October 2008 at 12:56 pm | Filed under: scripts | Author: Sam Burdge

Ever wondered how to change the default style of highlighted or selected text in your html page? I have found that this is possible using CSS3, although IE has no support for this so it doesn't work at all in IE.

In this example the background is set to green and the text set to white. Drag over this text to highlight it.

Here's the CSS:

/* Safari */
::selection {
background: #000000;
color: #ffffff;
}
/* Firefox */
::-moz-selection {
background: #000000;
color: #ffffff;
}

::selection is supported by the latest versions of Opera and Firefox 2 and upwards. ::-moz-selection is supported by the latest versions of Safari.

1 Response to “Style highlighted / selected text - CSS Tutorial”

  • Comment by roy
    Date: July 2nd, 2009 at 11:13 am

    thank you very much looking for this for a while, had no idea what to look for to find it either, thanks!

Leave a Comment