Build Your Own Business Website header image

How to Organize an Artist’s Portfolio Site

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This member is creating an artist’s portfolio website. He wants to display a large number of images of an artist’s work. The work is divided into two media and each media type has several subject types. We discuss using posts for that purpose and the role of tags and categories for organizing those posts.

Video Transcript

Rick: Okay we’re going to go back down under and talk to Brian here. Brian, I’m going to unmute your microphone. Are you with us there, Brian.

Brian: Yes, can you hear me?

Rick: Okay, I do hear you fine, yeah. So you started off by asking a question, actually, you asked this question a few days. It’s a really good question and sort of a complicated one. And so, I didn’t have a chance to attempt to answer it. But looking at… oh, Sam is here. Great, okay. But looking at the question here, I’m a little bit at a loss as to what the purpose of the custom post type would be. Why would you use a custom post type in this situation? Seems like what you’re doing here is you’re creating a portfolio site and you want to have posts that have examples of oil paintings and pastel sketches or pastel drawings that are separate from the NextGen gallery. Is that right?

Brian: That could very well be the best way I’ll put it. I wasn’t committed to the custom post types but you know, they seem to be the major concept of everything and so I thought well, maybe they…but basically, what I… preferably, in one place, it will be all the actual images, full of paintings, just in one location. And I understand that Thesis automatically creates the thumbnail so I don’t have to worry about them. I can pre-specify what size they will be in etcetera. But basically, I’ve just got the original big images in one place. I want them… well, I assume that was… the way I would see it working is that a person would be able to search on or of the particular typing of the words or of the oils or all of the pastels. Or they would search on all of the family ones or all of the children ones or all of the scene ones. Going that far, I gather that that is actually very straightforward and I don’t need to use custom post types, right?

Rick: Yeah well, the only reason you would do a custom post type for that is if you were going to use blog posts for something else. If you’re going to use blog posts…

Brian: I don’t know… being blog posts or if they were, they’d be…

Rick: Well, that’s what I meant. If the site doesn’t have… if she’s not blogging at the same time as doing this, right? She doesn’t have a blog that you’re going to use a typical blog functions for then I would use the blog functions for this. And so, what I would do would be to use categories to distinguish oils and pastels and then I would use tags for the subject matter of the painting or the pastel. And so a person could search for… in that case then, a person could… you could… you know, if there were like I don’t know. If there were 20 types of subjects so interior scene, landscape, children, pets, still life, you know, that kind of thing. Those are all subject of the illustration. And if you had those same classifications for both pastels and for oils then you could easily just have a list of… that the person could click on to generate essentially the page that displayed all of the oils that were under still life, all of the oils under landscape or all of the pastels that were of one of those things or everything that is either a… or is one of those. And you could do that easily without custom post types at all. Simply using the blog or the blog posts themselves, you would have one post per image and then each post would have a category. It’d only have 2 categories. You’d have oils and pastels and then each post would also have sort of… would have a tag which should be the subject matter. And actually, each image could have more than one tag but it would only have one category. And then if you used a category or a tag widget you know, and you could click on a subject matter and WordPress would automatically generate the page that put every painting with that tag or every pastel with that tag. And you wouldn’t have to do anything special with that at all and essentially, those are archive page.

Brian: Have you just referred to… instead of a plugin that would I would use for… in case of a plugin for creating that content…

Rick: Yes you know, for example, Widgets Reloaded has good taxonomy and category widgets.

Brian: Roger, got that.

Rick: And that’s probably where I’d start. I’d probably start with Widgets Reloaded. That’s what I use most often for that kind of thing. An alternative to that is you could use… one of his other one’s called Query Post. He’s got a… it’s the same author, Justin Tadlock. He’s got a plugin called Query Post that is very flexible and it in fact, that would probably be the one you would use to… or even one of the custom taxonomy widgets we’ve talked about in the past. Those will often do tags and categories as well. And so because some of your searches, the search for all of the oils that are landscape. That’s a multiple taxonomy search. It’s a category and a tag search. And I think Query Post would handle that just fine but certainly, one of the taxonomy widgets would be able to do that as well. So you know, taxonomy would just like we used in the library.

Brian: Right, okay well, I think that’s all I need. It’s very important that you have the right… you cleared that up, I can now carry on and… later. I think I’m constructing in the right…

Rick: Yes and you know you have a lot of control over the size of the thumbnails that are generated and … has a really interesting post in there, in hercustom loops post in her blog where she describes how she uses that to create essentially, just a gallery of images. So it looks just like a gallery, it doesn’t look like a bunch of teasers. It really is a bunch of teasers but it doesn’t look like a bunch of teasers. It looks like a gallery and she’s got a pretty interesting post on what she uses to accomplish that.

Brian: I mean, it’s a very… site in general…

Rick: Yeah, let’s see… I believe it’s this one right here, WordPress Custom Loops and… see, I only had to type KRIS and this page came up because I’ve looked at this a bunch of times. And so, she’s using… let’s see, putting it all together and this is an example of… it’s just a list of the names… custom loops in Thesis.

Brian: I recognize her expertise but some of her stuff, I wondered…sort of a bit old and superseded by more recent…

Rick: Okay well, if you look at this right here, how about using thumbnails instead of post titles? This is where she does that, where she essentially creates a gallery and what she uses is this… she uses this code here. Now I never used it myself but post image = Thesis post image info thumb and what she does is in her loop, she just displays the thumbnail image and what happens then is those thumbnail images just you know, go out in a list and then she makes… she floats that list to the left so that they just stack up beside each other. And I mean this would be an interesting…. Once you had your basic data down, we could certainly do this as an exercise you know, in one of our sessions where we customize that Thesis loop so that it… the archive loop displays the thumbnail but doesn’t display any blog post text or anything like that.

Brian: Yeah I would like to import all you know, on the site like import images right… to an image directory or do I need to use the back end so that it would automatically create the thumbnail…

Rick: Well you need to actually put… the only way it’s going to create a thumbnail is if the address of the image is placed inside of the… let’s see, if the address of the site or of the image is placed inside of the Thesis thumbnail image section or the Thesis post image section. So if you’ve got a post that you’ve created, the only way an image is going to be displayed is if the image address is placed right here. If that image address is placed under post image then it will automatically generate a thumbnail. Now if you placed it under thumbnail, it won’t generate a thumbnail. It will just use the image you placed here. So you…

Brian: The default site thumbnail…

Rick: The easiest way to control the size of the thumbnail because presumably, you’re going to do it once and for all, the easiest way to do that is under Design Options and then post images and thumbnails and default thumbnail settings. And you would set that right here. Let’s just say we wanted our thumbnails to be 200 pixels wide and 300 pixels tall, say that that’s what we wanted. Now, unless you specify otherwise, but you can on a post by post basis… but unless you specify otherwise, when you put the image address here, it will generate a thumbnail that is 200 pixels wide by 300 pixels tall. Now you can come down here and change it if you wanted to for a specific page but you wouldn’t change it for every page this way. Does that make sense?

Brian: I can change it…post.

Rick: Yes, for this particular post. If there was some reason why you needed to change it for this particular post, you could do it here. But the real trick is set it in the Design Options and then put that image address right here and you’ll get the images automatically created for you.

Brian: So if I have a lot of images like 2 or 300, the best way is still just create a post one at time… with individual posts and move on to the next one.

Rick: Well, if you want to use any of the WordPress functions for displaying them, yes. I mean, your option of course is to use the gallery, right? You could use the NextGen gallery instead and then you wouldn’t be necessarily creating posts for every image. You would just be… and then you can upload a whole bunch of images together and we can talk tomorrow about how to specify the size of images in NextGen so that…

Brian: NextGen… I think what I would want to do is to make the site as you’ve described. I’ve got that. Once I have that, if I want to start to use NextGen for some images to it anywhere… NextGen galleries be totally separate and their images be uploaded separately or can they pull them from the same location where all the images are?

Rick: Yes, if you uploaded the images say, to a folder on your site, not using Media Library at all but you just take a folder, you upload it to your site, you put all your images in that, you grab the address of each of those images to put them inside these posts. But you never use the Media Library. You could easily use NextGen on that same folder and all you do is use that folder import you know, to import it into NextGen. The images would still be stored in the folder, it’s just that NextGen would now know they’re there.

Brian: Okay so I could create… in different galleries and when…it just goes and gets the image from the one location where all the images are.

Rick: Yes, that is absolutely the case.

Brian: That’s exactly the directions that I need, that I want. Thank you, Rick.

Rick: Well and you know, I’m planning on talking about NextGen tomorrow and maybe we can look at how that might work out you know, tomorrow.

Brian: Yes, I’ll have a close look at everything that you’ve covered on the NextGen so far but I’m interested in you going further and exploring other possible ways of using NextGen for… on the site.

Rick: Well, it seemed to me like once upon a time, you asked the question whether or not hovering over a NextGen thumbnail could expand it. Am I mistaken or did you…yeah and that’s one of the things I plan on talking about tomorrow because I figured that out so..

Brian: Great. Okay, thank you very much, Rick.

Rick: Okay, you’re welcome.

4 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
4 comments… add one
  • dean haycox January 7, 2012, 3:36 pm

    Hi Rick.

    I wanted to follow on the question asked. Can you tell me when you start to build a website is there a process you go through, for example, do you create parts of the website before other things or do you go A through to Z.

    Because I ‘m not sure what order to start designing a website from beginning to end. Does it matter on the type of website which decides the order, I’m not sure were to start. If you could help and possibly tell me how you do it for example guidelines for specific websites, ecommerce, portfolio, membership.

    thanks

    dean

    • Rick Anderson January 8, 2012, 7:18 am

      Dean, the first thing to say is that for a beginner website development is an organic process. You don’t necessarily do one thing and then another and then another. You’ll find that you’ll do one thing, start doing another, go back and revise that one thing, start something entirely new, go back and work on the second thing, etc.

      The best place to start is to have a very clear understanding of the content you intend to deliver with your site. That content will be different for different types of sites. But the process is the same. You can start by making a list of the types of content you will be delivering and then create an outline or schematic site map of that content. You’ll see an example of that in the first sessions of the Membership website and Online Store series.

      Once you have the site mapped out, you’ll want to consider how that content is found by your visitors – in other words you’ll want to consider the various ways of navigating your site. That will include menus, page lists, category lists, tag clouds – it could even include lists of popular content and other types of lists.

      Next you’ll start considering various “page” layouts. You’ll typically start off with 3 or 4 types. The home page, a typical page, a typical post and an archive page.

      Then you start thinking about graphics.

      • dean haycox January 8, 2012, 8:33 am

        thanks.

        what is you prefered way to build websites, is it either online were the site is live or offline.

        Because I know in previous videos you mention devleoping clients offline and then moving online. Does it matter if your building a site for client or yourself while the site is live.

        • Rick Anderson January 8, 2012, 9:55 am

          Dean, the choice between online and offline development is personal. Most of my development for clients is online. I generally create a development subdomain and develop the site there. That way the client can also see the progress of the site. Once the development is done I copy it from the development server to the live server. The live server is the server that has the domain name that the site will be using.

          A recent example of this is http://www.relief.tailoringtheweb.com and http://www.reliefapp.com The first is the development server the second is the live server.

          I do occasionally develop offline as well. I generally only do that when I need to do a bunch of programming. The reason for developing offline is just that testing code is faster. So, when I develop a plugin or work on something that takes a bunch of trial and error I’ll develop it on a local server so that I don’t have to wait for ftp.

          If the site is entirely brand new I don’t think there is any reason why you shouldn’t do the development on the live server. On the other hand, if the site is existing then I would do the development on a development server.

Leave a Comment