Home Forums ASE Support adding custom class to gallery component

This topic is: resolved

Tagged: 

Viewing 6 posts – 1 through 6 (of 6 total)
  • Author

    Posts

  • #8393

    Reply

    Julie Wolpers

    Participant

    I’m trying to add a custom class to the gallery component, specifically so I can customize the image background positioning on the Parallax stacked image option to center top so the tops of the photos don’t get cut off at 100% width. I’ve added the following code to functions.php but it does not appear to be adding the class to the gallery html output. Thank you for your help!

    // add gallery custom class

    add_filter(“aesop_gallery_component_classes”, “myaddclasses”);
    function myaddclasses(){
    return “bernie”;
    }

    #8398

    Reply

    Michael Beil

    Keymaster

    Hey Julie,

    What does your “bernie” class CSS look like?

    You will notice that we registered $stacked_styles = 'background-size:cover;background-position:center center';
    (see https://github.com/bearded-avenger/aesop-core/blob/master/public/includes/components/component-gallery.php#L236), for the stacked gallery, so every stacked gallery is a cover image that is center center. My guess is that the filter is not overriding this because it will require a little more logic.

    See more on the gallery custom post type here to create an option for center top if you just want that on specific stacked galleries: https://github.com/bearded-avenger/aesop-core/blob/master/admin/includes/components/component-gallery.php.

    Here’s what our styles look like for the stacked parallax: https://github.com/bearded-avenger/aesop-core/blob/master/public/assets/less/components/gallery.less.

    By the way, it may be helpful to check out our Sample Add-on: https://github.com/AesopInteractive/sample-addon.

    #8399

    Reply

    Julie Wolpers

    Participant

    Hi Michael,

    Ny point is not about my specific CSS. It’s that the filter in the code I listed above does not appear to be adding the “bernie” class to any div that surrounds the class in php. I had assumed that the filter would simply add a custom-named class to a surrounding div. Is that incorrect? I was able to target div.aesop-stacked-img and override the position.

    • This reply was modified 5 years, 11 months ago by Julie Wolpers.

    #8401

    Reply

    Michael Beil

    Keymaster

    It looks like the filter is missing in the gallery component for ASE core, so we are working on a fix for the filter method.

    #8402

    Reply

    Julie Wolpers

    Participant

    Oh, OK, thanks!

    #8884

    Reply

    Michael Beil

    Keymaster

    This filter is now in the latest release of ASE! Thanks for the heads up.

Viewing 6 posts – 1 through 6 (of 6 total)
Reply To: adding custom class to gallery component