Gallery Display Help
-
I’m working on creating a “portfolio” section for my blog, but am finding that none of the gallery options really match my vision. I ran across this blog (http://ibraake.com/) and really like the use of the “previous” and “next buttons to scroll through images. I am 99.9% sure they use the same premium theme as I do.
Ideally, I’d really like to have a gallery that looks similar to this (http://nishe.net/index.php/my-memories-of-you/) where you just scroll to the right for the next images. However, I’d settle for something like Ibra has if that is impossible to accomplish.
I would really appreciate any help!
Thank you!The blog I need help with is: (visible only to logged in users)
-
Hi there, on http://ibraake.com it appears they are using posts set to gallery “post format” and have set their site to show only one post per page at Settings > Reading, and are using the slideshow option on the gallery they have inserted. To do this:
1. Go to Settings > Reading and set your site to show only 1 post per page and save changes.
2. Create a new post, set it as a Gallery Post Format and then follow the instructions in this support document on creating a slideshow.As an alternative, if you are going to write actual posts on your site as well, you can create a gallery slideshow in a page and then set the page as your static front page for your site and set another page as your blog (posts) page.
You may wish to take a look at both of the above options. The gallery in the page option will display differently than the gallery post formatted post.
-
Thanks so much for the response! I absolutely understand what you mean, but it’s still not quiiiiite what I was after.
I actually have a page with a few images set as my static front page right now, then you can find my actual blog posts from a link in the menu. However, I’d like to create a “portfolio” section of my website (using pages) to display some of my best work. I was hoping maybe some CSS existed or something that would allow me to change the look of the basic galleries.
-
To simplify what I’m asking:
Does any CSS exist that would allow me to change the look of a gallery/slideshow on a page?
-
I’d REALLY love to have galleries for my portfolio like on this site I linked to (http://nishe.net/index.php/my-memories-of-you/). It seems like a super simple concept, honestly.
-
a) “Does any CSS exist that would allow me to change the look of a gallery/slideshow on a page?”
Depends on what you mean by “look”.b) Your Ibra Ake example is a gallery format post using the special gallery of the theme. Since your theme is premium, I can’t use it so I’m not familiar with all its options. You can ask here:
http://premium-themes.forums.wordpress.com/c) Your Nishe example isn’t a gallery or anything: it’s just a bunch of images inserted into a post and enclosed in a div styled “width:7400px;” to make the div extend way past the regular content area. Personally I find it terrible when the content stretches past the end of the browser window and you have to scroll horizontally to see the rest, but if you like it it’s easy to create. You can also create a variant: confine the thing to the regular content area of the page and insert a scrollbar right below the images.
-
Thanks so much, justpi! I think I’ve settled on wanting something similar to the Nishe example (sorry to be so confusing), as I really like the look of scrolling horizontally to see the images. I’ve been working on it for a while now, and here is what I’ve come up with so far:
http://shewhobathesinmoonbeams.com/test/
I just basically put the images into a scroll box. However, I’d really like to hear more about your way of doing it because I don’t care for that ugly scroll bar at all.
-
My way wouldn’t be different: you can’t have a scrollbox without a scrollbar!
You’ve added this:
#myWorkContent { border: 1px solid #F8F8F8; height: 510px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; width: 940px; }To make it like Nishe’s, turn it to this (after you remove the styling of that div from the Text editor):
#myWorkContent { border: 1px solid #F8F8F8; width: 2200px; }and add this:
.page-id-758 #container { overflow: visible; }If I were you, I’d probably add some space between the images.
And, #F8F8F8? That’s almost invisible! -
You are wonderful! Is there any way I can isolate the menu and logo area, so it would scroll along with the photos?
Also. Yeah, “F8F8F8”. Haha. This is still a tester round for me, so although I’m going to change it to completely invisible, I wanted a faint line in there to work with while I played.
-
Is there any way I can isolate the menu and logo area, so it would scroll along with the photos?
As far as I know, no: this would require javascript, which we’re not allowed to use.
-
-
As it is, the whole page scrolls right with the images. I’d like to confine it all to a boxed in area, so you can still see the menu as you scroll.
-
Something like this might be a good place to start. This example is *very* dependent on your content all looking very similar. In fact, to use this kind of layout, I’d recommend always using an image of the same height if you can, and then using the more tag just after the image on every post. That way, extra content won’t get in the way on the home page design.
In any case, try it out. It will only affect views on screens if they are at least 926px wide and it’s an example to give you some starting point ideas:
@media screen and (min-width: 926px) { .home header[role="banner"], aside[role="complementary"] { width: 160px; } .home #container { width: 6600px; } .home #container, .home #content { max-width: 6600px; float: left; overflow: visible; } .home #content { width: auto; height: 740px; margin-left: 2em; overflow: hidden; } .home .post { float: left; } article footer .feedback { padding-right: 1em; } }
- The topic ‘Gallery Display Help’ is closed to new replies.
WordPress.com Forums 