[CompleksParticipant]

This portfolio setup is really confusing me.
I’d like to start from scratch, because my previous questions and attempts have not worked for me.

This is my site
http://www.drawingstrangers.com
I am using a child theme for integrity light.

I want to add a portfolio page to the header menu (though it will be labelled as “gallery”).

1 – In my dashboard, am I supposed to build my portfolio (gallery) under the “pages” tab.?
Do I “add new” then set “page attributes” – “template: layout – portfolio” .?

Now what…?

2 – How does this relate or link to the “portfolio” tab in the sidebar of the wordpress dashboard.?
Am I supposed to go through this “portfolio” tab and “add new item” for each individual photo I want featured in my portfolio.?

(sorry, this is probably ridiculously simple, but I just can’t get my head around any of this)

If you have a look at my site you will see that it is a simple blog, each post featuring a drawing and a story about the subject.

I need a gallery page so that visitors can quickly browse through just the photos (from each blog post) in a condensed grid layout (3 or 4 columns and as many rows as required. This will grow over time obviously).
Then I would like each image to link to the corresponding blog post (using the blog posts permalink and opening the page in a new window)

I really like this renew demo portfolio
http://theme.co/x/demo/renew/1/portfolio/
(especially the scroll in text when hovering the mouse over the image. This would be great for my site)

3 – Can I apply this style gallery to my site which is running the integrity light child theme?

BUT – I want the gallery layout to be uniform/symmetrical. Meaning that the thumbnails need to be the same shape/size (preferably square-ish). However, my photos are not all the same shape or size. Some are landscape and some are portfolio orientation.

4 – Can I manipulate the thumbnail to show a cropped area of each drawing so that everything lines up evenly in a nice clean grid.?

I like the clean and uniform layout of this ethos demo portfolio:
http://theme.co/x/demo/ethos/1/portfolio/
However I do not like the titles and much prefer the scrolling text from the above renew portfolio demo.

Sorry for the epic rant, but I can’t figure this out on my own.
I hope I have explained myself well enough so that you have a good idea of what I am trying to build.

Can you please let me know if this is possible and how I should go about achieving the look and function that I’m after.?

Many thank for the continuous support during my setup.
This should be the last major change to my site for a while now.

Regards.

[ChristopherModerator]

Hi there,

#1 Exactly.

#2 Yes, Each item you create will be display in portfolio index page with its featured image.
We do not support mixing stacks, It could be possible technically but would be outside our scope of support.

#3 & #4 Yes we can provide you with custom code to display them in same size, You can provide us with exact URL when you set up portfolio page.
To create gallery follow : https://theme.co/x/member/kb/how-to-setup-galleries/.

Hope it helps.

[Peter MParticipant]

This reply has been marked as private.

[Peter MParticipant]

I played around a little and managed to get a responsive lightbox onto the page instead of a gallery. Way too complicated a procedure, but anyway, it is what it is.

But the images display at their full size and I’d like them to be smaller on the page. Then when they’re clicked the lightbox opens to a larger/full size. How can I do this?

Thanks.

[LelyModerator]

Hello Peter,

For the images to be smaller on the page and to display four per row, please add the following code in your Customizer via Appearance > Customize > Custom > CSS:

.single-x-portfolio .x-block-grid.two-up>li {
   width: 25%;
}

This is what I saw when I click the images.I find it not too large nor small. How small do you want it?

Hope this helps.
Thanks.

[Peter MParticipant]

Hey, I was actually adding another reply when I got yours. That looks interesting.

But I had looked around the forum and the knowledge area for quite a while and finally found the block grid item shortcode and tried that with the lightbox shortcode. I really like it. If you view the same page again you’ll see it.

I added a text element but it seems I can move it up above the block grids, so my text appears below the images, which I don’t want. How can I move the text above the photos?

Thanks.

[Peter MParticipant]

Also, I thought a responsive lightbox would shift the images so they would stack vertically on a phone, but they don’t – the thumbs just get smaller within the columns. And when viewed on the phone, they’re just too small.

Is there a way to have them stack vertically on phones instead of simply shrinking them down in the columns so the thumbs are tiny?

Thanks.

[ChristopherModerator]

Hi there,

This is default behavior of block grid shortcode, blocks get shrink as you resize window. If you wish images stack on top of each other on smaller resolution please use image shortcode inside columns.

Hope it helps.

[Peter MParticipant]

This reply has been marked as private.

[Peter MParticipant]

Question for you: with the portfolio page demos, they all have a “launch” link that just goes to the theme purchase page. Do you have any examples of gallery pages or other actual content pages those would typically link to?

And is it better to put a gallery on a standard page rather than a portfolio item page, and link the launch button to that? Rather than trying to put a gallery on the portfolio item page?

Thanks.

[ZeshanMember]

Hi Peter,

#1: For the galleries, you can review our KB article on galleries. However, the default styling of the gallery items might be different than what you currently have. You’ll need to use additional CSS to overwrite the styling. But regretfully, it will fall outside the scope of support we can offer you.

To open items from gallery in a lightbox, you can use [lightbox] shortcode with .gallery-icon a as the selector.

[lightbox selector=".gallery-icon a"]

#2: This is a project link, you can insert your own link under Portfolio Item Settings > Project Link (see: http://prntscr.com/6wf6bx).

#3: It’s all your preference. If you wish to use a separate page for gallery, you can create an static page and link your portfolio item to that.

Thanks!

[Peter MParticipant]

Ya, I don’t really like the styling on the standard wp gallery that gets used with the gallery method.

So are there any issues or drawbacks with the way I’ve done it, using image shortcodes and a responsive gallery? Seems to work fine all around, including on mobile. But I don’t want to find out later that there’s some issues with it, y’know?

Btw, is it possible to enable nav arrows on the lightbox?

Thanks again.

[ZeshanMember]

Hi there,

#1: No, your current layout is correct. Using images in multiple columns is totally fine.

#2: No, arrows cannot be enabled in the lightbox. It uses next and previous images as nav arrows (see: http://prntscr.com/6win7l).

Thanks!

[Peter MParticipant]

Ok, that’s great. Too bad about the arrows, but I can live with that.

Also, I was wondering if there’s a way to get rid of the thick line at the bottom of my portfolio items now that I’m not using the Launch button. I’m just going to add my own button to my appropriate portfolio items, and the photography ones don’t require one.

Thanks.

[ChristopherModerator]

Hi there,

Please add this :

.single-x-portfolio .entry-extra a.x-btn.x-btn-block {
  display: none;
}

thanks.

[Author]

Posts