Jul.26.2007
Using WordPress as a CSS gallery
- Filed under: Tips
Although CSS galleries showcasing beautiful designs are nothing new, using WordPress to power your CSS gallery is picking up steam. Take CSSRemix.com for example, one of many CSS galleries powered by WordPress, although it would be time consuming to duplicate all of CSSRemix’s features, it isn’t hard imitate the basic structure.
- First, you need know how to use custom fields.
- Second, download Lester Chan’s WP-PostRatings plugin, install, and integrate it. This plugin isn’t necessary, but people like to rate stuff so let them rate.
- Third, decide how many custom field keys and values you’ll use for each featured-site or each entry. For examples: url (key) = http://www.wpdesigner.com (value), url_img (key) = wpdesigner_screenshot.png (value). The amount of custom field keys and values per site or entry equal the amount of work you have cut out for you.
Here’s an example of how to implement the outline above:
<?php the_title(); ?>
<a href=”value of url”><img src=”value of url_img” alt=”<?php the_title(); ?>” /></a>
<a href=”value of url”><img src=”value of url_img” alt=”<?php the_title(); ?>” /></a>
After you’ve gotten everything set up, outsource the job of indexing thousands and thousands of beautiful designs. Then, there you’ll have it, a CSS gallery powered by WordPress.
Ask and you shall receive- thanks for the pointers. I am still trying to get it all to fit together but it will soon be working.
Didnt know that Wordpress was used for galleries. I always thought they were custom scripted
Wai - Most galleries are customs. WordPress is just one of the scripts that can power a CSS gallery.
Very interesting post Small Potato! But I don’t understand how to display the posts as thumbnails (did you use css style or did you work on WP loop ?)
PS: sorry for my English I’m French and I like your Blog
@ TiJé
The URL does not convert itself to thumbnail images, you will need a screenshot script to do so (many php script available but none are easy to work with). We recently designed a gallery for a good friend using WordPress (wpSnap.com) and we ended up using an external script for thumbnail generation on a stand-alone server.
@hso
Thank’s. But I don’t understand how to do with css to display a gallery as the “free themes gallery” section of wpdesigner.com :/
The gallery is xhtml and php. CSS only styles the gallery to make it look good.
SP, so you can made a CSS Gallery ready Theme ?
just 7 responses for a Topic that 1.000.000 of people asking.
Keep the good work SP.
Andra.
I’ve been thinking about starting my own gallery too. So yea, I’ll definitely look into building something like a gallery-ready theme.
–> If you make a Gallery theme I would be stoked! I know there would be major link love from it.
Cool tips, or you can also run a photoblog like mine - http://www.flickrville.com
I’d love to do this with my book blog.
[…] To gallery or not to gallery - WPDesigner teaches you how to make one of those awesome CSS galleries you see all over the net. […]
And they just redesigned
I have a celebrity blog and I’d like to set up a page (!) where all celebrities are displayed with name, thumbnail and 2 links. I’ve read your articles about custom fields and I could get it to work how I want it, but only for ONE single celebrity (basically, I copied your themes showcases at the top and customized it so it would fit for me).
I also read the WP Codex about Custom fields and then added
, so it would show more than one of the same key, but the output is all text-based wrapped in a list and I don’t want it to look that way.
Now I’m not a programmer, but I guess I must add some PHP-code which repeats the custom html I’ve specified in the page template for each key and doesn’t end after the first one.
Any suggestions, SP? I’m desperate to make it work.
huh? Does the code-tag not work in comments? Anyway, where it said “I also read the WP Codex about Custom fields and then added” there should stand [?php the_meta(); ?] after added.
(replaced with [])
the_meta outputs text only. unless, you the values includes XHTML. if the values are texts only, don’t use the_meta. follow my example on using custom fields.
Yeah, I tried to do so, but I couldn’t get it to work the way I want it, because it would just put out ONE value per key, not multiple ones defined for the page. Doesn’t matter anyway, I got a fellow friend who’s a brilliant programmer do it for me.
Thanks for your help.
Oh, PLEASE create the gallery theme!
Thanks for the great tip. I bet you could write a whole eBook on how to “Get the most out of Wordpress”. Actually, maybe you could do what Lifehacker did and just create a book out of your blog posts that you’ve already written…
SP, I’m officially waiting for your CSS gallery theme!!!!
Can’t wait to put my hands on it!
Great idea.
Thanks!
SP, I’m officialy waiting for your CSS gallery theme too !!!
I like your themes, they’re so pretty
Here is a sample,http://www.csscoosite.com，and it did not use custom fields.
[…] 翻译自：Using WordPress as a CSS gallery […]
Hello webmaster, I came across your blog posting after searching for and your post on WPDesigner makes an interesting read. Thanks for sharing. I will research more next Wednesday when I have the day off.
I found your blog via Google while searching for and your post regarding Using WordPress as a CSS gallery looks very interesting for me
Hi! Anime Guy here! Nice blog posting about Using WordPress as a CSS gallery. I would have to agree with you on this one. I am going to look more into . This Wednesday I have time.
Hey! Nice writeup about Using WordPress as a CSS gallery. I would have to agree with you on this one. I am going to look more into . This Thursday I have time.
Thanks Emily. I recently released a WordPress gallery theme here.
Hey! You are right. Thanks for tis comment. I think this could help also.
Glad to see someone is staying on top of things.
Maybe I won\’t see this until it happens, anyway. Maybe it\’s true. Until now I have only seen this in another related post.
Hello
Do you mind if I use some of your content at my website jennifer-lopez.pl?
best regards
Yes, I would mind.
Dear SP, I am following your tips from the showcase theme comments posted by me. My question was how to create a custom page with thumbnails and sme details from the posts I have made to the category called “Works”. While I understand the custom fields roughly I am failing to understand how/where to apply them in the codes. These are my doubts:
1. Earlier I have created a Page called “My works” and applied a custom page template calling thumbnails and titles of the posts done under the category “works”. Now, I understand I can use the custom field attributes and the method you mentioned to list the items more effectively here.
2. Now remember I have a category called “works”, Now if i click on this category from the sidebar I am getting a list of items posted in the category in a format similar to any other archive pages. I do not want to create a confusion here for the users and would be ideal if the link takes the user to the “My works” page. How can I achive this?
3. Is pagination possible in this method or the default navigation only allowed (like the Next, Previous links in the loop)
You can use a custom category template instead of a page template. For example, category-(ID-number-of-your-category).php.
Also, install the WP-PageNavi plugin for pagination on home and category pages. WP-PageNavi doesn’t work for Page templates.
I used wordpress to power my new gallery: http://www.cssfirst.com. It has proven very effective so far.
Thank You SP
Will try it out and let you know. Merry Christmas and a very happy New Year!
This is so cool and interesting. Thanks for the heads up and for sharing this valuable info.
[…] Gallery sites, such as ones built upon OS Designer’s WP gallery theme, and portfolio sites rely on custom fields for handling and display of the initial image thumbnails. […]
Yep - I think wordpress is a much
[…] Using WordPress as a CSS gallery ?????? WordPress ?? CSS Gallery […]
[…] ? ??????? ??????? CSS Gallery WP theme, ??????? ??????? Small Potato (WP Designer) . ? ? ??????????, ? ? ??????? ??????? ??????? ???? […]
[…] Using WordPress as a CSS gallery ?????? WordPress ?? CSS Gallery […]
Happy birthday Jennifer Lopez!
star play poker chips star poker
casino code virtual virtual casino table
[…] Using WordPress as a CSS gallery […]
I’m sorry but I disagree to what you have just explained.
thanks for thats, how are you doing for this xmas? i took your reccomendation and purchased a
emit for my wife
http://spartansportspage.com/story.php?title=funny_christmas_gifts
[…] related posts. I read 50+ tools for the wordpress admin. It was excellent to get a lot from Using WordPress as a CSS gallery. World Maps is satisfying. Take a look at wordpress theme: duct tape business blog 2. Take a look […]
Small Potato,
Regarding the css gallery theme, is it possible for Css Gallery.com to purchase this theme from a previous owner? It is very sad to see this css gallery theme go.
Regards,
Css Gallery.com
Very interesting post!
Cool tips!
[…] Gallery.) If two columns are not enough, or you want some flexibility in item pages, Small Potato at WP Designer is selling a CSS Gallery WP theme. Both Shabu’s and Small Potato’s themes use a […]
Nice post
gr8 work
nice dude