WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > creating a portfolio- align and evenly space thumbnails?

Reply
  Thread Tools Display Modes
Old 27th March 12, 08:31 PM   #1
achenn
WLC Member
 
Join Date: Apr 2011
Posts: 16
Default creating a portfolio- align and evenly space thumbnails?

i'm using wordpress to display my portfolio.
i'd like to have my portfolio page display thumbnail images spaced equally across and down my portfolio div. once clicked on, i'd like the thumbnail to go to the individual page where a larger image and brief description will be displayed.

how do i achieve this?

Here is my site live.

functions.php:
PHP Code:
    <?php // sidebar functions
    
    
if(function_exists('register_sidebar'))
    {
        
register_sidebar();
    }
    
    
// portfolio functions
    
        
add_action('init''create_portfolio');
        function 
create_portfolio() {
            
$portfolio_args = array(
                
'label' => __('Portfolio'),
                
'singular_label' => __('Portfolio'),
                
'public' => true,
                
'show_ui' => true,
                
'capability_type' => 'post',
                
'hierarchical' => false,
                
'rewrite' => true,
                
'supports' => array('title''editor''thumbnail')
            );
            
register_post_type('portfolio',$portfolio_args);
        }
    
    
// custom input- portfolio backend
    
        
add_action("admin_init""add_portfolio");
        
add_action('save_post''update_website_url');
        function 
add_portfolio(){
            
add_meta_box("portfolio_details""Portfolio Options""portfolio_options""portfolio""normal""low");
        }
        function 
portfolio_options(){
            global 
$post;
            
$custom get_post_custom($post->ID);
            
$website_url $custom["website_url"][0];
    
        }
        function 
update_website_url(){
            global 
$post;
            
update_post_meta($post->ID"website_url"$_POST["website_url"]);
        }
    
    
// detail columns- portfolio backend
    
    
add_filter("manage_edit-portfolio_columns""portfolio_edit_columns");
    
add_action("manage_posts_custom_column",  "portfolio_columns_display"); 
    function 
portfolio_edit_columns($portfolio_columns){
        
$portfolio_columns = array(
            
"cb" => "<input type=\"checkbox\" />",
            
"title" => "Project Title",
            
"description" => "Description",
        );
        return 
$portfolio_columns;
    }
    function 
portfolio_columns_display($portfolio_columns){
        switch (
$portfolio_columns)
        {
            case 
"description":
                
the_excerpt();
                break;                
        }
    }
    
    
// add thumbnail support
    
    
add_theme_support('post-thumbnails');
    
    
?>

portfolio.php:

PHP Code:
    <?php
    
/*
    Template Name: Portfolio
    */
    
?>
    <?php get_header(); ?>
        <div id="portfolio">
        <?php 
            $loop 
= new WP_Query(array('post_type' => 'portfolio''posts_per_page' => 10)); 
        
?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <?php    
            $custom 
get_post_custom($post->ID);
            
$screenshot_url $custom["screenshot_url"][0];
            
$website_url $custom["website_url"][0];
        
?>
            <div id="portfolio-item">
            <a href="<?=$website_url?>"><?php the_post_thumbnail(); ?> </a>
            <?php the_content(); ?>
        </div>
            <?php endwhile; ?>  
            </div><!-- #content -->
    
    <?php get_sidebar(); ?>
    
    <?php get_footer(); ?>

any and all help is greatly appreciated!
achenn is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:21 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.