© KBDESIGN, Creative Studio.
2014, Wszystkie prawa
zastrzeżone.

GridFolio – free wordpress theme


Dziś będzie trochę po angielsku więc od razu przepraszam wszystkich którzy mówią only in polish;)
Today I’m glad to release a beautiful and I quess simple and nice portfolio WordPress theme for all kind of web publishers is a clean and modern theme that is perfect for contrasting images, and colorful designs or imagery.

GridFolio, is a portfolio theme that includes a blog. Theme was based of Draggable Image Boxes Grid which I found on codrops site (by the way thanku so much Mary Lou for this tutorial).

The beautiful images in the demo are by my very talented friend Kasia Drąg aka. april182. Check out her amazing gallery on deviantArt >> april182.deviantart.com

At the beginning – theme preview.

So, let’s begin, I’ll try to explain what’s it all about:

1. Home Page

Home page contains three places, that can be set from option page.

  1. Big slogan
  2. Small headline
  3. Smallest text:)

Here You can also describe your big button and set link. Background is displayed 6 last photos from portfolio with cool blurry effect.

2. Portfolio Page

Here that we can see a grid effect. On this page we move with the “move cursor”. We can move grid in all directions, to enlarge the image just click on it. Once clicked, the thumbnail will expand to the full size image. Here we can slide images by arrows. To close the picture preview just click on the right top corner [ X ]

If you used a child category, on the bottom you find yellow bar from which to choose an interesting subcategory.

3. Blog Page

Blog page similarly as portfolio is based on the grid effect. To open box with post just click on the tile, box will expand to a fullscreen content area. In this page, you must use tag called „more” into your post at your desired „cut-off” point.

To go to the entry you can click “read more” In this page, on the right you find dynamic sidebar. You can place it there some widget.

4. Sample Page

You can see how different elements behave in this theme. Also, you can see sliding footer with dynamic sidebar (area for 3 widgets).

5. GridFolio option page

In the wordpress dashboard you will find GridFolio theme tab, there you can change:

GridFolio basic options

  • Logo
  • Favicon
  • RSS feed
  • Facebook link
  • Twitter link

Portfolio page options

  • Portfolio category
  • Exclude portfolio from blog
  • Subcategory navigation

Home slogan options

  • Slogan text
  • Small headline text
  • Small text
  • Button text
  • Button link

Home slider

  • Number of items in slider

6. Tips & Tricks

1. To correctly display vertical images you must, change a little your javascript and css file.
First, we change a little aspect ratio, just open your custom.js file located in gridfolio js folder and find something like this (below the line 408) and,

change this:

408
409
410
411
412
413
414
415
416
417
418
419
    if( r_w > r_i ) {
 
        new_h   = w_h;
        new_w   = w_h / r_i;
 
    }
    else {
 
        new_h   = w_w * r_i;
        new_w   = w_w;
 
    }

to this:

408
409
410
411
412
413
414
415
416
417
418
419
if( r_w < r_i ) {
 
        new_h   = w_h/1.6;
        new_w   = w_h / r_i/1.6;
 
    }
    else {
 
        new_h   = w_w * r_i/1.7;
        new_w   = w_w/1.7;
 
    }

Next, we need add background to the popup image, open your style.css located in your gridfolio folder and change (line 499)

change this:

499
500
501
502
503
504
.ib-preview{
    overflow: hidden;
    position: absolute;
    top: 40px;
    display: none;
}

to this:

499
500
501
502
503
504
505
.ib-preview{
    overflow: hidden;
    position: absolute;
    top: 40px;
    display: none;
    background:#000;
}

And that’s it!

2. How to add couple of portfolio pages with different set of images (different categories).

  • First we must create new Portfolio page template. Here you can download pre-edited file >> template-portfolio_1
  • In wordpress Dashboard go to Post >> Categories.
  • Add new category eg. photos (in our case, portfolio page 1)
  • Add new category eg. designs (in our case, portfolio page 2)
  • Now click on photos category (that you have added in step 3). In address bar in your browser you saw something like this:

    =category&tag_ID=5&post_type=post

    we will need the ID of this category (ID=5) So remember this number.

  • open Portfolio page template. Change name at the top:

    1
    2
    3
    4
    5
    <?php
    /*
    Template Name: Here past new template name
    */
    ?>

    Now paste category number, just replace this:

    21
    22
    <div class="ib-main">
    <?php $category = gf_get_category_id(get_option('gf_portfolio_category'));

    to this:

    21
    22
    <div class="ib-main">
    <?php $category = 5;

    repeat this same for another page template with another category number. eg.

    21
    22
    <div class="ib-main">
    <?php $category = 24;

    Save this file and upload on the server into gridfolio directory, if you create another template you must also change file name. like
    template-portfolio_1.php
    template-portfolio_2.php
    …etc.

  • Now add new page eg. Portfolio 1, 2, …etc. and select page template which you previously created eg.

    1
    2
    3
    4
    5
    <?php
    /*
    Template Name: Photos
    */
    ?>
  • Now add new post, select a category (eg. photos)
  • This same repeat with another cateory and page template.

6.1. How to upgrade to Gridfolio v 1.2.2

Before I release new version of gridfolio 2.0 i added new cool feature to gridfolio 1.2
(not included in demo!) so if you want add some descriptions to your pic in portfolio page, just upgrade your theme to 1.2.2.

First a few screenshots:

How to upgrade to Gridfolio v 1.2.2 :
Download This File: gridfolio_update_to_1.2.2

1.Copy template-portfolio.php file into „GridFolio” main folder.
2.Copy custom.js file into „js” folder.
3.Copy reverse.png image into your „images” folder
4.Now copy these few lines into your style.css (replace old .ib-preview-descr class with what you see below – line 503)

503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
.ib-preview-descr{
    background:#000 url(images/reverse.png) no-repeat top right;
    opacity:1.0;
    font-family: 'GreyscaleBasicRegular',Arial,Helvetica,sans-serif;
    position: absolute;
    bottom: 70px;
    left: 60px;
    z-index: 999;
    font-size: 50px;
    padding: 15px 20px 20px 20px;
    text-shadow: 0px 0px 1px rgba(255,255,255,0.9), 1px 2px 5px rgba(0,0,0,0.8);
      -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.ib-preview-descr:hover{
    background:#fff url(images/reverse.png) no-repeat top right;
    opacity:0.2;
    font-family: 'GreyscaleBasicRegular',Arial,Helvetica,sans-serif;
    position: absolute;
    bottom: 70px;
    left: 60px;
    z-index: 999;
    font-size: 50px;
    padding: 15px 20px 20px 20px;
    text-shadow: #000 0 0 4px;
    color:transparent;
    box-shadow: 0px 0px 10px #fff;
}
.ib-preview-descr .ib-preview-caption{
     line-height:16px;
     font-family: Arial,Helvetica,sans-serif;
     left: 35px;
     font-size: 12px;
     margin-top:10px;
     text-shadow: 0px 0px 1px rgba(255,255,255,0.9), 1px 2px 5px rgba(0,0,0,0.8);
     width:600px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
}
.ib-preview-descr .ib-preview-caption:hover{
     line-height:16px;
     font-family: Arial,Helvetica,sans-serif;
     left: 35px;
     font-size: 12px;
     margin-top:10px;
     opacity:0.4;
     width:600px;
     text-shadow: #000 0 0 4px;
     color:transparent;
}
.ib-preview-descr .ib-preview-caption img{
    padding:5px;
    position:relative;
}

And That’s it!

7. Changelog

Update to ver. 1.1 – Minor bugs fixed.
Update to ver. 1.2 – Full Content area scrolling fixed, add video’s support inside content area, minor bugs fixed.
Update to ver. 1.2.2 – Added content area in Portfolio page.

8. Demo & Download

And that’s it! I hope you will enjoyed with this theme:)
If you find any bugs please let me know;)
View demoDownload


Komentarze (82)

  1. IvoS

    Hallo,
    i’m probably stupid… i’m a novice in word press, and i have the same problem like stefan: I managed to install worpress + your theme on my site and followed everything in the readme.txt. Meanwhile, the front page show „loading” without ever going further. I’ve tried everything and I cannot understand what I am doing wrong…
    can you send login and password to my site for you help?
    THX

    Odpowiedz
  2. directory

    Hello, I found your post comments while searching Google. I appreciate your effort and the quality of the information you provide. Very relevant especially as this is not an issue which a lot of peaople are conversant with, I like to see more post linke this Keep up the good work.. Kind Regards form John http://royallinkup.wordpress.com/

    Odpowiedz
  3. web design

    Hi there, Nice submit. There is a challenge with your website with world wide web explorer, may analyze this? For instance is still the industry fundamental plus a superior aspect of other people is going to omit your current superb crafting because of this issue.

    Odpowiedz
  4. Pierre

    Hi Krzyho, after one year I decide to play an tweak again with your amazing theme here.
    I managed to add several portfolio pages by creating new templates and I am still exploring all the possibilities that you put in place. But so far, I have two questions:
    1 – How to prevent all portfolio pages to appear in the blog page ?
    2 – How to replace the big picture of a post by a video?

    All the best
    Pierre

    Odpowiedz
  5. download minecrat free

    Wonderful overcome! I would like to newbie simultaneously when you amend your site, the way can we sign up for a web site? Your account helped me a useful deal. My partner and i ended up small amount comfortable of this ones over the air provided excellent distinct strategy

    Odpowiedz
  6. Minecraft Free Download

    Magnificent overcom! I’m going to trainee concurrently while you modify your web blog, exactly how may possibly my spouse and i register for any blog web page? The bill made it simpler for me a suitable bargain. I’ve been small amount knowledgeable in this your transmitted given intense transparent plan

    Odpowiedz
  7. luchid

    Hi, this is a great template and it helps a lot, especially when you are a beginner. I have a question, though. I want to implement into WordPress a theme based on a simillar tutorial from codrops http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/. My issue is that the JavaScript is not working at all in WordPress though I included it into my header.php.
    I have poor experience in coding so any advice will be appreciated. Thank you very much!

    Odpowiedz
  8. Alessio

    Hi!
    It ‚a great template!
    … but I can not display the page blog correctly.

    I can not find the model template dedicated to the blog page.

    can you help me?
    thanks!

    Odpowiedz
  9. Trisha

    There really are unlimited trick photography ideas out there if you open your eyes and take in the things
    around you. ” This does not mean an explicit heat in the image, but instead that some areas may be blown out in the final image or are just simply too bright for their specific purpose. Photographers from all over the earth – from Europe to Australia – who are part of a studio or unbiased practitioners have ventured in to the subject of wedding photography.

    Odpowiedz
  10. Acc

    Hi Krzyho,

    Good job with converting the draggable images boxes grid to wordpress.
    I’ve noticed that on an iPad 3 and iPhone 4GS with latest ios, viewing your demo site in Google Chrome and the clicking on portfolio items portfolio page does not work. It works on Safari on the devices.
    What do you think would be causing this?

    Odpowiedz
  11. Jake

    Also, sorry for all the questions, but how would I disable the automatic resizing? I want to have a large picture as the backgroud but it automatically resizes it. My wp version is 3.5.1

    Thanks so much!

    Odpowiedz
  12. Jake

    Okay, I discovered my problem! I didnt have the portfolio page set as „portfolio template” haha.

    My only other question: is there a way to have a „back to the grid” button from when you are viewing the pictures?

    Thanks

    Odpowiedz
  13. Jake

    Hi, I can’t seem to get the large or small photos to work, I double checked the file paths and I am stumped on what I need to do.. Any ideas? thanks

    Odpowiedz
  14. Jake

    Hi! I love your theme! I am having some trouble getting it to work though, it says the theme is broken, mission stylesheet.. but I see the stylesheet right there in the folder. Any ideas?

    Odpowiedz
  15. Krzyho

    Hi Pierre, i sorry that you must wait, now i am very busy, please send me a email with your question. I will try help. Thank you.

    Odpowiedz
  16. Pierre

    Hi Krzyho,
    what could I tweak it to show the picture thumbs on the blog page as it appears on the portfolio page?
    should it be a new blog template?

    thanks.
    P.

    Odpowiedz
  17. Krzyho

    hmm…that’s strange…can you send me your header.php (hacked) file? maybe you have some viruses on your server? Try to contact in your hosting provider, honestly i never met with this code:/

    Odpowiedz
  18. Toni

    I found the hacked text in the header.php file in Gridfolio theme directory. I have removed. Any pointers where I should look to find the hackers entry point?

    Odpowiedz
  19. Toni

    Site using GridFolio has been hacked. Do you have any suggestions where I should look to find the hacked file? When I look at view source hacked Code is showing up in

    function xtrackPageview(){var a=0,m,v,t

    Would appreciate any help to fix this ….
    Thanks

    Odpowiedz
  20. Pierre

    Hi, great version really !
    What would be the way to replace the large pictures in the grid portfolio by videos ?

    Thanks
    P.

    Odpowiedz
  21. Eugenia

    Link exchange is nothing else however it is simply placing the other person’s website link on your page at proper place and other person will also do similar in support of you.

    Eugenia

    Odpowiedz
  22. Nicolas

    Krzyho!

    I’m applying your wonderful theme in a website of an artistic proyect, were in the description area i want to place pictures of the process of creation.

    I need your help to make work a lightbox plugin with the pictures in the description area. I’ve tried a lot of lightbox plugins, but i can’t find why it’s not working.

    Millions of thanks for this amazing theme, and for any help or indications you can give to me!

    Odpowiedz
    • Krzyho

      hmmm….i think somewhere is conflict in javascript, try add some script manually. I try to explain how to do it:
      First we need some script;)…ok, we use fancybox2,
      downloada this file: Gridfolio_fancybox
      add these files to your gridfolio directory:
      jquery.fancybox.css >> to main gridfolio folder
      jquery.fancybox.js >> to „js” folder.
      images >> to images directory

      Now in your header.php add these 2 line: above this script:

      21
      22
      23
      24
      25
      26
      <script id="previewTmpl" type="text/x-jquery-tmpl">
                  <div id="ib-img-preview" class="ib-preview">
      .
      .
      .
      .

      Paste this to your header.php:

      21
      22
      <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/jquery.fancybox.css?v=2.1.0" type="text/css" media="screen" />
      <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.fancybox.js?v=2.1.0"></script>

      and this:

      21
      22
      23
      24
      25
      <script type="text/javascript">
      $(document).ready(function() {
          $('.fancybox').fancybox();
      });
      </script>

      Now add some images via wordpress and add class „fancybox” to image something like this:

      21
      <a class="fancybox" href=................................/ rel="nofollow"></a>

      I think that should help.
      sorry, now i don’t have time to search where is bug in theme, but when i find some time i will try to fix it.

      Odpowiedz
  23. Marco

    Hello from Portugal,
    i was also inspired by the theme from Codrops and am trying to migrate my old site content to a new site based on this. Last week i stumbled upon this issue: in the photo page i can’t seem to make a link work. For example, imagine you have a subtitle in the photo page (under „Going for gold” in your Gridfolio theme), which is a link. I’m using for the boxes and for this subtitle. I tried also with divs and the link did not work did not work.

    Can you help me with this? Thanks in advance.

    Odpowiedz
          • Krzyho

            you must change a little the javascript function, try to change this code:
            replace this:

            21
            22
            23
            24
            25
            26
            27
            28
            29
            // opens one image item (fullscreen)
                                        loadImgPreview              = function( $item, callback ) {
                                           
                                            var largeSrc        = $item.children('img').data('largesrc'),
                                                description     = $item.children('span').text(),
                                                largeImageData  = {
                                                    src         : largeSrc,
                                                    description : description
                                                };

            to this:

            21
            22
            23
            24
            25
            26
            27
            28
            29
            // opens one image item (fullscreen)
                                        loadImgPreview              = function( $item, callback ) {
                                           
                                            var largeSrc        = $item.children('img').data('largesrc'),
                                                description     = $item.children('span').html(),
                                                largeImageData  = {
                                                    src         : largeSrc,
                                                    description : description
                                                };

            let me know if this works.

          • Marco

            Hey Krzyho, tks for the response. Just got back
            from vacations, i tried what you said and did
            not work. Changed related code in all script. Just
            can’t seem to make this work.

          • Krzyho

            sorry, I’m afraid that without deep coding java script and php files there’s no way to change this behavior, but i working on a new version of this template,
            so I will try consider your request, and implement this on gridfolio 2.

  24. stefan

    Yes, everything works perfect, I’ve managed to create different galleries and I thank you for that.
    There is one more thing I cannot manage to do: when I click on an image or a blog post… I would like to see a normal blank page where I can write whatever I want. not a blog post (a page with „blog” structure) or a full screen image, but a fully customisable page. I would like to put a map or some text. Is that possible or I want more than I can get?
    regards,
    stefan

    Odpowiedz
    • Krzyho

      I don’t know whether well I understood you, but after you
      click on image or blog post tile, you want go to blank customizable
      page?

      Odpowiedz
      • stefan

        yes! practicly, I want to click on a image or a square
        with text and open a blank page where I can put whatever
        I want… more exactly an with a 360 panorama!
        regards,
        stefan

        Odpowiedz
  25. stefan

    thank you for the answer. I managed to get thing working, everything is perfect now!
    I would have one more question though. I would like to have separate galleries… like gallery1, gallery2, etc, eack one with a different set of images… would that be possible? In the current version of the theme, if I add a new page, I must give it the grid-portofolio template, so it will finaly contain the same images as the other pages sharing this template.
    Best regards,
    Stefan

    Odpowiedz
  26. stefan

    Hello and thank your for this theme, it is awesome. I was searching for a quick and easy way to make a photo gallery for some time now, so finding your work was a big + for me.
    As I am a wordpress noob i would have some questions… hope you have the time to asnwer them. I managed to install worpress + your theme on my site and followed everything in the readme.txt. Meanwhile, the front page show „loading” without ever going further. I’ve tried everything and I cannot understand what I am doing wrong… Would it be possible to send you some screenshots of the wordpress interface?
    On the other hand, I cannot find the way to ad images to the „portofolio” page. I managed to add some post to the blog part… but cannot find the method to do this for the portofolio. Any idea?

    Thank you and best regards,
    Stefan

    Odpowiedz
    • Krzyho

      Thanks! as I wrote above, check your set up your GridFolio option page (i think the problem is in your portfolio categories) or in posts, check your path to large image URL.
      If you want more help send me your username and password, i’ll
      check where the problem is.

      Odpowiedz
  27. GMR

    Thank you very much for your amazing work, theme is amazing,
    but I do all the steps for the new updates but I don’t get the shown result like the preview images.

    any way thank you very very much!.

    Odpowiedz
  28. Alex

    Hi, I just installed the theme (wich looks great) but I’m having trouble using the home page.

    I created a page as indicated in the „readme”, but when I access the site it shows a never-ending „Loading…”

    What can be wrong?

    Thanks a lot. (The site is http://www.randm.mx )

    Odpowiedz
    • Krzyho

      Thanks, I do not know exactly where the problem is, but you
      must check your set up your GridFolio option page (i think the problem is in your portfolio categories) or in posts, check your path to large image URL.
      If you want more help send me your username and password, i’ll
      check where the problem is.

      Odpowiedz
  29. quiet0ne

    Hi there! I’m using a hybrid between your build and the original framework from Codrops. I’m trying to work out how to include “deep linking” similar to swfaddress/hashchange, where an external link can go directly to the page and load that particular box. I’ve worked out a way to give each box its own #hash, but I can’t work out the linking part! Any clues or pointers would be AWESOME, please! Or if/when I work it out I’ll post back too. Thank you for this wonderful theme!~

    Odpowiedz
  30. Frank

    Hi, great theme! I was wondering if there is a way of having the thumbnails in the portfolio trigger the post content to display (instead of the large image) of select posts? If I leave the Large Image URL field empty in a post, clicking the corresponding thumbnail link in the portfolio shows the progress animation but does not load the post content. I guess this would be like combing the portfolio and the blog elements together like what is seen with the Draggable Image Boxes Grid demo. Best regards!

    Odpowiedz
    • Krzyho

      Thank you! yes, it is possible, but you need to change a little php code in portfolio page template, when I find some time, I post the solution.
      Best.

      Odpowiedz
      • Alex

        That would be great. I hope you can make a little guide of use, I’m trying to do something like that. The thing is that I want to use the theme not only as a portfolio site. I would want to showcase some work I do, but if some click the thumbtail there’s info about it and not only a big picture. Also, is it possible to have usable links in this moment (without clicking the read more)

        Thanks! :)

        Odpowiedz
          • Alex

            I was guessing if it is possible to „mix” portfolio and blog.

            It’s like if we see a grid of pictures, and when click it, you see the post with text, links, etc.

            :)

  31. Artist of Design

    Spectacular Theme! Thank you for your wonderful work! I love this theme. It’s perfect for my needs to display my artwork. Easy to install. Tweaking the css to change the colors was painless.
    Thank you Chris for taking the time to help customize my site to my specific needs further too….very impressive! html5 and css3 is so awesome! I hope you offer this tweaked version of this theme as well!

    Odpowiedz
  32. Angelo

    SALVE HO VISTO IL TEMA E DEVO DIRE CHE E’ FANTASTICO,SI POTREBBE CORTESEMENTE AVERE UNA GUIDA DETTAGLIATA SU COME FARE FUNZIONARE IL TUTTO ,QUALE TEMPLATE DEVE ESSERE MODIFICATO E COME GRAZIE ANTICIPATAMENTE,SALUTI.

    Odpowiedz
  33. George

    I’m trying to work out how to force the background pictures on the homepage to change every few days…? At the moment, the default six images are always the same and I’d like them to change every once in a while.

    If you can give me an idea as to how to get them to alternate (i.e. a different six images every week, for example), that would be great.

    Odpowiedz
    • Krzyho

      hmm, I think that change pictures every few days, is impossible in php,
      but you can try replace this code in your „Home Page Template” (27 line):

      change this:

      27
      $wp_query->query('showposts='.$ppp.'&cat='.$category.'&paged='.$paged);

      to this:

      27
      $wp_query->query('showposts='.$ppp.'&cat='.$category.'&paged='.$paged.'&orderby=rand');

      then after each entry on the home page, the six images will be always random.

      Odpowiedz
  34. George

    At last a theme that is great for both photography and writing!

    Great theme!! Absolutely brilliant. A few little niggles here and there, but for a free theme, this is excellent.

    Thank you!

    Am just getting it online on my site in the next couple of hours.

    Odpowiedz

m4s0n501