[Resolved] Help with WP_Featherlight

[Sergei]

Hello! I read a WP_Featherlights documentation for making gallery, but really don’t know where to put these CSS and JavaSciprt codes.

And maybe somebody know how to make it this one, when i click on the image, then text apears under the image.

Thanks.

[Leo]

Hi there,

Adding CSS: https://docs.generatepress.com/article/adding-css/

Javascript would usually go into wp_footer in Hooks Elements:
https://docs.generatepress.com/article/hooks-element-overview/

Let me know if this helps 🙂

[Sergei]

Leo, this CSS not work for me in child-themes style.css. Its really not a CSS code.

Simply include the extension CSS and JavaScript Files after the regular featherlight files like this:

<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<link href="//cdn.rawgit.com/noelboss/featherlight/1.7.13/release/featherlight.gallery.min.css" type="text/css" rel="stylesheet" />

Im DONE with it, but how can i make to text showing when i open image. Like image caption. In page where i have gallery not showing text but when i click on image and under image showing a text.

[Tom]

Have you considered just using their WordPress plugin that does everything for you?: https://wordpress.org/plugins/wp-featherlight/

[Sergei]

Tom, yes, i using that plugin from wordpress.org

I really don’t know how to make text visible on image when open it. When i use image caption they show in image and in page under image and the when i use mobile to look this page, it looks horrible.

I try alt-text, description but nothing work for me.

[Tom]

What if you add a “caption” to the image? The description on their plugin page says that should work.

[Sergei]

When i add caption to image, then this caption appears on image when open it and under image when its not open. And when i use mobile this looks very weird. I need to caption shows only when i click on image.

[Sergei]

Any solutions for that?

[David]

Hi there,

if you want to add the captions then we can look at the CSS needed to remove it from the unopened image.

[Tom]

Any chance you can link us to a page where we can see the captions now?

[Sergei]

Here is the link for these test images. I wish to disable text on page, because on mobile looks very weird.

I just wish to put my products in page like gallery and in caption write a text about that product.

And how to put dropdown sub-menu full witdh? I don’t know why it looks like this.

[David]

Try this CSS:

.wp-caption-text {
    display: none;
}

What device / browser is that submenu image from? Not seeing this on iOS.

[Sergei]

David, thanks a lot for CSS, is work for me. Now in gallery not showing captions, but on images still working.

Using laptop and google chrome. And test with iPhone and the same thing in sub-menu. Like this last container in sub-menu not in full witdh.

[Tom]

That’s being caused by this custom CSS:

.main-navigation ul ul {
    width: auto;
    white-space: nowrap;
}

Try replacing it with this:

.main-navigation .main-nav > ul > li > ul {
    width: auto;
    white-space: nowrap;
}

.main-navigation ul ul ul {
    width: 100%;
}

[Sergei]

I replace this code, looks better but not like all sub-menu witdh. Still have small gap.

Maybe its because sub-menu is aligned to the left? When i create new pages and put in sub-menu is the same problem. All pages goes to the left side.

[Author]

Posts