Wow, I didn’t mean to get so long winded…

Youtube and Vimeo work, but I think I read in another post that you can’t use self hosted videos. The staff will have to comment on that.

I used the porfolio grid. If those features are what you want, and Devin said the Avia gallery can’t do it, then why not use the Portfolio Grid instead of Avia Gallery?

You have a nice looking website, so maybe you’ve already thought about this approach and chosen not to do it… but I think this would work well with your site…

I think of a “Portfolio Items” page as any page OR image/video that I want to show in a gallery. So I created a portfolio page as a “placeholder” page for each of the 3 images. Load a featured image (which is the thumbnail), then select the categories that you want (this is key, and i would recommend at least 3 which I’ll explain). For images, you’re done… For video, you still upload the thumbnail that you want to see in the gallery as your featured image, but then use the new preview url link field to set the youtube or vimeo http address.

I know… you could have hundreds of pages, BUT they only take a few seconds to create, they are easy to navigate and find (all listed in the admin “portfolio all” section, and edits can be done with the “quick edit”). You don’t have to worry about content. They are literally a title, featured image, a link if it’s a video, and categories. As I said before, the page is just a placeholder for media or dummy page that the user will never go to.

Right now you may only have portfolio pages for your actual portfolio (I’ll call them projects to avoid confusion) pages.

Ford Focus

Mechanisms

Animatronics

Etc….

And you have categories of the same name for each project, which your current portfolio grid page shows.

If you do the page per gallery image approach, think of this structure for each project…

Ford Focus (current project page)

– Focus Photography 1 (Gallery 1)

– Focus Photography 2

:

:

– Focus Photography 18

– Focus Test Shoot 1 (Gallery 2)

– Focus Test Shoot 2

:

:

– Focus Test Shoot 18

Mechanisms

– Mechanisms Photography 1

:

Animatronics

– Animatronics Photography 1

:

If you start the title of your image gallery placeholder pages with the same name as your Project, it will help to sort/find them on the Portfolio Item page.

Now think about categories.

You already have a portfolio grid for your actual portfolio. This is probably showing all categories. In order to keep all the new pages from showing up, only mark your current categories instead of “all” categories. You want different category names for your new pages. I would recommend something like

“Photo” or “Video” – type of media (just 2 categories)

“Ford Focus Media” (identifies each project page that you’re on, but different from the Ford Focus category that you already have. 8-10?)

“Ford Focus Photography” (Ford Focus Test Shoot, etc.) – one per image/video to match the gallery. you’ll have 3-4 of these categories for each project page. also equal to the total number of galleries on your website

You would keep the same categories for each Gallery, so your portfolio pages with their categories will be:

Ford Focus (current project page)- Ford Focus category

Ford Focus Photography 1 (Ford Focus Media, Photo, Video, Ford Focus Photography)

Ford Focus Photography 2 (Ford Focus Media, Photo, Video, Ford Focus Photography)

:

Ford Focus Test Shoot 1 (Ford Focus Media, Photo, Video, Ford Focus Test Shoot)

etc…

Now the easy part, to make it all work… anywhere that you have an Avia gallery, can be replaced by a portfolio grid and simply choose the category that you want to show. The options I used:

Category shown – Ford Focus Photography (your image gallery category)

4 row gallery

no filter

no pagination

Show image in lightbox

Size 180 x 180 (125 x 125 if you want smaller ones like your current gallery)

Since lightbox is chosen, all thumbnail images will open in the lightbox. Since the new preview url link was set on the video portfolio placeholder pages, it will override the thumbnail image in the lightbox and show the video in the lightbox instead. The extra time you might think you spend on the front side, saves time of adding videos to each individual

You can make it work with just one category per image, which is the one that identifies your gallery “Ford Focus Photography”. I threw in the photo, video, and Ford Focus Project because it would take no time to create and tag these additional categories, and it gives you nice filtering options if you wanted to do one massive photo/video gallery with all of your images and video. It would just be another portfolio grid page (like your current one) but choose the categories photo, video, and then your “Ford Focus Media”, “Mechanisms Media”, “Animatronics Media”.

If you made it through all that… Hope it helps you or someone else!

Hi,

Open up enfold/js/shortcode.js and search for following 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');

and the gallery thumbs should load immediately.

just updated… Perfect for what I needed!

Adrian,

If I’m understanding you correctly, try this to see if it’s similar to what you’re looking for (main section, don’t pay attention to the other clutter):

http://www.theberryeffect.com/ford-focus/

If so, I’ll walk you through it.

It’s a similar look, it’s a gallery with thumbnails… when you click the thumbnail, it will load either a larger image in the lightbox or a video in the lightbox. I used two different size images just to show versatility

Please open up wp-contentthemesenfoldconfig-templatebuilderavia-shortcodesgallery.php and replace the entire code with: https://gist.github.com/InoPlugs/c20bb10776b1ae2139bd – this will add the thumbnail dimensions to the image tags which should help IE to show the images properly. It seems like IE8 has problems with % values.

I checked the portfolio grid code and it seems like you can’t control the preview thumbnail size at all. I’ll mark this thread for Kriesi – maybe he wants to add an option. For now open up wp-contentthemesenfoldconfig-templatebuilderavia-shortcodesportfolio.php

and search for:

$params['preview_size'] = "gallery";

Replace “gallery” with any other valid image size:

portfolio_small

portfolio

featured

square

entry_with_sidebar

entry_without_sidebar

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)

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.

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).