Gallery thumbnails

[Jaime SanchezParticipant Post count: 4]

Hi, i have two questions about the image gallery thumbnails:

1. ¿How can I change the color of the hover in the image gallery thumbnails? Now it uses a filter that makes the images turn dark. I need the opposite, to turn them whiter.

2. ¿How can I customize the size of the thumbnails? My images are portrait an d landscape, but I need the thumbnails to be the same horizontal size (now they can be only square if i want them to be the same size)

Thanks for your help.

[VeenaModerator Post count: 8003]

1. Pls use the below custom CSS –

.lvca-gallery-item .lvca-project-image:hover img {
    -webkit-filter: brightness(80%);
    filter: brightness(80%);
}

[Jaime SanchezParticipant Post count: 4]

Thanks a lot, i will try the code lines and post feedback.

For the second question about the thumbnais sizes I found myself the solution:

Open the image-sizes.php file of your theme (it should be in wp-contents/themes/your-theme/framework/config/)

Add the thumbnails sizes you need:

<?php defined( ‘ABSPATH’ ) OR die( ‘This script cannot be accessed directly.’ );

/**
* Theme’s thumbnails image sizes
*
* @filter us_config_image-sizes
*/

return array(

// 600×600 – gallery large, blog layouts
‘tnail-1×1’ => array(
‘width’ => 600,
‘height’ => 600,
‘crop’ => TRUE,
),
// 350×350 – small image blog layout, gallery medium, person
‘tnail-1×1-small’ => array(
‘width’ => 350,
‘height’ => 350,
‘crop’ => TRUE,
),

// 400×300 – small image landscape
‘tnail-4×3-small’ => array(
‘width’ => 400,
‘height’ => 300,
‘crop’ => TRUE,
),

);

Then install the plugin Regenerate Thumbnails, and regenerate your images thumbnails (you will find it in the tools menu).

Now in the gallery options you should find the new thumbnails sizes.

[Jaime SanchezParticipant Post count: 4]

Hello again Veena, your css worked fine, just had to make a little modification:
I had to add .lvca-gallery-wrap .lvca-gallery before the classes, and change the filter to get what i wanted:

.lvca-gallery-wrap .lvca-gallery .lvca-gallery-item .lvca-project-image:hover img{
-webkit-filter: opacity(50%);
filter: opacity(50%);
}

Thanks a lot for your help

[VeenaModerator Post count: 8003]

ok..
Thanks for letting us know.

[Author]

Posts