Yes, you can also use the “crop” parameter to deactivate cropping. However you must make sure that all images have the same resolution – otherwise the grid will be off again. If you want to deactivate the wp crop function use:
$avia_config['imgSize']['portfolio'] = array('width'=>495, 'height'=>400, 'crop'=>false ); // images for portfolio entries (2,3 column)
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.
I’m trying to create a filterable video gallery. Right now I am using the portfolio grid, because it has more options like filtering than the gallery media option has. The portfolio grid has two options: open in new page or open in lightbox. I have it setup to open in a new page, because if you choose, “open in lightbox” it only opens the featured image in a lightbox, not the actual video. Is there a way to click on the featured image that’s shown on the grid, and have a video open in the lightbox?
I tried a “featured video” plugin, but it didn’t perform like I wanted. It either played the video in place, or opened a youtube app on iPhone and iPad.
In short, I just want filterable gallery of thumbnails, that displays a video in a lightbox when clicked.
Hi,
The preview image or thumbnails depend on the number of columns you’re using. How many columns do you have on your portfolio page?
Regards,
Ismael
Hi,
I totally don’t understand what you just said but the shortcode you provided totally works on my end.
[av_gallery ids='' style='thumbnails' preview_size='portfolio' thumb_size='portfolio_small' columns='5' imagelink='lightbox']
Regards,
Ismael
Hi chryseis,
The images should be the same proportions if you want them to come out the same. WordPress can be a little funny on how it actually creates the thumbnails so the less it has to do the better the result.
Eg, if you want to make sure they look their best try and use images that are all larger than needed and cropped to the same pixel dimensions.
Regards,
Devin
I am having a similar issue where the thumbnail aspect ratio is correct from all of the previous portfolio images I uploaded, but the new ones are cropping off and causing the grid to be off. Would this same code fix the problem I am having? All of my portfolio images are 16:9 aspect ratio.
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
so – i finally did some recording with the screenr – great tool!
check my recording: http://www.screenr.com/aABH
as you can see the thumbnails arent square – i dont really have a problem if they arent – unless the image is squashes – which it is as you can see… i dont have any plug-ins, blockers or whatsoever installed in IE8 – but thats the way how it looks…
as you can see the fading on the frontpage doest work aswell – neither do the icons – but i assume this was fixed in the last update.
hope that helps
Hi –
the css alteration doesnt make it better. it makes the thumbnails bigger – and still arent square. i tried to resize monitor etc… doesnt affect.
unfortunately i cant post screenshots here – but i have some prepared if you would like to look over…
regards
fading and icons dont work aswell under IE 8
Open up enfold/js/shortcode.js and search for this code around line 205:
//trigger displaying of thumbnails
gallery.on('avia_start_animation', function()
{
images.each(function(i)
{
var image = $(this);
setTimeout(function(){ image.addClass('avia_start_animation') }, (i * 110));
});
});
change it to:
//trigger displaying of thumbnails
gallery.on('avia_start_animation', function()
{
images.each(function(i)
{
var image = $(this);
setTimeout(function(){ image.addClass('avia_start_animation') }, (i * 110));
});
}).trigger('avia_start_animation');
The gallery thumbs should then load immediately. A fade effect to another color is not possible.
Yes, this can happen because WordPress will not re-size images which are smaller than the defined thumbnail size. On the other hand the css code will scale the image to 100% of the container width regardless of the thumbnail size. And because the aspect ratio of 300×300 is different compared to 495 x 400 the scaled image version can be higher than the thumbnail with the higher resolution which is not scaled.
I couldn’t reproduce the thumbnail issue on IE10 and 9: http://www.screenr.com/uCBH
IE8 displayed slightly smaller thumbnails but they’re still squared and not distorted, etc.
You can try to add a min-width to the thumbnails though – add following code to the quick css field:
#top div .avia-gallery img {
min-width: 120px;
min-height: 120px;
}
This should force IE8 to display the images with at least 120px width/height or more (depends on the thumbnail size).
Hi!
Hey!
Yep that was an oversight. The setting show on hover should work fine, the “alway show” setting will be fixed with the update tomorrow ;)
Best regards,
Kriesi
I found the problem, it only arises when the “Duplicate Post” plug-in is used.
Somehow, the thumbnail sticks to the duplicated post and shows up identical in the Enfold Latest Portfolio Widget.
Duplicated the page is convenient but I also realised that I can save “Templates”.
So, all is good. Sorry to trouble.
Hi,
My site is still in maintenance mode..
Just to be sure, I understand what you say, if I want my “blog grid style” (yes that what I meant by masonry..sorry) with all the images at the same size, my original pictures have to be at least 495 x 400 is that it?
I checked one that looks bigger on my blog and it is 300 x 300. So if the image size is smaller it will appear bigger than the normal blog grid style, is that it?
I couldn’t understand why a smaller size picture looks bigger :-/
Hi iclarity,
WordPress has a function that allows developers to tell it to create thumbnails of images when they get uploaded. So when you upload an image Enfold has asked wordpress to make a few additional copies at various sizes. What you are seeing is one of those sizes shown instead of the fullwidth image.
You should still be able to see the full width image if you insert it at Full Size in a visual editor or by going to its direct url.
Regards,
Devin
Is there any setting to remove or edit the translucent layer that appears over thumbnails on the post slider when you hover your mouse over them?
Hi,
If you are using a 4 column porfolio, find this code on functions.php
$avia_config['imgSize']['portfolio_small'] = array('width'=>260, 'height'=>185 ); // images for portfolio 4 columns
Replace it with
$avia_config['imgSize']['portfolio_small'] = array('width'=>300, 'height'=>300 ); // images for portfolio 4 columns
Regenerate thumbnails using this: http://wordpress.org/extend/plugins/regenerate-thumbnails/
Regards,
Ismael
Hi,
Do you mean the Blog Grid Style? Suggested image size is 495×400. You can find the image size on functions.php.
$avia_config['imgSize']['portfolio'] = array('width'=>495, 'height'=>400 ); // images for portfolio entries (2,3 column)
Can you give us a link to your website?
Regards,
Ismael
The widget’s thumbnails are stuck to a previous post’s thumbnail. How do I solve this?
When I create a gallery with the magic wand, media, gallery it does not insert the image’s.
This is what I get.
[av_gallery ids='' style='thumbnails' preview_size='portfolio' thumb_size='portfolio_small' columns='5' imagelink='lightbox']
Looking forward to hearing from you soon.
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
I want my featured image to have all the same size on my blog masonry some of them have the good size but others are bigger. Why that?
How can I fix this?
Thanks
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.
yes, here you go: http://www.blackjava.de/bilder
as for the thumbnails on the smartphone: it looks like the frame somehow does not resize but keeps ‘bold’ instead, while downsizing the rest…
regards
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
i got similar issues with the explorer. besides the missing icons (like seach button, etc.) another weird thing in my portfolio page (i am using the 120×120 shop thumbnails) – the thumbnails are not square- they are somehow squashed – so do the picturers look. in firefox everythings fine. i am using IE8
any idea how to fix this?
there is also a problem with the responsive feature when using the 120×120 shop thumbnails – i reported this in another topic..
best regards
Pedro
Hi – i am using the shop thumbnail size (120×120) for my thumbnails in my portfolio page.
looks good so far.
but when page is opened with my smartphone (galaxy s2) the thumbnails seem to be even smaller than the frame thumbnail frame itself – that means i cant actually differ the thumbnails from each other – its just too small. it looks like the image in the thumbnail frame is smaller than the frame itself.
any possibility to control the responsive control of the gallery apart from the regular one? please understand – i like the way it looks now from my PC screen – i am looking for a way to have the gallery/portfolio displayed on the smartphone so that it is readable…
other thing: when i open a thumbnail – the gallery does not resize to the smartphone screen – at all. sometimes i have to scroll down, left to find the image. what’s also weird is the fact that i cant browse wthrough the gallery by clicking/touching on the picture. that would helf a lot – so i dont have to look for the control button each time to wipe through the gallery…
hope i could explain…
Thanks
Pedro
The thumbnail doesn’t determine the size of the grid, the column count does.
You need to use larger images that can be shrunken down so that there is no crop or anything like that. For example the new image for “Rob Wolf” is 225×296, if it was 257 wide to start with it wouldn’t be increased in size to fit the space (keeping the same proportions to give you the portrait effect).