-
Posts
-
I’m using galleries on a bunch of pages, and I want the thumbnails below the featured images to be horizontal instead of square or vertical. How do I do this?
Hey!
If you’re usinf the default gallery shortcode you can select a different thumbnail size: http://codex.wordpress.org/Gallery_Shortcode
[gallery size="medium"]Supported sizes are:
medium
large
full
fullsize
featured
portfolio
portfolio_small
dynamic_3
dynamic_2
dynamic_1
If you’re using the layout builder you can select different thumbnail sizes from the dropdown and you can set the number of thumbnail columns:
Best regards,
Peter
Hi Dude,
I’m not sure what is happening. I’m using the advanced layout editor with a 1/4 column, 1/2 column and 1/4 column layout. In the 1/2 column, I’m inserting a gallery from Media Elements. I’m choosing the Big Image With Thumbnails Below option, with No Scaling and 5 columns of thumbnails. For some reason, all the thumbnails below the big image are vertical rather than square or horizontal. And the thumbnails are cropping off the edges of the images, which are horizontal images. (I’m using the gallery to show book pages. The cover is vertical, but the interior pages are horizontal.) I would like to display the thumbnails without any cropping, and I would like the thumbnails to be horizontal rather than vertical. Here’s a link to one of the gallery pages:
http://desertspringspublishing.com/custom-books/la-quinta/
Please let me know what I can do to fix this. I’m somewhat of a newbie, so detailed instructions would be invaluable.
Thanks, Dude.
Hi,
You can add this on your custom.css or Quick CSS to make the thumbnails square.
#top div .avia-gallery img {
width: 100%;
height: 100%;
}
.avia-gallery-thumb a {
width: 20%;
height: 97px;
}Regards,
Ismael
Hi Ismael,
Thanks for getting back to me. I put that code in the custom css, and it made all the thumbnails square. However, when you hover over the thumbnail, the larger featured image above is squished. I’ll give you a link to see what I mean.
http://desertspringspublishing.com/self-publishing/entertaining-your-way/
What I would like to do is have the thumbnails horizontal, and the images proportional.
Any help would be greatly appreciated.
Thanks, Ismael.
Not having any success yet. To reiterate, I want to make the thumbnail boxes horizontal below the featured image, without cropping the thumbnails.
http://desertspringspublishing.com/self-publishing/entertaining-your-way/
Please reply.
Hi,
Your images are not of the same size. The initial image of the lady with wine glass is 468×608 (original 515×651) but then when i put my mouse over the next image, it is 468×322 (original size 947×651)
Your images are of completely different size and aspect ratio, so the only way to make them proportional is via cropping or preferably you can prep the images prior to uploading them so this way you ensure you control the crop, or otherwise you will have to trust WordPress’ cropping talents.
You should first install the Simple Image Sizes plugin ( http://wordpress.org/extend/plugins/simple-image-sizes/ ). The plugin will give you complete control over images: setting constraints for specific locations like blog, thumbnails, portfolio, gallery, shop, etc. along with the ability to set whether to crop an image or not in Settings > Media.
Changing the dimensions of images does NOT automatically change all the images already uploaded but only affects new uploads. To change the sizes of images already uploaded, you will need to use the Regenerator – also a part of the Simple Image Sizes and found on the bottom of Settings > Media. Don’t forget that images scale down, so always upload images bigger (or the same) as the constraints you set in Settings > Media (with the plugin) or you will get blurry (stretched) or incomplete images.
You should add the code below to your Quick CSS or /css/custom.css file. this will just force all images to be same size as they are (initial image will be smaller so there is no empty space below some images.
#top div .avia-gallery .avia-gallery-big {
width: 468px;
height: 322px !important;
}Thanks,
Nickn
Thanks for the detailed reply. I’m going to look at trying to make all the images the same size to resolve the problem. I’ll let you know what happens.
- The topic ‘How to make horizontal thumbnails’ is closed to new replies.