Paul.Bagosy.Com

New WordPress Widgets

Paul Bagosy — Sun, 25 Jul 2010 13:42:20 +0000

Having been kicking around the exciting world of installing and customizing WordPress, I felt it was high time I launched myself into the even more exciting world of developing for WordPress. And here’s what I’ve come up with:

Recent User Posts

Recent Category Posts

Both of these are widgets that do basically the same thing, so I’ll describe them together here.

In developing the new Wharton Magazine blog, we needed a widget to display the Editor’s most recent post. I poked around for a bit, and realized that there really wasn’t a plugin to handle this, so the need for one was obvious. After getting the basics down, I decided that it actually had more applications than just a single post, and started adding features.

So, the end result is two widgets. Enter a title, select the user/category you want to display, enter the number of posts to display, and select if you want to display a link to the user/category and the time and date. Not complicated to use and does just what it says it does.

Before I release it to the WordPress Plugins Codex, I’d like to see if anyone wants a shot at debugging or can offer any tips or suggestions. Files are at the links above, and thanks in advance!

WordPress 3.0

Paul Bagosy — Wed, 30 Jun 2010 16:45:17 +0000

I’m getting really drawn into WordPress and all its wonderful functionality, especially with the release of 3.0. I retooled the back end of this site to run on WordPress MU a few months ago, because I run a few separate blogs and am in the process of expanding that for family members.

I was happy to see that WordPress merged the base and MU codebases into one, fully-functional software package. The upgrade wasn’t as smooth as I’d have liked it, but I guess they figure that if you’ve managed to install and maintain MU, you shouldn’t have a problem editing PHP and .htaccess files on your own (as opposed to automating what boils down to three lines of code). Stupid me misread one of the steps and wound up with no images displaying sitewide for 24 hours, and wondering if I was going to have to re-import all of them. Once I figured out my mistake, though, the problem seemed pretty trivial. Other than that, installing and upgrading are remarkably simple.

WordPress has been getting better and better for the end user and administrator since I began using it about two years ago, and now that I’ve begun really getting into the heart of it, I’m really glad that the development has gone toward all of those things that I wish it did. It’s like they’re reading my mind!

So, on the horizon are three projects that I’d love to tackle. One is a freelance job that I’m hoping pans out, because it’s a site that I’d love to do. The second is here at Wharton, which again, I’d love to do. The third is a complete revamp of PennridgeAlumni.com, a site that I’ve been studiously avoiding for far, far too long. Redoing it entirely in WordPress now seems like a possibility, and I’m already working on a development version of that. Let’s see how far I get…

Go Live – Alternate Universes

Paul Bagosy — Thu, 20 May 2010 15:38:14 +0000

I was hoping to post a lot more go lives here, but I’ve changed jobs to a position at UPenn’s Wharton School of Business External Affairs, and I’m working mainly on internal projects.

However, I’ve just completed a website for my Friendly Local Gaming Store, Alternate Universes.

Alternate Universes had an existing website, but it was built using static HTML that wasn’t very easy to update. The new site uses WordPress as a CMS, offering much greater ease of updating, as well as being able to update multiple pages using a single post. This allows for various pages to keep important content without the need to move content to those pages or clutter up the homepage for weeks or months.

Individual sub-pages are coded to include their related categories, allowing for general information for that page and a listing of pertinent posts.

The old site had an outdated calendar system, so I integrated Google Calendars using the wpng-calendar plugin for the site’s sidebar, as well as a static instance of the full calendar. This allows for much easier management and import of calendar data.

I converted the old phpBB3 forum to myBB, which was a bit more difficult than anticipated, even with a conversion app. The app didn’t accurately convert the forum settings, which necessitated a lot of snooping around in the database to get everything matched up. Once I found the broken relationships, though, it went rather quickly. There were also a few glitches with forum caches and settings files needing to be rebuilt, but all-in-all, the structure converted quite nicely. The new system will very aggressively tackle the issues they’d been having with Russian spambots filling their forum with Viagra ads and the like.

And finally, I get to take credit for the design. I don’t tackle design very often, because this is about the best I’m capable of.

Tired of sanity? Learn to design and code email templates!

Paul Bagosy — Thu, 07 Jan 2010 14:00:50 +0000

While sending an HTML email is basically like sending a webpage via email, designing and coding email templates is a wholly different beast than designing and coding a website. Email programs are essentially the Neanderthal cousins to the modern browser, but like their more modern, sleek, fire-wielding relatives, they all have their own horrid little quirks that you need to be concerned with.

Design: Now, we all know that designers love gradients and non-repeating background textures and non-Euclidean pattern fills and other things that drive developers absolutely batty, but in this case, developers have the advantage: EMAIL PROGRAMS DON’T DO BACKGROUND IMAGES. Solid colors, folks. That’s all you get. That also means that any text blocks need to be a perfectly rectangular spaces with a single color behind it – no images bleeding into the text area. NONE! It also means that dropshadows around expandable areas are right out, because they require a repeating background image.

Coding. Coding a template is the HTML equivalent to speaking in Olde English – or conversing with your local Pikey. Yes, it’s HTML and you’ll recognize some of it, but this is not what you’re used to.

For starters, scrap the and tags and everything in the section. Google hates ‘em.

Second, this is HTML 4.01 transitional. Not XHTML. And you don’t get to use

tags or style attributes. That’s right, TABLES!

Third, you can’t use rowspans or colspans. Now you’re not laughing so hard at that Neanderthal comment, are you? Whoever came up with this system was wholly incapable of purchasing insurance online.

So, what does that leave you with? Not much. If you haven’t given the designer cause to hate you, you’ll probably have a nice two-column layout with a header and footer. This means you need (at minimum) 5 tables:

1) The header table. Since there’s no colspans, it has to be its own table.
2) The body table, with two cells.
3 and 4) The column tables, in body table cells 1 and 2. You’ll need these for padding.
5) The footer table. Just like the header.

A note on padding: Need 10 pixels of padding on just the left? Best bet is to use another cell that’s 10 pixels wide and contains only blank.gif.

This is what your code is going to look like:


 
  
 


 
  
   
    
     
      Lorem Ipsum!
     
    
   
  
  
   
    
     
      Dolor Sit Amet!

Yes, it’s a fun world of valign and bgcolor tags that will likely grant you the ability to see the small chittering things that lurk beneath your floorboards. But wait! There’s more! In addition to a copy of our home game, you also get to use the tag for the first time since Clinton was President! Just a quick review of the syntax that no one will blame you for forgetting:

Please, why?

As for the font sizes, well, you’re just going to have to play with it and see what works.

Finally, to summarize:

No HTML head or body tags.
Besides that, make it compliant.
Tables tables tables.
No rowspan or colspan tags.
No style declarations whatsoever.
Tables within tables for padding.
Font tags.
Dogs and cats living together.
Mass hysteria.

If you need a good example, Here’s the first BCASC newsletter code:

Empowering Individuals, Creating Community

Highlights

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in nibh id diam varius laoreet id nec odio. Cras sed libero sed justo feugiat sodales in vitae nunc. Fusce non sem eget nunc luctus vulputate non a sem.

Sed metus enim, rutrum at adipiscing a, tempor egestas orci. Nam ornare, eros ac aliquam accumsan, libero orci porta justo, non consequat erat erat interdum purus.

Aenean in mi facilisis tortor sagittis pharetra. Morbi orci sem, fringilla ac viverra nec, pulvinar vitae mauris. Pellentesque sapien ligula, malesuada eu facilisis fringilla, rutrum sollicitudin magna.

Imperdiet, orci sodales interdum sodales, tellus ligula malesuada odio, ac egestas enim mi ac odio. Ut nulla sem, posuere ac porttitor a, interdum ut nulla.

Nulla facilisi. Ut id sem erat. Donec lacinia porttitor arcu nec rutrum.
Proin varius venenatis ullamcorper. Vivamus ut nisl justo, at porttitor.
Nulla facilisi. Ut id sem erat. Donec lacinia porttitor arcu nec rutrum.
Proin varius venenatis ullamcorper.

Address goes here

%%unsubscribe%%

I’m sure I could write an entire gripping Dean Koontz-style novel on this subject, but this should serve as a good starter guide. Also, no one would want to read anything that resembled a Dean Koontz book, so I guess I’ve spared you that horror. One horror per day is my limit, and learning to code an email template is pretty much akin to handing the keys to your brain to Cthulu and then drinking a gallon of Jolt Cola. Enjoy!

jQuery Content Swapping Portfolio

Paul Bagosy — Sun, 13 Dec 2009 15:15:05 +0000

jQuery Swapping Portfolio

Here’s a demo of everything I’m about to discuss.

the musical stylings of Eerwyrm will revolt you.

Recently, a number of clients have asked for an complex dynamic image-gallery-like page for a few different applications like portfolios and staff directories. The CMS I work with allows me to build a complex page for the client to load up with content, but the front end is where all the magic happens.

The first of these sites featured an artistic design and required a portfolio for landscape projects, so I wanted to go with an elegant flowing effect. There are two primary element to this concept: the navigation and the content. The content itself can be further divided to images and text, both of which are important elements for this particular layout.

The navigation consits of two columns of thumbnails down the side (or wherever you need them – for this example they’re on the side). They live in a div that’s floated to the right. Here’s what that code looks like:

Each thumbnail is tied to a div which is given a different ID. (link_1, link_2, etc.). In the script, we bind each of those IDs to a click event:

	$('#link_1').bind('click', {id:'1'} ,clickHandler);
	$('#link_2').bind('click', {id:'2'} ,clickHandler);
	etc.

When anything in that div is clicked, it fires the click event, aptly named clickHandler:

	var clickHandler = function(link){
		$('.main').fadeOut().pause(250);
		$('#content').animate({"height": $('#main_' + link.data.id).height() + 20}, {duration: "slow"});
		$('#main_' + link.data.id).pause(250).fadeIn("slow");
	}

Important safety tip: That pause() function is there to slow things down so fadeouts don’t cross:

	$.fn.pause = function(duration) {
	    $(this).animate({ dummy: 1 }, duration);
	    return this;
	};

Now, on the content side, it’s just a matter of stacking up DIVs with your content in them and giving each div a unique (and patterned with the same id structure as your thumbnail IDs) ID (main_1, main_2, etc.). Granted, if you’ve got a lot of data, you’re probably better off with a system to import it via AJAX, but for this instance, we’re going to cover a smaller data set.

So, we’ve got our sidebar:

And we have our content:

 
  Content div 1
  Content div 2

Now we just need a little styling on the content divs to hide them:

 .content_div { display:none; }

Then it’s just a matter of displaying your first div when the page loads:

	$(window).load(function(){
		$('#content').animate({"height": $('#main_1').height() + 20}, {duration: "slow"});
		$('#main_1').pause(250).fadeIn("slow");
	});

The $(window).load call is important. You don’t want this to fire right on (document).ready if there are any images in your first div, because they will likely not be completely loaded and the code won’t know how big that div is going to be.

so, here’s the simple code:



 
  
  
  
  
  
 
 
  
   
   
  
  
   Content div 1
   Content div 2

Vertically centering images in a DIV

Paul Bagosy — Sun, 13 Dec 2009 15:05:51 +0000

Have you ever needed to vertically center and image in a div only to realize that it’s nowhere near as easy as it is in a table with vertical-align:middle? Horizontal centering is easy, but that damnable vertical is always just out of reach. Sure, there are ways to make it look centered, but that flies out the window when you’re talking about dynamic sizes.

The work-around I use for this problem is to head a different route. I know I can’t center horizontally with a DIV, so I stop trying and learn to love the space. I just use a blank .gif the same height as my div and then use the style tag right on the IMG to set the background to my image with a position of center center. Viola, instant centered image!

Streamlined graphical navigation

Paul Bagosy — Thu, 10 Dec 2009 15:15:05 +0000

After covering the long and short of using CSS for mouseover graphical navigation, I was clued into a similar but vastly more efficient way of doing the same thing with less overhead. Why cut up all those images when we can just use one?

Here’s what I’m talking about:

Look familiar?

Notice the second line of navigation there mirroring the first? That’s all the mouseovers. The trick is simply to position this image as we need it.

So, here’s the HTML:

   
    
     Home
     Home
     Resumé
     Portfolio
     Contact
     Subscribe to Feed

Pretty much the same concept as before.

Now, we get into the CSS:

#header                  { width:946px; height:172px; background:url(images/header.jpg) top center no-repeat; position:relative; }
  #header ul             { width:946px; height:172px; margin:0px; padding:0px; list-style:none; }
  #header ul li          { margin:0px; padding:0px; list-style:none; position:absolute; }
  #header ul li a        { text-indent:-9009px; display:block; width:100%; height:100%; }
  #header ul li a:hover  { background-image:url(images/header.jpg); background-repeat:no-repeat; }

What’s important here is that we’re defining the background-image and background-repeat separately in the a:hover declaration, and they’re going to be the same for every link. Granted, you probably don’t need the background-repeat, but it’s good to be thorough.

Now that we’ve defined the overarching styles, let’s do the individual links:

  #nav_01          { width:103px; height:57px; left:45px; top:100px; }
  #nav_01 a:hover  { background-position:-45px -172px; }
  #nav_02          { width:113px; height:57px; left:148px; top:100px; }
  #nav_02 a:hover  { background-position:-148px -172px; }
  #nav_03          { width:122px; height:57px; left:261px; top:100px; }
  #nav_03 a:hover  { background-position:-261px -172px; }
  #nav_04          { width:154px; height:57px; left:383px; top:100px; }
  #nav_04 a:hover  { background-position:-383px -172px; }
  #nav_05          { width:136px; height:57px; left:537px; top:100px; }
  #nav_05 a:hover  { background-position:-537px -172px; }
  #nav_06          { width:227px; height:57px; left:673px; top:100px; }
  #nav_06 a:hover  { background-position:-673px -172px; }

With each of the list items, we’re just telling them how big to be (width, height) and where to be (left, top). We’ve already told the anchor tags to fill their space above, so we just need to worry about the hover. Since we’ve already told them what image to use (the same as the header background), all we need to do is tell them where to put it. We set the background-position to show the mouseover portion of the image by defining it in negative terms (x first, y second).

For this example, we’ve got an image that’s 229 pixels tall, 172 pixels of which will be visible as our header. So, the y part starts at 172 pixels, which means we need to drag it -172 pixels up for each of our mouseovers. Then, it’s as simple as grabbing our left positions for the list item and moving it that far to the left.

Bingo, instant mouseovers with one image. Instead of seven server calls and the need to preload (header BG and six mouseover images), we’re doing one server call and as soon as the header shows, your mouseovers are already preloaded!

Go-Live – PMRS, Inc.

Paul Bagosy — Mon, 07 Dec 2009 20:30:08 +0000

PMRS Inc.

PMRS, Inc.

What the client wanted:
A newly-redesigned website to represent their corporate face on the internet. They had concerns about the site being visible in IE6, possibly without JavaScript enabled, due to their target audience using almost exculsively large corporate internet connections with older technology and security restrictions.

What I delivered:
The design itself has a number of floating elements, including Flash and irregularly-repeating backgrounds with alpha-channel elements. PNGs were going to be necessary, and to make sure they worked in IE6, I employed the TwinHelix IE6 PNG hack. This lead me to the horrible realization that positioning background PNGs is problematic in IE6, so there were a few concessions made for IE6 support, but largely, the site looks identical in all browsers.

There was no concern with SEO friendliness, so I went with a JavaScript-based dropdown menu for multi-level support. To compensate for the possibility of a JS being disabled, each top-level menu item has its own landing page, and there is a separate stylesheet loaded with a noscript tag.

Go-Live: Indian Valley Dental

Paul Bagosy — Wed, 25 Nov 2009 16:56:19 +0000

I’ve decided to start cataloging the sites that I’ve done recently, big or small. So, here we go:

Indian Valley Dental

Indian Valley Dental

What the client wanted:
This was a redesign of an existing CMS site that had a lot of Flash-based elements, including the navigation.

What I delivered:
The design kept the header flash from the old site, and I brought over the little Flash page title flourish.

I reworked the existing CMS to provide data is much more search-engine friendly and a lot more streamlined. The header navigation uses a CSS hover effect with a jQuery dropdown. The bottom navigation uses a quick server-side element to generate a style that underlines the page that you’re currently on, and the Contact Us page uses jQuery form validation and an AJAX spam-catcher.

The site is identical in IE 6, 7 and 8, Firefox 3, Chrome 3, Safari 4PB and Opera 10 (aside from a few form elements that resist styling).

Simple from the ground up, but that’s the way I like them.

Viewing hidden files in Dreamweaver

Paul Bagosy — Tue, 17 Nov 2009 16:32:11 +0000

Thanks to this brief tutorial, I can now see pesky hidden files like .htaccess files in Dreamweaver – server side and local. Because, for whatever reason, Windows just looooves to hide .htaccess files once you’re done editing them.

Further clarification on the button that turtorial is talking about:

Click that funky little button, then select View and Show Hidden Files. Viola!

-pb