Gallery thumbnails

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #28920
    Jaime Sanchez
    Participant

    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.

    #28930
    Veena
    Moderator

    1. Pls use the below custom CSS –

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

    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.

    #28935
    Jaime Sanchez
    Participant

    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

    #28949
    Veena
    Moderator

    ok..
    Thanks for letting us know.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Gallery thumbnails’ is closed to new replies.