Build Your Own Business Website header image

Portfolio Website With Horizontally Scrolling Content

Difficulty Level -

Filed Under Topics - , , , ,

Listed Under Lesson Subjects -

Applies to -

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.

Part 1 – Review an Example and Discuss Goals

This is the first in a series of live lessons on creating a Horizontal Scrolling Image Display in Thesis and WordPress. In this lesson we look at a site with an example of the type of display that we’d like to create. The site is set up with the position of the footer and header fixed so as you scroll horizontally through the content, they remain in place. Thesis is uniquely capable of handling this style. In future lessons we’ll explore the use of the Thesis full-width framework because with this framework you can make the position of the header and footer area fixed and absolute without affecting the content area. We’ll look at using the Thesis post image to stack posts side by side or perhaps do it as a custom post type so that you could regular blog posts and have a custom post type for the image style posts. Then when you click on the image it takes you to the image post. We’ll also explore the CSS issues for styling the site.

Video Transcript

Rick: Okay so let’s see, the 2nd question is from Kim and Kim, I’m going to unmute your microphone here. Kim, are you with us?

Kim: I am with you. Can you hear me?

Rick: Yes, I can hear you softly.

Oh, can you hear me better now?

Rick: Yes.

Kim: Okay sorry, oh am I… are you asking me what I wanted to do?

Rick: I am. You know what? I had the site address set up here but I seem to have lost it. So why don’t you give me that site address again.

Kim: Oh shoot. Let me find it. I found this site the other day and it’s a beautiful horizontal display of beverages and I wanted to see if this was something easy to… well, I’m sending this right now…easy to set up in WordPress.

Rick: So when you say you’re sending this right now, does that mean you’re putting it in the chat window or what?

Kim: I did, yeah. Is it not in there? Can you see it?

Rick: Let’s see. I can…you know what? My question… let’s see, hang on a second. Here we go, okay so… got it.

Kim: Oh okay.

Rick: Let’s see if I can capture… oh yeah. Okay.

Kim: Hold on just a second. Sorry, you caught me off guard and I wanted to turn off the television.

Rick: Sure. So let’s see, piajanebijkerk. Okay so he’s got this really cool site or she’s got this really cool site where you can…where the content is horizontally laid out, not vertically. Only, I don’t really see that very well in the homepage. If you look at the interior pages, you can see that… if you scroll across like this, each one of these images shows up on the right. And if you click on one, does it go someplace?

Kim: It does not go anyplace. But I was thinking, considering my work which is a rather large… some of it… I have these webpages to show. I was thinking that on the image, that would pop up another window and show the image. Does that make sense?

Rick: Yeah. So the way she’s… and you can see that the bottom of this is here and I guess the footer is down there. I bet that this is designed to display quite nicely in a smaller browser. Let’s take a look at that for a second here.

So if we set our browser to 1024 by 768 and then put it in…no, not 1024 by 768. That’s too small. But probably 1280 by 1024…no, that’s too big.

Kim: You know, the other thing I’m wondering if that’s just one… I’m looking under the books right now but I’m wondering if that’s just one raw image or there are separate images. I guess you can make those separate images. Looks like… oh no. No, they’re not.

Rick: Yeah, they’re definitely separate images. And so you know, I’d really like this in particular to be a case study because I think it really has a lot of opportunity for being quite interesting. I mean obviously, the way this works first off is that the whole page is left aligned, right? Your typical Thesis page is centered but this one is left aligned and the position of the footer and header are fixed so that as you scroll across the page, the footer and the header stay in place.

Kim: Oh yeah, okay.

Rick: And actually, I think the Thesis framework is uniquely capable of handling that style because if we use the Thesis full width framework, you could make the position of the header area fixed and absolute and make the position of the footer area fixed and absolute but not make the position of the content area fixed and absolute. So you make everything left aligned, you make these 2 parts fixed. And then you make this part here not be fixed but instead of having the blog post follow one after the header, what you would do is you would have them essentially stacked side by side. And you know, I think the way I would do this would be… in order to be able to preserve this arrangement plus a more traditional blog arrangement so that you can have… this is essentially an archive page where this was an archive of all interior photography posts. And then this is essentially the equivalent of a teaser except it’s not going to be a teaser. It’ll be like the Thesis post image or something and then… but then what it would do is it would just… we would align those or redefine the layout of that archive so that one, it only brought up images with links and two, it stacks the images side by side.

And then you could either do this as a custom post type which is probably what I would do, make it a custom post type so that you could have a regular old blog post type for blog posts and then have a custom post type for these image style posts. But when you click on them, it takes you to the image style post. That’s probably not absolutely, strictly speaking necessary but would you… on, are you thinking of having essentially content blog posts or not?

Kim: I think so. I mean, I would like to have… and I wondered if it would be weird if you went to a blog and that completely changed the sort of the shape and feel of the site. You know what I mean?

Rick: Yeah you know, you could make the blog posts and this would be interesting to try. Now I’m not exactly sure how you’ll do it but it would be kind of fun to work out. You could make the blog post so that the image is right here and then the text essentially wraps in columns. And so, the longer the text, the more you have to scroll in order to read. Now that’s kind of the opposite direction of what you’re used to reading, right? And also, will take some finagling to figure out how to make these columns of text you know, essentially stack beside each other as the text expands.

But alternatively, you could have these archive pages, essentially that’s what they would be, archive pages show the portfolio horizontally. But as soon as you go to the actual blog page itself, it shows vertically. And so this still stays fixed but now, the footer drops down until you get to the point where there’s you know, like a normal blog. And so in the normal operation of a regular blog post, you’d scroll up and down. But for the archives where this is being displayed, you would scroll horizontally.

Kim: Yeah. I just like this format and now, I see a lot of sort of artistic sites like this now. It was a little easy to… I just like the way it looks.

Rick: You know what? I do think it’s totally cool and I’d be very interested. Obviously, you can see that there’s something… she’s got every single image exactly the same height.

Kim: Right, which I think you need. You absolutely have to have that for this to be… to look really good.

Rick: So just… without really… without changing something too much, does she only have underwear for 4 days here or… anyway, I like that too… knit utensils, fabric utensils, yeah. I wonder if they’re dishwasher safe, probably not. Anyway, okay back to more serious things.

I mean that’s why this works is that every image is exactly the same height.

Kim: Right.

Rick: But if you’re interested in working on a case study like this, I’m totally interested in doing it too and we’re getting to a point where we’re looking for some new projects to do. So…

Kim: I think I’ll mock it up and I’ll find my images and resize them and just start sort of organizing what I want. Because obviously, it has to be the navigation, it has to be in sections you know, photography, illustrations, books and that kind of stuff.

Rick: Well, if you would send me you know, I don’t know, a dozen images all of the same height that we could just use as samples then I can start mocking up the logic.

Kim: Okay yeah, right.

Rick: Then we can take it on as a case study and look how to accomplish each of these. It’s actually… I think it’s really easy when it comes right down to it.

Kim: You’d just set up the custom page and then you’d just sort of replace the images and duplicate it.

Rick: I think almost all of this is CSS. You know obviously, this is custom post type. It’s not CSS and so there’s a little bit of change in that. But really, most of the behavior of this page is CSS-based so it should be fairly simple in that regard. And really, the only thing other that we’d have is a you know, a custom archive loop that would display horizontally rather than vertically and takes a different element. But that sounds more complicated than it really is. It’s actually… it would be quite easy, I think, to accomplish this.

Kim: Okay well, I’m excited. Thank you.

Rick: Okay well, you’re welcome. So send me some images and we’ll start working on it.

Kim: Okay, thanks.

Rick: Okay, you’re welcome.

Kim: Bye.

3 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
3 comments… add one
  • online11 May 12, 2012, 10:19 am

    where are part 2-5 of this case study, i am interested in having a similar setup for my portfolio. I had not noticed the case studies before. this would be a great help.

    • online11 May 12, 2012, 10:26 am

      I actually found the other videos. sorry for being hasty before properly searching. thanks for these resources. i will surely be renewing my membership because there is so much information provided, all the resources are here to complete one’s website in our own time and be successful at it. thanks.

      • Rick Anderson May 13, 2012, 9:57 am

        We lost some widgets, but they’ll be back today. This isn’t actually completed yet and I’m waiting for the member to figure out what she wants to do. If you’d like to piggy back into this with your own project, let me know. I’d really like to finish it.