webIIClass posts

Stearns: Slideshow, Media Tags

in

We wanted an image slideshow for our sidebar. I looked at some of the plugins available for doing this, but none looked to be exactly what we wanted, nor did they look very simple. I’ve worked with jQuery before with various image things, so I used it to build my own slideshow (building it in OO added to the development time, but it should be fairly versatile now). Then I had to get the appropriate images from WordPress to work with my javascript, which was quite a bit of work as well.

We want the images to easily be updatable by Stearns.  I don’t know why I was dead-set on having them be able to use the media library, but I was.  They could FTP files into a folder, which would be much easier for me.  But they might not even know how to do this, and letting them handle everything through the wordpress interface is preferable.  They’d have to crop and size them properly.  The images in the folder also wouldn’t have captions.  So I pressed on.

I thought perhaps I could have them update a gallery on a particular page, after having thought the gallery function wass very neat.  But it seems there is no way to add items from the media library to a gallery for a page (not in regular wordpress anyway) and I’m not sure that the “delete” link does what I want for removing items from the gallery (and I’m not willing to try).

Continue reading post "Stearns: Slideshow, Media Tags"

Stearns: Two Content Columns Per Page

in

Our layout has some pages with a three column layout and some pages with only two columns.  The left column is always the same, but the other two will have one or two columns based on individual page content.  For a while, we’ve had the third column on the home page and an empty third column on other pages, but we ran into troubles when we wanted to add the third column content to the other pages.

The columns use float to get their positioning and can’t be inside each other or the text from one would flow under the other.  A few options came to mind.  We tried closing template divs and opening others in the HTML editor of the page content: this did not work for us, somehow removing the background that was supplied by a wrapper.  It would be trouble for Stearns anyway.  We also tried removing the container for the center column from the template and putting one div into two column pages, two into three column pages.  This gave some difficulties with the editor, would require the divs on every page, and would be difficult for Stearns and us to work with.

Continue reading post "Stearns: Two Content Columns Per Page"

Stearns: Flutter now Magic Fields, Adminimize

in

Flutter/Magic Fields

Magic Fields is a fork of Flutter that is open source GPL and seems to have more active development going on.  It also seems to be much more streamlined and simplified.  It doesn’t have all of the features of Flutter, but I didn’t know what those features were anyway and wasn’t using them.  I switched to it for these reasons and in hopes that it would fix a problem I’m having.

The problem is that posts created outside of the Flutter write panels do not appear inside of that panels “Manage” pane, nor do posts on write panels that have no custom fields.  Two of the panels had no custom fields, and some items were not added with the write panel at all, so the “manage” panels were not working for us.  I discovered that Flutter associates its custom fields with posts in a particular table, and the “manage” pane only shows items in that table.

Moving to Magic Fields, I thought it might fix this.  They provide a script to move all panels and items from Flutter, which made that easy.  Unfortunately, the plugin still uses the same method of populating the “manage” panes, and so didn’t fix my problem at all.

I really just want that pane to have all items from the related category, whether they have populated custom fields or not, whether they were added through the write panel or the posts panel.  I may have to modify the plugin to make this happen.  Otherwise, I will have to somehow craft a script to find unassociated items from a given category, insert a custom field with the relevant name for that type, and then insert the cross-reference row.  That would be a complicated affair and would do nothing for new items created after the script is run.  But I am worried that not having an associated field set in the database will cause problems when those items are displayed.  We’ll see what I can manage and have time for.

Adminimize

This plugin was recommended by Kevin Behrens, maker of Role Scoper.  It allows removal of panels and individual items from the admin section based on role/group.  So far, I only have used it to remove the “Add New” pane of the posts section, but I think it will allow me to remove the HTML tab from TinyMCE as well as a few other things to clean up the interface for the Stearns folk.  The easier we make it for them, the better.

Stearns: Move, Menu, Flutter and Permissions

in

The Move

We finally bought the domain name and hosting account for Stearns, at stearnshomestead.com.  We were expecting them to want a .org due to their nonprofit status, but I guess they wanted the familiarity of the .com.  They have no company credit card, so Angela had to set up the account and will bill them for a check.  I don’t know what they’ll do in the future:  They’ll probably have to have one of their members do a similar thing.

We moved our WordPress install from its temporary location in a subfolder of one of Angela’s sites to the root of the new site.  There was perhaps a bit of trouble moving the site, but once we figured it out, the install worked perfectly.  To move, we transferred from one site to the other via FTP all site files.  We then used PHPMyAdmin to export the site data as SQL and then import it to the new site (didn’t have to use PHPMyAdmin for the new site, as the host has an import function in their control panel).  We then had to update the config file for WordPress to reference the new database.  Finally, we had to change two URLs in the options table in the database.  Everything now works.

Continue reading post "Stearns: Move, Menu, Flutter and Permissions"

Stearns: Using WordPress as CMS

in

I mentioned my concerns of using WordPress as a CMS in a previous post, but now it is getting to be the time to find solutions to our problems.  We have installed a test wordpress site and have begun working on it.  The style is still bare, but I am looking at functionality issues.  I used those links from the previous post plus some other sites found on Google to find potential solutions.  I haven’t made any final decisions yet on what should work for us, but I’ll document some of my considerations

Events and Recipes

One issue we will have is needing custom data fields for the events and the recipes.  WordPress has custom fields built in, but it would be best if the fields could be there automatically, without them having to add them and get the names exactly right each time.

Flutter is one plugin solution that looks nice.  It allows custom write panels to be created in the admin section, so that events or recipes could be managed and added separately from the normal posts.  It allows custom fields to be defined for each panel as well.  It even allows data types to be defined, so dates for the events could be entered easily.  It does have some issues, such as some bugginess and rumored slowness when post numbers get high.  This did sell me on the custom write panel idea though.

Continue reading post "Stearns: Using WordPress as CMS"

Nonprofit Donation Services

in

I am researching services that will take online donations for nonprofits. There seem to be many available, but it is hard to find good information on them. I found a large list at The Nonprofit Matrix.  Unfortunately, unlike most matrixes, it doesn’t organize them or allow easy comparisons.

From a previous Web II class, a student named Sarah found Justgive.org.  It seems to be the best that I’ve found yet.  Some have lower transaction fees but much higher (than free) monthly fees.  Since Stearns will likely not get enough to offset those monthly fees, it makes sense to go with Justgive.  Some Details:

  • Cost: no setup fee, no monthly fees, 3% transaction fee
  • Services: Collects online donations using credit cards (of course).  Provides a tax receipt for the donor, allows recurring donations to be made, maintains a donor list for the organization, and mails checks of earnings monthly.
  • Reviews: Forbes, FoundationCenter, KillerStartups
  • Example sites using: SMSFolk.org (justgive page)

If I find more information, I will update this post or link to another.

[Update] A comparison table can be found at AffinityResources with many options and their fees.  An article discusses the options (generally, not specifically).  Another unrelated article discusses options, with more information about building your own donation app versus using an external one.  Still, justgive seems the best option.[/update]

[Update 11/06]Google Checkout seems to offer a nonprofit option for accepting donations.  This one has 30¢ plus 2.9% transaction fee.  High volumes (greater that $3000 a month) get lower transaction fees, but I highly doubt Stearns will get there.  Google has an API for putting a form on your site and has the recognition of Google, but it doesn’t have special tax receipts that I’m aware of, doesn’t have a donors list that I’m aware of, requires regestration with Google (stores credit card, etc), and evidently states require some sort of registration with them that places like JustGive have taken care of (since they are pass-through).  These legal concerns are things I’m unsure about.  Paypal seems to be about the same.[/update]

Lynda.com WordPress Certificate

in

Our class decided to use Lynda.com to learn more about WordPress and some other topics that will help us with our Stearns project.  Our teacher has an account and was able to set up a limited time and course version for us at a reduced price.  We are doing five courses with a little over a month to complete them in.  I was worried this would be too short, but have been moving along pretty quick thus far.

Just recently, I completed the “Self-Hosting a WordPress Site” course, and they gave me this certificate for my trouble.  This was the most important for the course, so that is why I did it first.  I don’t know what weight these certificates would really have on a portfolio or resumé, but I think I will complete a few courses just for those.

So far, most of the videos I’ve watched have been about stuff I already know somewhat well, but there have been tidbits here and there to fill in some missing knowledge and a few videos about things I in fact know little or nothing about.  Some of the videos seem a little long winded, repetitive, slow moving, or boring at times, but they do seem like they’d be good for complete beginners.

I’ll continue with the other four courses we have available.  I’ll probably not be able to complete them all, but at least a couple more would be good.  We have an SEO one which would be especially helpful, but is also rather long.

Stearns Design Mockup Chosen

in

On Monday we met with Debbie to show off our design mockups.  Wednesday Debbie came back, bringing in three board members who would need to be involved in the decision.  They discussed various things about the site, including what it will be including and what they have for it.

They also were ready to make a decision on the mockup they wanted.  They had done some user testing of the mockups.  Rocki’s was chosen.  It has a picture of the front of the farm in the header, which they liked because it would be the first thing you’d see if you went there.  But they did want some changes to it.  They wanted a lighter brown for the wood grain that makes up the other part of the header.  They wanted a more solid navigation menu rather than the hanging signs currently in use.  And they wanted a less cluttered appearance for the home page.

They gave Jason’s second place.  His was very clean, also using a wood grain and a horizontal drop-down menu.  His drop-down seemed to be more along the lines of what they wanted, so something like that may be placed into Rocki’s.  Many of us were thinking that Jason’s would be chosen.  But you can never be sure.

So finally we will get to start building the actual site.  This should be the fun part, certainly the part that I have more experience with.  The site will be built using WordPress, so there won’t be a lot of actual programming most likely.  We may need to figure out how to interface other data with WordPress and add admin pages for it.  We will certainly need to figure out how to use “feeds” to get the information we want where we want it.  We’ll need to figure out how to set everything up so that it is easy for them to update.  Most of this should be doable within WordPress or using plugins, no hardcore programming. We’ll see though.

A lot of time will certainly be spent turning Rocki’s Photoshop theme into a real WordPress theme.  Then of course there is the insertion of the pages and filling them with content.  It will need to be organized in a way that will be easy to update for the Stearns people.  This may be hard.

I’m looking forward to some fun and some learning.

Stearns Site Design Mockups

in

Over the past couple weeks we’ve been working on our mockups for the site design for Stearns. We each picked one or two of our wireframe concepts and have used Adobe Photoshop or Fireworks to create the fleshed out, full color and image versions of them.

I used Photoshop, since I’m familiar with it and have never dealt with Fireworks before (hadn’t even heard of it till this class).  As a non-designer, it took me a long time to do.  I tried to keep every piece separate and organized to make it fully modifiable.  This can be painful in Photoshop though, especially since you can’t modify some aspects of multiple layers at once.  And with all those little bits, they really bogged down even the powerful computers at school at times.

My version of Photoshop at home is old (7), so I couldn’t really work on them there.  Some of the stuff from CS4 didn’t fully translate, I don’t have all the fonts, and Photoshop 7 didn’t have the nested layer groups and other benefits that I was heavily using to keep organized and work on this thing.  I had to spend extra time at school and at my parents (my Mom has CS4).

Next time, I think I’ll be faster at this, as I know more what I’m doing, how to deal with all those pieces and what not.  Hopefully also I’ll be better at making a good design.  I’d like to learn that Fireworks, as it looks much better for this purpose.  I think it even makes it very easy to convert the mockup into actual HTML and CSS for the live site, which could save a lot of time with that.

So finally, my mockups.  I did two of my ideas, plus a modification of the one.  There are two pages for each.  They all have very similar (copied and then slightly modified) content sections.  They were all designed to be about 975 pixels wide and with 600 pixels as the above the fold height.  They have an additional 200 pixels of width to show the sides and as much as 600 pixels below the fold of height for content.

Stearns: Thematic Wireframes

in

After making our layout wireframes, we brainstormed some various thematic ideas.  We mostly thought of items that’d be on a farm.  Some of the ideas that were popular were: wood grain, hanging signs, the historical sign, barn, sun, etchings, grass, farm animals, silo, straw hat, pitch fork, seasonal changes, red, brown, and trees.  It was a brainstorm, so there were many other ideas, although some were less applicable.

In class, we each drew up one or a few quick thematic wireframes.  We didn’t have much time, so many weren’t fleshed out.  I drew three:

Stearns thematic wireframe 1

These two were based mainly on the historic mark sign that the farm has. The first had many little signs for top buttons and logo, two big signs for a sidebar and main content area, and then a grassy ground below that serves as a footer. The page background would be a blue sky. I felt this might be a little overboard with the signs, but liked the grassy footer and blue sky a lot, using them in most of my designs. The next drawing kept the footer and had one sign as a sidebar with the logo and accordion navigation. I included the wagon wheel that is at the base of the Stearn’s sign. I felt a light red barn side or white slatted house side would work for the main content area.

Stearns thematic wireframe 5

My other drawing used faded wood signs for everything. I wanted an etching on the top banner for the logo and a burn in look for the banner text. The main content and side bar would be place on parchment nailed to a giant sign. All of the signs are hanging and hang from each other.

We were then given a couple days to create some more.

Stearns thematic wireframe 2

This one would have barn red as the body background with an open barn door holding the main content. I wasn’t sure how to handle the content, so I figured a fairly normal div box set would work if I couldn’t think of anything else. The top banner would be a wood sign over the door with an etching of the farm, burn in title, and silhouettes of animals with white lettering for the main navigation. I continued with the grass footer.

Stearns thematic wireframe 3](https://www.tobymackenzie.com/_/wp-content/uploads/2009/10/scan0002_2.jpg)

Next up I made the back of a red barn. The roof would hold the title (probably no room for a logo) and the main navigation in white paint-like lettering. The sub navigation would be in a side bar with the same lettering. The main content would be on a big off white type cloth nailed to the barn. The footer would again be the grass. A sun was featured over the roof to add a little brightness.

Stearns thematic wireframe 4

Finally, I came up with a variant of the barn door idea with something inside. A farmer would be standing with a pitch fork forking a large, squarish pile of hay. The hay would hold the main content and the farmer would have the accordion side navigation on his back/side. This version of the door had a cloth banner nailed across the inside top of the door with just the logo and title. This one seemed very kiddy to me though, would probably only appeal to kids.