WordPress.org

Ready to get started?Download WordPress

Forums

Graphic Design Portfolio Site with WordPress (12 posts)

  1. Shirohagen
    Member
    Posted 6 years ago #

    Hello

    I've been working on my own site for what seems like ages and I took a decision early on to use WordPress for it. I've faced numerous challenges along the way in using WP for a design portfolio and adapting my chosen theme, Hemingway to behave exactly as I wanted. I'm almost there now, so I thought I'd open it up for feedback, what do you guys think?

    http://www.holster.co.uk/home

    I'll be doing the big reveal at New Year, in the meantime I'm working on putting some advice as to how I did some things on the 'About this site' page (link in footer)

    Any constructive feedback welcomed...

  2. technotolitan
    Member
    Posted 6 years ago #

    I really like the design. You have worked it well. The about this site page is nice, in my opinion it's a bit long. I might try and break the plug-ins list down into 2-3 side by side columns the same way you did at the bottom with your recent posts/tracks/fav links.

    Also, I am sure you already know this but the Now Playing link for plug ins hasn't yet been linked. Lastly your description for "Paged blog posts" and "Custom blocks on a page" are the same.

    Everything else looks great. Well done.

  3. Shirohagen
    Member
    Posted 6 years ago #

    Thanks for the compliments, I'm glad you like it. The site info page isn't finished yet, so that's all still a bit all over the place. I think I'll try to keep it short and sweet! :-)

    ®

  4. shaft
    Member
    Posted 6 years ago #

    I'm in the process of converting wordpress into a portfolio machine as well! :-)

    Anyhow it's the site is nice but I personaly dislike scrolling down for the images - I'm thinking of using some lightbox/highslide plugin for a "closer view" option combined with a relatively big thumbnail (300px for example)...

  5. jp978
    Member
    Posted 6 years ago #

    Shirohagen, I quite like this site. I am especially impressed with how you managed different template for different "sections" in the top bar.

    1. How did you manage this? Are these different "blogs", or categories/pages in the same blog?

    2. What gallery plugin are you using?

    Thanks for any tips!

  6. Jwagener
    Member
    Posted 6 years ago #

    really nice design... :)

  7. Shirohagen
    Member
    Posted 6 years ago #

    Hi guys, thanks for the kind words, the site is properly launched now and I'm starting to get hits...

    In answer to jp978's question, I used categories to separate content for the site, reserving the tags for actually browsing. I have then used pages to present just portfolio category entries for example, and then customise the presentation of each.

    I'm still finishing the site info page so check that out for some hints as to how I worked it out.

    ®

  8. Shirohagen
    Member
    Posted 6 years ago #

    An update to this thread, which still sends me hits regularly, so obviously a lot of graphic designers are interested in using WordPress as a CMS for their portfolios...

    I've ditched the evolved Hemingway theme I was using, and having gained a lot of experience by getting down and dirty with the Hemingway code, I've made more of an individual statement with my first ever 100% original WordPress theme.

    The new site houses all the same content, but uses far fewer plugins and less php files. Hopefully the content is more clearly organised and the whole site is more graphic and less generically 'bloggy'

    The idea is that any post can have a custom background image which is drawn from a custom field, allowing each project to set a tone over the whole browser window. If no custom field exists, a generic background image is used. I'm still working it out but I'm 90% there.

    Any comments or constructive advice is welcomed...

    ®

  9. electronicghost
    Member
    Posted 5 years ago #

    how are you implementing the custom bg for each post?

  10. Dan.F
    Member
    Posted 5 years ago #

    The background takes a long time to load... and the design definitely looks better without it.

  11. Shirohagen
    Member
    Posted 5 years ago #

    The background image name, including file extension (ie 'image.jpg') is held in a custom field 'background' which can be set for any page or post on the site when you write it. The template just reads this in and uses it for the CSS style:

    <!-- Decide on background graphic for the current page or post -->
    
    <?php 
    
    // Capture the custom field "background" //
    $background_graphic = get_post_meta($post->ID, "background", $single = true); 
    
    // For the search results page
    if (is_search()) {
    	// Use a image from the homepage //
    	$background_graphic = get_post_meta(4, "background", $single = true);
    }
    // For the category Portfolio //
    elseif (in_category('12')) {
    	// If there is no value use a generic one from Page 9 //
    	if ($background_graphic[0]=="") {
    	$background_graphic = get_post_meta(9, "background", $single = true);
    	}
    }
    // For the category Play //
    elseif (in_category('25')) {
    	// If there is no value use a generic one from Page 13 //
    	if ($background_graphic[0]=="") {
    	$background_graphic = get_post_meta(13, "background", $single = true);
    	}
    }
    // For the page Info and its children //
    elseif (is_page('11') or $post->post_parent=="11") {
    	// If there is no value use a generic one from Page 11 //
    	if ($background_graphic[0]=="") {
    	$background_graphic = get_post_meta(11, "background", $single = true);
    	}
    }
    // For the category Blog //
    elseif (in_category('16')) {
    	// If there is no value use a generic one from Page 12 //
    	if ($background_graphic[0]=="") {
    	$background_graphic = get_post_meta(12, "background", $single = true);
    	}
    }
    ?>
    
    <!-- Body style to control page backgrounds using WP custom fields -->
    
    <style>
    body { background-image: url(<?php bloginfo('stylesheet_directory'); ?>/images/<?php echo $background_graphic; ?>);
    	background-repeat: repeat;
    	background-attachment: fixed;
    }
    </style>

    This code is in the header.php file and is a bit more complex here as I wanted subpages to inherit the parent background image if no specific one was specified, hence all the if, then stuff. For example blog posts don't have their own background images specified, they use the overall background taken from the blog front page.

    But basically it is very simple, the custom field is read from the page or post into a variable and then used directly in a CSS style definition.

    Dan.F: The images aren't all optimised or implemented properly yet. For pages with more rigourous content, I'm finding the most subtle backgrounds are best so as not to compete, but for a few key pages, like the homepage or the 'about me' page I'm making more of a stament by choosing an impactful image. My photography is something I want to give a sense of. For the individual projects, the background image will be a pattern or detail from the project itself. The difficulty is currently in getting either very large images so the edges are out of view down to a small file size, or using smaller ones but tiling them well.

    Hope this helps anyone trying to do something similar...

    ®

  12. Anonymous
    Unregistered
    Posted 5 years ago #

    Very nice design, I'm a fan!

Topic Closed

This topic has been closed to new replies.

About this Topic