How to Create a Gallery Page

[Stark Raving]

Hi Bolters,
I'm not sure if I'm barking up the wrong tree, but I want to create a template/twig page to display a gallery of photos/images. But that may not be the best way to do it. I have in mind three or more separate galleries, that will have different images. Has anyone done this? Or created galleries in another way? This twig stuff is a slow learning process for me, so if anyone has an example that I could look at, then I could probably figure things out.
Thank you.

[isul]

bolt is based of foundation. May be you try this one
http://foundation.zurb.com/docs/components/clearing.html.

[ningus]

Hi! For me this works:

First make sure to add "imagelist" to your contenttypes.yml for pages:

Code: Select all

        imagelist:
            type: imagelist

Bolt backend will ask you for rebuilding the database. Follow the instructions.

Now create a new page, there will be a new field for adding images to a list, add some images and publish.

Your page does now have a very sparse list of image-thumbnails. To make this more gallery-like, add some code to your record.twig template. Locate the line where the code block for imagelists begins, in base-2014 theme this is line 29. Replace the appropriate lines with this:

Code: Select all

{% elseif record.fieldtype(key) == "imagelist" and value != "" %}

    {# We do something tricky here: we need to get value of the list in the proper
       way, so the value in actually returned as a list. Using {{ record.key }}
       won't work, because there is no value 'key'. In your own templates you
       will be able to use {{ record.yourfieldname }}. #}

    {% set list = attribute(record, key) %}

    <ul>
        {% for item in list %}

        <li class="{% if loop.first %}first {% endif %}{% if loop.last %}last {% endif %}">
            <a class="fancybox" rel="gallery" href="{{ image(item.filename) }}">
                <img src="{{ thumbnail(item.filename, 240,160) }}" alt="{{ item.title }}" title="{{ item.title }}">
            </a>
        </li>

        {% endfor %}
    </ul>

Note: you have to beautify this with css as you like. The first and last list-item will have a specific class, so that you can show first or last images larger than other thumbnails and let them float left or right.

[Stark Raving]

Hey, you guys are stars! Thank you. I will try both ways, as I'm willing to learn as much as I can about Bolt, twig and so on until I fall over unconscious or out of sheer exhaustion. Big hugs!

[Stark Raving]

Okay. I feel like a twit. However, I did search for photo/image gallery in this forum and found nothing. Today, however, I was browsing through the forum posts page by page, and found this photoalbum extension https://github.com/jadwigo/bolt-photoalbum on Bolt Github. I found it in a post that had no mention of photos or images in the subject line. But here it is. There you are.

[isul]

have you succeed with this extention. I have got error alert.

[Stark Raving]

No, sorry. I haven't yet tried the extention. When I do, I'll post the results.

Cheers

[ningus]

I'm afraid this extension will not work in recent bolt versions, it’s "extension.php" contains these lines:

Code: Select all

'required_bolt_version' => "1.0.2",
'highest_bolt_version' => "1.3",

At least it could be useful as an inspiration for your site’s contenttypes.

[isul]

I tried to make a gallery with "NINGUS WAY" + Clearing Fundation. Here the ling http://isul.web.id/gallery/portfolio

[ningus]

Hey, isul this looks good, very well done!
Although I feel slightly uncomfortable with my name written in capital letters

One minor thing to improve: when I load your gallery page (browser cache emptied) the first image appears to be positioned off center, the following images are ok, when I go back to first image it is ok either. So it looks like the initial script execution comes a tad to late. You can try to put the foundation script into your templates’ header.