Photo gallery: photoswipe

Questions
#1

What is the best approach to create a photo gallery as part of an OctoberCMS site ? I was thinking of probably using photoswipe.

#2

I think the best approach depends on what you’re trying to achieve with the gallery. PhotoSwipe could definitely be a good fit, but I’d first look at the exact use case and whether it covers your requirements.

What is your intention for the OctoberCMS integration? Are you thinking about creating a plugin around PhotoSwipe, or do you mainly want to integrate the JS library into an existing theme/component?

If you’re interested, I’d be happy to help put together a small PoC to explore the approach and see how it could fit into OctoberCMS.

#3

After all the years for searching THIS lightbox-script, which is solving the list of all my needs, I just built a own one, which I can use in different CMS and I’m really happy with it because I can expand it for my own needs instead of fighting with someones code. So I would really recommend you to build your own lightbox too. It’s not a big deal and with the help of your favourite LLM, you shout get some inspirations.

#4

Here’s some reference material I prepared for an unfinished tutorial I was working on:

handle: Site\Sliders
type: entry
name: Slider
pagefinder: false

customMessages:
    buttonCreate: New Slider

navigation:
    label: Sliders
    icon: icon-tv
    order: 300

columns:
    title:
        label: Name
    slug:
        label: Code
        invisible: false

fields:
    slug:
        label: Code
        validation:
            - required

    controls:
        label: Controls
        comment: Show the slider controls.
        tab: Options
        type: switch
        default: true

    autoplay:
        label: Autoplay
        comment: Start the slider animations automatically.
        tab: Options
        type: switch
        default: true

    slides:
        order: 1
        label: Slider Items
        type: nesteditems
        tab: Slides
        span: adaptive
        maxDepth: 0
        customMessages:
            buttonCreate: Add Slide
            titleCreateForm: Create Slide
            titleUpdateForm: Edit Slide
        form:
            fields:
                name:
                    label: Slide Name
                    type: text
                    autoFocus: true
                    validation:
                        - required

                is_active:
                    label: Active
                    type: switch
                    default: true

                image:
                    label: Image
                    type: fileupload
                    mode: image
                    fileTypes: jpg,jpeg,png,gif,svg
                    maxFiles: 1

                video:
                    label: Video
                    type: fileupload
                    mode: file
                    fileTypes: mp4
                    maxFiles: 1

themes/demo/partials/slider.htm

[section slider]
handle = "Site\Sliders"
identifier = "slug"
value = "{{ code }}"
==
{% set sliderId = 'slider' ~ random() %}
{% do slider.slides.load(['image', 'video']) %}

<div id="{{ sliderId }}" class="october-slider">
    {% for slide in slider.slides %}
        {% if slide.image is not empty %}
            <img src="{{ slide.image|media|resize(900, 500, { mode: 'crop' }) }}" class="slide-image" alt="">
        {% elseif slide.video is not empty %}
            <video class="slide-video" autoplay muted playsinline loop>
                <source src="{{ slide.video|media }}" width="900" height="500" type="video/mp4">
            </video>
        {% endif %}
    {% endfor %}
</div>

<script>
    window.{{ sliderId }} = tns({
        mouseDrag: true,
        controls: {{ slider.controls }},
        autoplay: {{ slider.autoplay }},
        container: '#{{ sliderId }}'
    });
</script>

{% put scripts once %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
{% endput %}

{% put styles once %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
    <link rel="stylesheet" href="{{ 'assets/css/slider.css'|theme }}">
{% endput %}

themes/demo/assets/css/slider.css

[data-action] {
    display: block;
    margin: 10px auto;
    font-size: 17px;
    min-width: 3em;
    text-align: center;
    background: transparent;
    border: 0;
}

.tns-controls {
    text-align: center;
    margin-bottom: 10px;
    [aria-controls] {
        font-size: 15px;
        margin: 0 5px;
        padding: 0 1em;
        height: 2.5em;
        color: #000;
        background: #66CCFF;
        border-radius: 3px;
        border: 0;
    }

    [disabled] {
        color: #999999;
        background: #B3B3B3;
        cursor: not-allowed !important;
    }
}

.tns-nav {
    text-align: center;
    margin: 10px 0;
    > [aria-controls] {
        width: 9px;
        height: 9px;
        padding: 0;
        margin: 0 5px;
        border-radius: 50%;
        background: #ddd;
        border: 0;
    }
    > .tns-nav-active {
        background: #999;
    }
}
1 Like