[Support request] Image galleries as tabs

Home Forums Support [Support request] Image galleries as tabs

Home Forums Support Image galleries as tabs

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1581947
    Dorin

    Hi,

    Searching for this for some time now and this support topic is the only indication that it can be done in Generate Press. Example from the topic here. So what I want is to be able to have a single page as my photography portfolio where all the galleries are displayed. One gallery per tab. Would be great if it doesn’t require a plugin. Any help with this is much appreciated.

    I’m using GP Premium 1.12.3, GenerateBlocks 1.20 and WP Featherlight 1.3.4 for the lightbox.

    #1582194
    David
    Staff
    Customer Support

    Hi there,

    have you thought about using a plugin like this:

    https://wordpress.org/plugins/portfolio-filter-gallery/

    Or there is Envira Gallery that has an premium add on that includes Tags to filter your galleries:

    https://enviragallery.com/pricing/

    #1582633
    Dorin

    Hi David,

    Thanks so much for the reply and suggestions. In the meantime, I found a very lightweight plugin called Simple Tabs Shortcodes that got me halfway through. The code looks like this:

    [tabs]
    [tab title=”First tab”]The content of the first tab.[/tab]
    [tab title=”Second tab”]The content of the second tab.[/tab]
    [tab title=”Third tab”]The content of the third tab.[/tab]
    [/tabs]

    I then created separate pages for each gallery, then copied the code that displays the gallery inside the content of each tab. The galleries are displaying, the only downside being there’s no way to automatically update the code if I make changes to the galleries. Is there a solution here? Maybe a short code for each gallery?

    #1582687
    Thierry

    Hi Dorin, Hi David

    I have 2 job, Web designer and Wedding Photographer 🙂

    I can tell you that I have tested every free and non free photo gallery that exists for the 3 last years.

    I wanted a very flexible gallery AND being able to sell prints online with a nice customer experience (buying and watching the photos on the same page).

    I found the gallery JIG https://justifiedgrid.com/

    I made custom developments on top on JIG to be able to sell prints online with only ONE woocommerce product (because making a product for each photo, when you have dozens of thousands of photos is loooooonnnnnnnnnnnngggg and very very painful, you end up with huge databases, and a slow website.

    I also needed the free wonderful plugin Media Library Assistant

    For the kind of thing you want to do, have a look at the last part of https://photostudiotnk.com/portfolio/ “Par moment”.

    For you, the process would be:
    – upload photos, Using a general Media Library Assistant Category and a Tag
    – your webpage will be automatically updated with the new photos and the new gallery

    As you are a photographer, I suppose that you may like to have your photos ordered by timestamp…
    I have done it on my websites, and I can explain how to do it.

    If you are interested in selling prints online, have a look at:
    https://clients.photostudiotnk.com/galerie-photo/
    You can add various prints to your cart WITHOUT LEAVING the gallery.

    This was quite a heavy and complex development… I can tell you that nothing equivalent exists on the market.

    Best and kind regards

    #1582752
    David
    Staff
    Customer Support

    I found this Stack Overflow topic that does that:

    https://wordpress.stackexchange.com/a/219182

    This article explains how to add shortcode registration code:

    https://docs.generatepress.com/article/adding-php/

    #1583752
    Dorin

    Hi David,

    It works, thank you so much. Now I just need to add a smoother transition between tabs (something like a cross fade, I’m not sure if this can be done using css only) and make them responsive for mobile. I’ve left a link in the private info area. Should I open a new ticket and mark this one as resolved?

    Thanks, Thierry. I’ll take a look at the Media Library Assistant plugin. As for the gallery display, the solution I worked on so far is exactly what I wanted. And it’s very lightweight and loads fast. I’ll most likely have to compress the images for an even faster loading.

    #1584092
    David
    Staff
    Customer Support

    Tricky one without Javascript – but give this CSS a try:

    .tabs-content {
        position: relative;
    }
    .tabs-container section.tab {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.5s ease-in-out;
    
    }
    section.tab.active {
        position: relative;
        pointer-events: auto;
        max-height: 10000px;
        opacity: 1;
    }
    #1584138
    Dorin

    Works like a charm. Thank you so much, David.
    Any chance you can give me a helping hand with making the tabs responsive for mobile devices too? Much like here – the way the tabs are switching into responsive mode is what interests me.

    #1584244
    David
    Staff
    Customer Support

    Unfortunately your tabs shortcode doesn’t include the additional HTML that would require.
    We could make the Tabs Nav sticky on scroll, and cause it to scroll to the top when a tab link is clicked.

    At the end of your Tabs container, add this script and style:

    <script>
    function scrollToTop() {
        window.scroll({top: 0, left: 0, behavior: 'smooth'});
    }
    const galleryLinks = document.querySelectorAll('.tabs-nav ul li a');
    galleryLinks.forEach(galleryLink => galleryLink.addEventListener('click', scrollToTop));
    </script>
    
    <style>
    .tabs-nav {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 100;
    }
    .tabs-nav ul {
        margin-left: 0;
    }
    </style>
    #1584604
    Dorin

    David, the Simple Tabs Shortcodes plugin that I’m using has the following html code that I can use instead of the shortcode (tested and works):

    <div class="tabs-container">
        <div class="tabs-nav">
            <ul>
                <li><a href="#first-tab" class="active">First tab</a></li>
                <li><a href="#second-tab">Second tab</a></li>
                <li><a href="#third-tab">Third tab</a></li>
            </ul>
        </div>
        <div class="tabs-content">
            <section id="first-tab" class="tab active">The content of the first tab.</section>
            <section id="second-tab" class="tab">The content of the second tab.</section>
            <section id="third-tab" class="tab">The content of the third tab.</section>
        </div>
    </div>

    Maybe this will help with the styling for mobile. I’ve added a second tab section on the page using the html above.

    Your code works in Chrome, but not in Safari. Looks like a great solution if I have just a few tabs. I’m planning on adding more galleries (probably around 10-12) which would look less desirable as a sticky tabs nav.

    #1585803
    David
    Staff
    Customer Support

    For that type of responsiveness it would need to Tab Navigations, one for Desktop and a separate one for mobile that interleaves each of the Tab Panels. That plugin won’t allow you to do that.

    Maybe one like this that has responsiveness built in:

    https://en-gb.wordpress.org/plugins/tabby-responsive-tabs/

    #1585818
    Thierry

    Hi

    For tabs, I use the Gutenberg blocks provided (free) by https://www.kadenceblocks.com

    From them, I also use Accordion, Row layout and Advanced buttons

    Regards

    #1587280
    Dorin

    David and Thierry, thank you so much for the alternatives you provided. I’ll give those a shot.

    #1587346
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.