[bekranParticipant]

Hi,

I don’t know how to explain my problem. I’ll try. I’m setting my homepage as a portfolio page. One of the items is a gallery and I set two photos to be shown as thumbnails. One of them is vertical photo and the other one is horizontal. The problem is, when I change the photos of the thumbnails by clicking the arrow, the link to the portfolio item becomes unclickable. When I switch to the bigger size photo, the link comes back.

Another problem is also, when I set the horizontal photo to be shown first, then the vertical one. The vertical one extends the item box down into the next portfolio item and it just looks messy. I’m planning to set many more gallery items on this page so please help me how to fix the issue.

Here is my website. You can see the problem on “Gaudi’s Masterpiece” item.

http://www.worldisenough.com

Thanks in advance.

P.S.: By the way, I have the latest updates for X theme and WordPress.

[NicoModerator]

Hi There,

Thanks for writing in.

Would you mind sharing us your admin credentials first so we could check you setup closer.

Don’t forget to set it as private reply.

Thanks.

[bekranParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

.page-template-template-layout-portfolio ul.x-slides, .x-flexslider .x-slides .x-slide {
    height: 180px;
    overflow: hidden;
}

Hope it helps.

[bekranParticipant]

Thanks for the help. Yes, that helps by cropping images to the same size so that the box doesn’t have to move. But what I want is to keep the images the way they are, without being cropped. Is that possible?

Also I realized that the above code also applies for the full-size images inside portfolio post. And the arrows on top seem to be not working.

[Nabeel AModerator]

Hi again,

Try adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$('.flex-direction-nav li a').click(function(){
		$('.x-iso-container').isotope( 'reloadItems' ).isotope();
	});
});

Let us know how this goes!

[bekranParticipant]

I did, and nothing changed I’m afraid. I can use the cropping method as long as it doesn’t affect the full size image in the page. Is there way to set them apart and use this code only for portfolio page thumbnails?

.page-template-template-layout-portfolio ul.x-slides, .x-flexslider .x-slides .x-slide {
    height: 180px;
    overflow: hidden;
}

[Paul RModerator]

Hi,

In that case, you can change the code to this.

.page-template-template-layout-portfolio ul.x-slides {
    height: 180px;
    overflow: hidden;
}

Hope that helps.

[bekranParticipant]

Ok, that sets the thumbnail rules apart from the full-sized images inside posts. Thanks. But the problem here is, the thumbnail image is cropped at 180px but the whole box seems to be set according the size of the original thumbnail size (400px) plus title. Thus with this code, white box below the thumbnail looks much wider. If I set the height to 400px to fit the image in there, then it applies it to all the other gallery portfolio items as well. And those other post links become unclickable.

Maybe I can solve that by applying this code to individual portfolio item thumbnails. Can you please write how to do that?

Or I’d appreciate if you have other suggestions. This whole thing seems like a bug to me. It would be great if you released a permanent fix in your next theme updates.

Thanks in advance

[bekranParticipant]

Ok I found out how to apply the code to individual portfolio items and added x-flexslider to the code to adjust the box to a smaller size image. It also worked with the portfolio pages, where the meta data was not clickable after switching to a smaller size image. This is the code that did it.

.single-x-portfolio.postid-246 .page-template-template-layout-portfolio ul.x-slides, .x-flexslider {
    height: 400px;
    overflow: hidden;
}

Everything looks normal with thumbnails in the main page now 🙂

Like I wrote before, it could be great if you released a permanent fix in your upcoming updates about this.

Thanks for your assistance

[DarshanaModerator]

Glad you were able to resolve it 🙂

[bekranParticipant]

Thank you 🙂

One last question. Is it possible to make postfolio gallery thumbnails linking to its post just like the normal image thumbnails?

[RupokMember]

Hi there,

Thanks for updating. It would be possible by modifying the portfolio page template through Child Theme. I’d suggest you to keep as is if it’s not really necessary.

Cheers!

[bekranParticipant]

Ok then, I will keep it. Thanks anyway 🙂

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts