Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Show images before descriptions?

7 months 4 days ago #1

  • Brad's Avatar
  • Brad
  • Posts: 17
Is there a way to display the gallery content (images) before the gallery description?

7 months 3 days ago #2

  • Artem's Avatar
  • Artem
  • Posts: 8638
Hi there!

I can propose you to use Masonry Grid layout with Caption Hover Effect 12, here is a demo:
www.balbooa.com/demo/caption-hover-effects/hover-effect-12.html

Regards,
Artem, Balbooa.com

7 months 3 days ago #3

  • Brad's Avatar
  • Brad
  • Posts: 17
Thank you Artem...
Here's the page I'm working with:
staging.nookinteriors.com/portfolio?nook-offices

I'd like either the feature image or the masonry images to appear before the gallery description.
Are there ways to write a custom page template for the galleries? Is it written in YAML or TWIG or something like that?

7 months 3 days ago #4

  • Artem's Avatar
  • Artem
  • Posts: 8638
Now is clear :)

Try to add this code to your template custom.css file
body.com_gridbox.page.album-in-lightbox-open .ba-gallery-row-wrapper > .row-fluid {
    display: table-footer-group;
}

body.com_gridbox.page.album-in-lightbox-open .ba-gallery-content-wrapper {
    display: table-header-group;
}

body.com_gridbox.page.album-in-lightbox-open .ba-gallery-row-wrapper {
    padding-top: 70px;
}


Results:



Regards,
Artem, Balbooa.com

3 weeks 1 day ago #5

  • Brad's Avatar
  • Brad
  • Posts: 17
I've tried this and images are now microscopic:
staging.nookinteriors.com/portfolio?river-vista

3 weeks 1 day ago #6

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 9603
Hello,

Thank you for contacting us

Send a screen with a problem

Best Regards,
Vyacheslav, Balbooa Support Team

3 weeks 22 hours ago #7

  • Brad's Avatar
  • Brad
  • Posts: 17
staging.nookinteriors.com/portfolio?nook-offices

The thumbnails are tiny but they appear at the top as expected.
Attachments:

3 weeks 10 hours ago #8

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 9603
Hello,
Thank you for contacting us

You need to use this code instead of the one sent earlier
.album-in-lightbox .ba-gallery-row-wrapper {
    display: flex;
    flex-direction: column-reverse;
}

Regards,
Vyacheslav, Balbooa.com

2 weeks 6 days ago #9

  • Brad's Avatar
  • Brad
  • Posts: 17
Works great... I thought about flexbox and ordering, but this works well if you know the classes.

1 week 4 days ago #10

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 9603
You are welcome ;)

Let us know if you need more assistance!

Best Regards,
Vyacheslav, Balbooa Support Team
Powered by Kunena Forum