Thesis Skin for Photographers: Exhibit

Free Thesis Skin for Photographers: Exhibit

by Ben Cook on October 27, 2009

In my continuing effort to provide quality pre-coded designs for the Thesis community , and after the success of my first skin, Network News Skin, I’ve decided to release another free skin for all you Thesis theme users out there.

If you’re not yet using the Thesis theme, I really don’t know what more I can do to convince you to buy it. My endorsement has only grown stronger since my 4 out of 5 star review, and as evidenced by these skins, it has helped me learn CSS at a rate I never thought possible.

Besides, without Thesis you can’t make use of all these kickin’ Thesis skins I’ve been working so hard on lately ;)

This time around I decided on a completely unique design that would cater to photographers, artists, and just about anyone else that would want to showcase their work. I present:

Exhibit

The image above should give you a pretty good idea of what the skin looks like but I’ve also set up a Demo Site so you can take a look around and see if you like it.

Once again, if you’re already comfortable using Thesis as well as the custom.css & custom_functions.php files using the Exhibit skin will be a breeze for you.

However, if you’re not quite to that level yet, that’s ok! I’ve documented the entire process, from installation to actual use of the theme, in as much detail as possible.

Note: Please don’t let the length of the instructions intimidate you, I just wanted to make it clear enough that even someone brand new to Thesis would be able to use the skin.

Requirements:

As I already mentioned, you obviously need to have the Thesis theme for this skin to work. Also, this skin was designed for Thesis 1.6 which is out of beta and has been released to all Thesis owners. While the Network News Skin was backwards compatible, I’ve not gone to that length with this skin.

Besides, you should upgrade anyway.

I’ve also once again made use of the fantastic Dynamic Content Gallery plugin that allows us to achieve the “slider” functionality without a ton of coding of our own. I’ve updated the skin to use version 3.1 so be sure you have the latest version.

And last but not least, you’ll need to install Greg Boser’s Thesis Import/Export plugin. This will save us a TON of time in configuring the skin.

Installation:

In order to download the files for the skin you’ll need to enter your name and email in the form to the left.

Don’t worry, we won’t be spamming you or anything like that. We simply want to be able to alert you when we update the skin or release a new one you might be interested in using.

Anyway, once you’ve confirmed your information you’ll receive an email with a link to download a zip file.

Unzip the files into a folder that will be easy to find later.

Upload the custom.css, custom_function.php and layout.css files to the Custom folder, over-writing your current versions. While I didn’t make any edits to the layout.css file, it would be best to upload the version I’ve provided just to make sure we’re all starting from the same place.

Tip: Always save copies of your current files before uploading the new versions. They’ll act as a safety net of sorts in case anything should go wrong or you make a mistake.

Next you’ll need to install the Thesis Import/Export plugin. You can do that quickly and easily by going to the Plugins/Add New link in your WordPress sidebar.

thesis-export

On the Thesis Import/Export page (as seen in the screen shot above), you should be sure to download your current settings and save them as a backup. That way you can always go back to the design you have now if you decide not to use the skin for some reason.

After creating your backups, select browse under Thesis Options and select the exhibit-thesis-options.dat file and click Import Options. Then do the same for the Design Options section by selecting the exhibit-design-options.dat file and clicking the Import Options button to the right.

Warning! Importing these options will overwrite any of your current options. However, it also saves me from having to explain every single option I’ve clicked as I did with previous skins.

Once the settings have been imported, I recommend deactivating the Thesis Import/Export plugin until you need it again. The last thing you want to do is get your site set up just the way you want it and then accidentally overwrite something.

Logo

Displaying your custom logo instead of the default Exhibit image requires just one simple edit to the custom.css file.

Simply replace http://exhibit.wpblogger.com/wp-content/uploads/exhibit-logo.png with the file path to your logo and save!

The default logo size is 955 pixels x 75 pixels and is a transparent png. You don’t have to use a logo this wide, and the theme can accommodate taller images as well, but you will need to edit your custom.css file if using an image that’s not 955 x 75.

Featured Content Slider

Last but certainly not least, we need to get the featured content slider working. Michael Gray has an amazing tutorial on how to create the slider and it’s actually his code that I’ve incorporated into the skin.

Note: The code on Michael’s site is slightly out of date. We’ve gone ahead and made this change to the code so be sure not to over-write it.

However, I do need to walk you through a few of the items that are specific to this Thesis skin.

Once you’ve installed and activated the Dynamic Content Gallery (DCG) plugin, you’ll need to go to the DCG settings page and skip down to step 3 to specify what content you want to feature.

DCG gives you 5 “slots” to feature in the slider and allows you to mix and match how you want those slots distributed. Rather than mixing and matching across several categories, I just created a Featured category, and inserted the category id (in my case 5) into each of the 5 category id spots.

Since I want to display the last 5 posts from that featured category, I simply numbered 1 through 5 in each of the post select boxes.

Steps 4 & 5 let DCG know where to find the images you want to use in the slider. I’ve input /wp-content/uploads/ in both fields since that’s where my images are stored.

Tip: WordPress defaults to managing your uploads into month and year based folders. Unless you want to be continually updating this setting in DCG, I recommend unchecking that box and forcing WordPress to store your images in one large folder.

Step 7 is where you’ll need to set the desired width, height, and colors for your slider. Since I want the slider to take up the full width of my site, I set the width to 955. The height is up to you but I used 500 as I think it provides the best ratio for most images. The rest of the settings are fairly self explanatory and I’ve included a screen shot of my settings for easy reference below.

dynamic-content-gallery-options

Tip: Cropping your images to match the settings of your slider (in my case 955 x 500) will make sure the images aren’t stretched or distorted in any way. It will also avoid any cropping issues when Thesis generates the thumbnails to display in the Teasers on the home page.

Once you’ve entered the desired settings, click the update options button to lock them in.

Before the slider will work you’ll need to a) make sure to save a few posts into your featured category and b) create two custom fields on each post you  want to display in the slider.

The fields are as follows:

  • Key = dfcg-image with a Value = Image filename including extension eg. myImage.jpg
  • Key = dfcg-desc with a Value = Description text eg. Here’s our latest news!

After you enter each of the custom fields once, WordPress will automatically remember them for future use. When you want to put a new post into the featured slider, just make sure you add those two fields.

Also, make sure you only include the file name of the image in the dfcg-image field. The plugin is already set to look for the images in your uploads folder so you only need the myImage.jpg portion of the file name.

Customize to Taste

Since this skin aims to cater to the artistic community I fully expect you to want to make significant changes and customizations to the skin.

I’ll try to help you through the more common issues you may encounter but I simply don’t have the time to answer all of the questions and issues you may encounter when heavily changing a free skin. Although, leaving the attribution link in your footer will definitely help your chances of getting some support for the skin. ;)

Fortunately, the Thesis support forums are absolutely top notch and I’ve never failed to get the help I needed. That’s one of the things that makes Thesis great so be sure to take advantage of it!

BUY THESIS | DEMO

{ 3 trackbacks }

Two New free Thesis Photoblog Skins
October 27, 2009 at 7:47 pm
Wednesday Web Wanderings – Thesis Edition
December 23, 2009 at 10:08 am
Best 10 Thesis Skins for Free | TechnoZeast
February 4, 2010 at 5:50 am

{ 54 comments… read them below or add one }

DennisG October 27, 2009 at 10:38 am

Wow, great work, and thank you for sharing.

The photo skin is not something for me, but if I would like to use the Network News skin, can I make small color changes?

thanks

DG

Ben Cook October 27, 2009 at 10:51 am

Dennis, you absolutely can make color changes. In fact it’s pretty easy just going through the Design Options and custom.css file and replacing the red color (I think its #CC0000 if I remember correctly) with whatever color you’d like to use.

RowdyKittens October 27, 2009 at 11:03 am

This is fantastic! I’m going to try this skin out on my photoblog. Thank you so much!

Ben Cook October 27, 2009 at 11:23 am

Hey thanks! You’ve got some great pictures there. Can’t wait to see how it works out for you :)

Oscar October 27, 2009 at 11:26 am

This is awesome. Thanks for the detailed instructions too. I’ve only worked with FCG before so this gives me an excuse to try a DCG. Thanks again!

Ben Cook October 27, 2009 at 12:14 pm

Oscar, no problem. Graywolf’s tutorial on DCG helped me a TON and I tried to explain any elements where I struggled with it the first time around.

ThesisTheme.net October 27, 2009 at 4:05 pm

Ben – Great job with this skin. Very clean and the focus is definately on the photots as it should be with a photoblog. I’ll be sure to include this in the skins section of my Thesis Resource site. Looking forward to seeing more skins in the future!

Ben Cook October 27, 2009 at 4:31 pm

@ThesisTheme thanks! Cant wait to see the finished product on your design as well. Looked very nice.

TrevR October 27, 2009 at 5:02 pm

This is a beautiful skin. I’ve followed every instruction and cannot seem to get the Dynamic Content Gallery to work (or the ‘teasers’) for that matter. Never have been able to get DCG to work with Thesis. Any thoughts? Site is http://www.uncork29.com/krjphotography/

Ben Cook October 27, 2009 at 7:38 pm

TrevR, glad you like the skin! There’s actually a few different issues that could be going on, can you post link to a screen shot of your DCG settings?

Michelle October 28, 2009 at 7:26 am

Ben, You just saved my “skin”! This is perfect for a site I need to revamp quickly…thanks SO much! Downloaded and will install tonight!

TrevR October 29, 2009 at 1:02 am

Ben–can I email you the screenshots?

Ben Cook October 29, 2009 at 3:24 pm

TrevR, sure! bcook at wpblogger dot com.

Tammy October 30, 2009 at 2:24 pm

I don’t have a custom logo for my photoblog yet. This is probably a silly question, but could I use the default header in the interim?

Thanks in advance! I can’t wait to try the skin out this weekend.

Ben Cook October 30, 2009 at 3:27 pm

Tammy, I’d recommend just typing the name of your website into paint or something and creating a logo that way. The one that’s displayed on the demo site has (your logo here) as part of the image and that wouldn’t look very good on your site.

RowdyKittens October 30, 2009 at 4:33 pm

Thanks Ben. I’ve never created my own logo before so I wasn’t sure how to move forward. Thanks for the suggestion! I’ll check Paint out.

Ben Cook October 30, 2009 at 5:03 pm

Tammy, there are all sorts of free image editors out there. You’ll just need to find a font you like.

I used white text with a transparent background and saved it as .png. Then upload your image and swap that file path out for the one I’ve listed in the custom.css.

robert November 2, 2009 at 7:33 pm

hi, about to use your skin, just working on the gallery – when the gallery is finished will my nav menu also be within the DCG?

RowdyKittens November 3, 2009 at 3:50 pm

Hey Ben – thank you so much for the skin! It’s officially up on my photoblog. I’m having some issues with the image slider, but I’m hoping to figure out how to fix the problem tonight. :)

Jennifer December 16, 2009 at 2:40 pm

Thanks for the great skin! It’s perfect for my WWII project!

But, everything stopped working when I updated DCG to v.3. According to the support forum, you no longer need to use global $post to call DCG. Once I made the code change they suggested, DCG worked fine again. It only affects those who have updated DCG to ver 3.

Ben Cook December 16, 2009 at 2:51 pm

Jennifer, thanks for the heads up! I’ll edit the post to mention the possible issue as well.

Koen January 3, 2010 at 3:43 am

Hey Ben, great work on the skin dude! I am testing it on a development project as we speak. This project has both landscape and vertical pictures so every post links to content showing those pictures. In your demo site every picture is landscape (in the teaser and in the post). You have any recommandations for picture sizes (landscape and portrait in the post itself)?

Ben Cook January 4, 2010 at 2:57 pm

Koen, glad you like the skin. The skin definitely handles landscape images better but it does ok with portraits as well.

If you have images that can fit the 955 width that looks really sharp IMO but in the end it comes down to personal preference. I’ve used this skin on one of my other sites (http://viralimages.com) and it looks good even with much smaller images.

Good luck & let me know how it goes!

Koen January 6, 2010 at 4:10 pm

Tnx for the reply Ben. My dev-project can be found at http://www.koencolpaert.net/dev/ The current sizing of the images is a remain of the former theme and I am searching for the best balance between swift loading and visibility.

Lovinthistheme! January 19, 2010 at 2:39 pm

I really like this but for some reason I get an error lacoralina dot com / blog thank you for any assistance you can provide me with :)

Ben Cook January 22, 2010 at 5:41 pm

I’m guessing you didn’t tell the plugin where to find your images in one of two places. I’ll email you to try and walk you through it. Glad you like the skin!

amanda January 24, 2010 at 2:32 pm

Hey I was the lovinthistheme comment :D Do you have gtalk or something maybe I can figure this out myself I’llt ry again.. or else email me @ this address when you have time :)

Thanks!

amanda January 24, 2010 at 2:45 pm

i think the issue is my upload folder, does it have to be chmod other than 755 or something?

Ben Cook January 25, 2010 at 3:44 pm

Amanda, no your upload folder doesn’t have to be anything other than 755. You do need to make sure that you’re pointing the DCG plugin to the correct upload folder though AND that you’re entering the special dfcg-image as a custom field. Are you doing both of those?

David February 12, 2010 at 4:58 am

Hi Ben -

Thanks for the outstanding skin. I’m trying to configure a site for my sister, who is a photographer. Everything seems to be working except the teaser thumbnails on the Home page. No matter what size I set in the Thumbnail Settings in Thesis Options, the “thumbnails” are displayed at full size (955×500). Looks really bad. Is this something that needs to be set in custom.css? Or should I just crop and upload my own thumbnails?

Thanks for the guidance.

Ben Cook February 12, 2010 at 10:43 am

David, it sounds like you might be dropping the image url into the Thumbnail Image field on the posts. If you do that they won’t be cropped automatically. If you only drop the image URL into the POST Image field, they should be cropped.

If that doesn’t work, feel free to let me know and either post the URL here or email it to me if you don’t want it publicly viewable.

David February 13, 2010 at 6:30 am

Ben – I think you were right. All seems to be okay now. Do you know if there is any way to prevent a specific post or posts from appearing as a teaser (thumbnail) on the Home page. I can’t find any provision for it in Thesis panels, nor any reference to it in any documentation. It would be nice to limit the home page to specified content.

Ben Cook February 13, 2010 at 5:28 pm

David, I don’t think there’s a way to do it easily. At least not that I know of. You could create a customized home page by creating a new page that has a custom template but that’s probably a couple of tutorials on its own.

Nick February 15, 2010 at 7:26 pm

So… uh, where is the download link? I signed up for the feed but thats the only option on the left side.

Nick February 15, 2010 at 7:29 pm

Nevermind… it is visible in IE not in Firefox.

Ben Cook February 16, 2010 at 10:59 am

Nick, what’s weird is that I’m using FireFox & I’ve checked the pages in Adobe Browser labs as well.

What version of FF are you using and are you on a PC or a Mac?

Nick February 17, 2010 at 2:31 pm

Ben,

3.5.7, It seems to be working in FF now though. Strange; probably a one-off glitch.

Mark February 22, 2010 at 7:17 am

I’m sorry if you are repeating yourself here…..but I did try to get this to work with the Pages instead, but failed miserably.
1. I do not want it to take the pictures from the posts.
2. I would actually like to have posts without images being involved….as I’d like to have people follow me on an RSS feed. If I want images in the post, I will just add them, from the gallery I talk about in 3.
3. I also want to have the main image on the first page to be a large photo. I’d like to have a seperate image gallery on a different page to draw from as I’d like to be able to upload to the gallery quickly and easily.

While I followed everything closely, some of the sections in the dynamic content plugin were not the same number as you had in your tutorial so it through me off completely.

I’d rather not abandon this and go to the new theme my girlfriend suggested (Grace)……but I do need help.

Appreciated,

Mark

katemckeon February 22, 2010 at 9:44 am

Dang. Love the theme, couldn’t get the box to work. I kept getting line errors. Thanks for putting it out there!

kate

Ben Cook February 22, 2010 at 10:53 am

Mark, it sounds like this skin might not be the skin for you.

Also, I’m not really sure what having images involved in your posts has to do with people following your RSS feed.

Basically it sounds like you’re wanting to alter the skin in a lot of major ways and unfortunately I just don’t have the time to code that for you. Sorry!

Ben Cook February 22, 2010 at 10:53 am

Kate,
Glad you like the skin. Can you post a link to the site you’re seeing the line errors on? It’s hard to diagnose without seeing the patient :)

Pearl February 26, 2010 at 8:45 pm

I am just setting the site / skin up. It seems to be working fine. I would like to know how to more evenly separate the “teaser” section to make it even on both sides?

http://www.CameronSanborn.com

jwarner March 1, 2010 at 12:21 am

Hi Ben, I’m excited about this theme!

For some reason I can’t seem to get past “Upload the custom.css, custom_function.php and layout.css files to the Custom folder, over-writing your current versions.”

When I try to upload, I get a message that says, “The operation can’t be completed because one or more required items can’t be found. (Error code -43)”

I am trying to upload it on a brand new blog. Hope I can get it work.

Ben Cook March 1, 2010 at 1:54 am

Hmm, that’s a new one for me. What are you using to upload the files?

You need to be uploading these three files in the custom folder via an FTP program or your host’s file manager etc.

jwarner March 1, 2010 at 7:12 am

I am using an FTP program (ExpanDrive)

jwarner March 1, 2010 at 8:39 am

It’s working Ben!

Ben Cook March 1, 2010 at 5:05 pm

I’m glad you got it working. I obviously wasn’t much help but as long as you got there in the end that’s all that matters :)

I’ve noticed that some comments/questions for support have been getting caught in my spam filter :( . If I haven’t answered your question please don’t hesitate to ask again.

jwarner March 3, 2010 at 5:51 pm

Hi, I’m using your skin! Site is still a work in progress though. How do I get the pictures to show up in teasers under and slider (so that it looks more like your exhibit demo site)?

Pearl March 4, 2010 at 9:01 am

jwarner,

When you make a post while using the thesis theme, there is an option down a little bit on that page for the post image. Simply paste in the url of the image that you want to use in the post & it will automatically re size for thumbnail use in the teaser section.

* Be sure not to include the image in the post itself (like I did initially), because you will then end up with 2 pictures in the post. It took me a while to figure that one out, because I am brand new to thesis ;)

Hope this helps a bit ;)

Pearl

Avinash D'Souza March 5, 2010 at 12:46 am

I love this skin!!Tweaking this is gonna be my weekend project..it’s a great start but not enough for me! I’m so kicked by the fact you went this far….

Cheers,
AviD

Tom March 8, 2010 at 11:40 am

Nice, and looks exactly like what I want for a photoblog, but it’s driving me crazy…the closest I have gotten is (with only 2 photos, working on “localhost”) is the first pic thumbnail badly cropped, main box empty or saying ERROR)…the error messages all tell me that they shouldn’t stop it from running. The dynamic gallery has been upgraded, so this is not the same… I suspect you would like more specific errors, but I also suspect there is one oversight I am making. All ideas welcome, thanks in advance.

Ben Cook March 8, 2010 at 12:05 pm

Tom, DCG has updated again recently and made a couple of changes as to how things are handled apparently. There should now be a DCG field that you drop the URL of your image into for the main slider.

For the thumbnails, you need to drop the URL for your large image into the Thesis Post Image field, or a self cropped image into the Thumbnail field on each post.

Hope that helps!

Jim March 9, 2010 at 4:04 pm

Thanks for the great skin Ben! Just put up my first test install for Exhibit…my first Thesis too. Wondering if you have any other “portfolio” type skins in the works?? There’s also a developer named ProPhotoBlogs also doing some beautiful work with portfolio themes exclusively…might spawn a few ideas for you. Haven’t seen behind their curtain yet, but seems to be a Thesis competitor…catering just to photographers.
Also, if there are any other color schemes for “Exhibit” lurking out there?…or any tips/tricks for modifying your color scheme…would appreciate knowing. Thanks!

jwarner March 9, 2010 at 5:59 pm

Thanks Pearl and Ben, everything is working fine now. Will post the link once I finish up with the final tweaks.

Jim it’s easy to change the colors (with Thesis). Login in to your Wordpress admin, looking at the sidebar to the left-scroll down to the section named Thesis Options and click on DESIGN OPTIONS, Then there is a section called Fonts, Colors & More! and you can easily change the colors to just about everything there. Hope this helps.

Leave a Comment

Previous post:

Next post: