How to find your photo uploads with the CForms Wordpress Plugin

I love the cforms plugin by Delicious Days just as much as the next Wordpress devotee, but there are a few things that (like too many WP plugins) are just left up to the user to figure out. After a client requested a form that let a user upload a photo to their website, I thought; "No sweat, there's a field to add an upload box." Half true. There is an option for a file upload box when you add a new field to your form, but there's some configuring that needs to be done on top of that. When you have a form with a file upload box created, there will be a File Uploads dropdown menu added to the settings menu below the forms in the cforms "Form Settings" dashboard. I've configured it like so:


I changed the absolute path to read:
/home/topdirectory/public_html/yourwebsite.com/wp-content/uploads

and the relative path to say:
/wp-content/uploads

Then, it's important to specify the maximum file number in kilobytes or the upload won't work. I said 400 here.

But, when I checked the form that was sent as a test run, no photo was there! Where do the pictures actually go??

Turns out, they go to your uploads folder in your wp-content directory. So, if you know you have a form submittal with a photo, go to this url:

http://yourwebsite.com/wp-content/uploads/

and you will see a listing of the photos as files.



Another tip: If you don't want your form to display the "Cforms by Delicious Days" underneath, go to Cforms>Style and in the stylesheet you've chosen for your form, go to where it has the classes for ".linklove" and set it to display:none;

How to find your photo uploads with the CForms Wordpress Plugin

Wordpress Chicklet Hack!

My latest client wanted to have some RSS feed buttons in a sidebar of their company blog. Turns out, chicklets come in all shapes and sizes and they wanted everything to line up in a nice little grid. What to do?


Step 1. Get your chicklets

I found two good places to get feed chicklets. The client had a Feedburner account, so I signed in, and went to the feed I wanted to connect the chicklets to and then clicked on Publicize > Chicklet Chooser. Then, it was simply a matter of selecting the Feed Reader icons that I wanted to use and copying and pasting the code into a text file.

Another method for grabbing chicklets is to try Top Rank's chicklet chooser service. It offers a slightly different range of chicklets and helps you cover the bases.

Step 2. Put the chicklets on your blog.

The Wordpress blog I was working with had a widgetized right sidebar so I took all the various chicklet code snippets and added them into a widget, then wrapped them in a Div entitled "Chicklets". (Jenn Tip: Tables only work in certain browsers, Safari freaks out over tables and CSS mixing)



Then, since the chicklets were going to be in 2 columns, I created two divs inside the first one. Chickletsleft and Chickletsright. Then, it was simply a matter of assigning floats, widths and text-align.




Step 3. Customize your chicklets

Take a look at your blog and see how the chicklets look. Most chicklets are 16-17 pixels high, but the width can vary by 10 pixels or more. If you look at the code for each chicklet you will notice that some actually contain the image dimensions in the img src tag and you can change the width there. This works if you are only shortening it by about 3 pixels or so. Some chicklet code snippets only give you the image and no way to manipulate the size. Never fear, you can substitute your own custom-sized chicklet! Simply take a screenshot of the chicklet you need to resize and then create a new file in your image-editing program that is the "standard" size you want. In my case, 90 by 17 pixels worked. Then, copy and paste the screenshot of the chicklet into the new image file and save it. Now, you can modify it to your heart's content and then upload the optimized jpg, gif or png to your web site's images folder.

Step 4. Upload your custom chicklet

Using your FTP program, upload the image to your website in the images directory. If you have lots of images, you may find it worth your while to create a sub-directory called Chicklets.

Step 5. Customize your code snippet.

Now, all you need to do is replace the current img src file path with one that points to the custom chicklet image on your server.

For example:
img src="http://buttons.googlesyndication.com/fusion/add.gif"
would become:
img src="http://jennmearswebdesign.com/wp-content/themes/anubis folder/images/chicklets/googlebutton.gif"


There you go. Pixel-precision control over your chicklets!

(if only the rest of my job were this easy)

Wordpress Chicklet Hack!

Fun With CSS

It says something about how fast the web world moves when I can recall my days at AINE in 2003, listening to my instructor say, "yes, sometimes designers use Cascading Style Sheets for formatting headers, but for now, just use the bold tag". Nowadays, anyone teaching web design would probably be stoned publicly for such heresy, but at the time, we all just innocently nodded our heads and kept plugging away at our page-sized Photoshop documents, slicing the images and placing them into tables to create our projects.

I started to see more and more sites that boasted little windows that looked like Chiclets. Then came the logos and banners that reminded me of the Jellies sandals that I had coveted so much in Jr. High. Before you could say CSS2, the web exploded in a visual extravaganza of Kandy Kolored glossy rounded corners and something that I was rapidly learning about called "suckerfish dropdowns". At the time, I was trying to come up with some sort of business plan for my in utero design shop and after tooling around a couple of times on Google with the term "Salem web designers" I stumbled across Simplebits the "tiny web design studio" run by Dan Cederholm. So I went to the site, loved the deceptively simple looking design and decided to e-mail him. In my newbie frenzy, it came out something like this:

"Hi Dan! I like your site! I am a web designer who's starting out and trying to get a handle on all the new technology that is around. As someone who has been designing for a while, what do you think is the best approach for learning about Web 2.0 development?"

Anyone in their right mind would have sent something like this right into the deleted bin, but either he's unusually patient, or, if he's like anyone else I know who does this kind of work, he was too sleep deprived to know better, but Dan responded with an invitation to join a css discussion list.

Soon my e-mail inbox was displaying messages from people with names like Ingo and Gunlaug who dispensed advice on queries like "Help! My a :hover link doesn't display in IE 6!" and "Why won't my div span float with my 3 column header?". To be honest, most of the time I hadn't the faintest idea what these people were actually talking about and for days at a time I would simply plow through all 17 pages of postings and delete them without reading them. But after a while, I started feeling guilty and dutifully tried to make sense of the various discussion threads. If anything, it was a great way to spy on what other people were doing for web design.

Finally, the inevitable happened and I got hired to re-vamp a local company's web site. It was going to be a challenge. The first time I went to their site and hit View>Source, I freaked out. It had more nested tables than a Chinese import shop. I collected every book I had that even mentioned CSS, invested in Red Bull stock, and went to work. (editor's note: I was going to link to Red Bull's site here, but it requires Flash 9 or it won't work. :^( Accessibility counts people!)

Now I can see what all the fuss is about. Although I don't have any mysterious white lines going through anything, my life is now a constant rhythm of tweak, F5, preview in browser, rinse, repeat. I was really proud when my Home page design finally displayed perfectly in Safari, then slightly nauseous when the two left columns poked up into the navigation in Firefox. My moment of shame came when I tried to shift the side bar div to underneath the content for the "About Us" page and forgot that I was changing it's position in the Home page too. Whoopsy.

The only thing I can compare the process to is this little puzzle that my grandparents used to give me to get me to stop bugging them for cookies. It consisted of a small plastic square with grooved edges. The square contained 15 tiles which, when coaxed into the correct configuration, showed a picture of Deputy Dawg. (Ralph Bakshi, who knew?) I would shift one tile over to the right, then see that it would block the tile I needed on the top, then shift that and it would knock the whole picture out of whack. I would so wrapped up in shifting one tile back and forth, up and down, that it wasn't until I put the damn thing down and went to watch "Wonder Woman" that it would occur to me what the solution might be.

So, long story short, I'm loving the CSS, and it's kind of fun to see the look a client gets on their face when I mention using a suckerfish dropdown.

Fun With CSS