1. Home Page
- Big slogan
- Small headline
- Smallest text:)
2. Portfolio Page
3. Blog Page
4. Sample Page
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: [cc lang=”bash” escaped=”true” first_line=”408″ width=”auto” theme=”blackboard” noborder=”1″] 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; }[/cc] to this: [cc lang=”bash” escaped=”true” first_line=”408″ width=”auto” theme=”blackboard” noborder=”1″]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; }[/cc] Next, we need add background to the popup image, open your style.css located in your gridfolio folder and change (line 499) change this: [cc lang=”bash” escaped=”true” first_line=”499″ width=”auto” theme=”blackboard” noborder=”1″].ib-preview{ overflow: hidden; position: absolute; top: 40px; display: none; }[/cc] to this: [cc lang=”bash” escaped=”true” first_line=”499″ width=”auto” theme=”blackboard” noborder=”1″].ib-preview{ overflow: hidden; position: absolute; top: 40px; display: none; background:#000; }[/cc] 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:
[cc lang=”bash” escaped=”true” first_line=”1″ width=”auto” theme=”blackboard” noborder=”1″][/cc]Now paste category number, just replace this:
[cc lang=”bash” escaped=”true” first_line=”21″ width=”auto” theme=”blackboard” noborder=”1″]
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. [cc lang=”bash” escaped=”true” first_line=”1″ width=”auto” theme=”blackboard” noborder=”1″][/cc]
- 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)
[cc lang=”bash” escaped=”true” first_line=”503″ width=”auto” theme=”blackboard” noborder=”1″].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;
}
[/cc]
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 demoDownload82 Comments
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
Hi, great version really !
What would be the way to replace the large pictures in the grid portfolio by videos ?
Thanks
P.
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
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?
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:/
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.
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.
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?
Thank you:) …hmmm…strange, what’s your version of wordpress?
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
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
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!
Just kidding I figured it out! haha. There is an X to close it out 🙂
i can insert video on portafolio please helpme
vimeo or youtube ,,,
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?
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.
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!
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 https://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!
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
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
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
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.
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 https://royallinkup.wordpress.com/
Did you have the portfolio style just in a plugin
-
sorry only in theme
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
-
Hi Ivo, no problem, send me via email your login and password.
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.
Thanks and no problem, have fun!
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.
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:
[cc lang=”bash” escaped=”true” first_line=”27″ width=”455″ theme=”blackboard” noborder=”1″]$wp_query->query(’showposts=’.$ppp.’&cat=’.$category.’&paged=’.$paged);[/cc]
to this:
[cc lang=”bash” escaped=”true” first_line=”27″ width=”455″ theme=”blackboard” noborder=”1″]$wp_query->query(’showposts=’.$ppp.’&cat=’.$category.’&paged=’.$paged.’&orderby=rand’);[/cc]
then after each entry on the home page, the six images will be always random.
Great, thank you. I’ll give that a try.
Najlepszy theme jaki kiedykolwiek chciałem zainstalować.
Mam czym się teraz bawić, kompletnie spełnia moje oczekiwania
hehe, dzięki 😉
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.
tutto è scritto sopra 😉
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!
Thank you so much Andre! I really appreciate it!
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!
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.
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! 🙂
as far as your first question which thumbnail / info you mean? in portfolio page or blog page (in your site) ?
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.
🙂
yes i’m working on it so please be patient;)
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!~
We worked out a solution using jquery swfaddress. Thank you!
thanks for your solution for this, I’m sorry but I had no time to check it out
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 )
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.
Thank you very much, I just made some adjustments to the categories and is working now. I will keep building the site, if any problem comes, I’ll be in touch.
Thanks again. 😉
No problem, let me know if you’ll need some help 🙂
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!.
thanks! hmm…i think, you forgot add a dot ” . ” in span class in your css file .ib-preview-descr just add dot before „ib-preview-descr” 🙂
Thank you very much, yes it’s work now, thank you again 🙂 😀
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
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.
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
yes, it is possible, when I find some time i added solution above
in the tips & tricks
Thank you! I’m looking forward to your update!
a very big Thank You for your update!
no problem, let me know if this tips works
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
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?
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
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.
…using _article_ for the boxes and _ul_ for this subtitle…
did you try to install upgrade to Gridfolio v 1.2.2
(not included in demo)? i think this tip may you help.
I’m not using Gridfolio. I’m creating a site from scratch based on the theme from Codrops.
you must change a little the javascript function, try to change this code:
replace this:
[cc lang=”bash” escaped=”true” first_line=”21″ width=”455″ theme=”blackboard” noborder=”1″]// 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
};[/cc]
to this:
[cc lang=”bash” escaped=”true” first_line=”21″ width=”455″ theme=”blackboard” noborder=”1″]// 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
}; [/cc]
let me know if this works.
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.
…give me link to your site.
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.
Hi kryzho. how if i want one of the image not linking to any Large image.. can u help me with this one? thx b4
BASTARD
you’re welcome:)
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!
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:
[cc lang=”bash” escaped=”true” first_line=”21″ width=”455″ theme=”blackboard” noborder=”1″][/cc]
and this:
[cc lang="bash" escaped="true" first_line="21" width="455" theme="blackboard" noborder="1"]
[/cc]
Now add some images via wordpress and add class "fancybox" to image something like this:
[cc lang="bash" escaped="true" first_line="21" width="455" theme="blackboard" noborder="1"]
[/cc]
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.