Creating full width photo grid portfolio
Hello,
I'm trying to make a grid gallery on my website. The idea is to make a gallery under the header so it would be 3 or 4 pictures wide filling whole page width, and picture could be made bigger by pressing on it without going to another page. What I've managed to do is http://nce11.me/photo-life/ but it is not full width and I couldn't find a way to adjust the way pop-up window looks like. I also tried to use some demo material http://nce11.me/photos/ so I got there what I want in terms of page fulfillment, but every picture there is a link to another page. I also want to be able to arrange photos easily, without having a new post for every photo. Thanks.
I'm trying to make a grid gallery on my website. The idea is to make a gallery under the header so it would be 3 or 4 pictures wide filling whole page width, and picture could be made bigger by pressing on it without going to another page. What I've managed to do is http://nce11.me/photo-life/ but it is not full width and I couldn't find a way to adjust the way pop-up window looks like. I also tried to use some demo material http://nce11.me/photos/ so I got there what I want in terms of page fulfillment, but every picture there is a link to another page. I also want to be able to arrange photos easily, without having a new post for every photo. Thanks.
Comments
the 2nd solution is the most proper one and this is the way how you supposed to create such section. However, if you don't want a link to individual pages on those items, you need to use the following css:
.portfolio_grid .image_frame .image_wrapper .image_links a.link { display: none !important; }And because it's portfolio, you can not add images other way than just creating new item for each photo. Of course you can try to use WordPress gallery instead but we can not guarantee that this would work as you need it..portfolio_grid .image_frame .image_wrapper .image_links.double a { width: 100% !important; }
.portfolio_grid .image_frame .image_wrapper .image_links.double { margin-left: 0 !important; width: 60px !important; }