Need a simple gallery

Amin · 2022-01-15 17:38:48

Dear friends,

What is the simplest way to have a gallery like https://homel.vsb.cz/~tol0013/reviewer.htm in my own Textpattern? I’m not professional in Textpattern. Thank you in advance.

colak · 2022-01-16 04:59:29

Hi Amin,

It appears that the page you are referring to uses Lightbox.

Tell us more about what you need and we can guide you through. For example, do you need the gallery on an article_list or an individual article page?

Amin · 2022-01-16 06:12:21

colak wrote #332438:

Hi Amin,

It appears that the page you are referring to uses Lightbox.

Tell us more about what you need and we can guide you through. For example, do you need the gallery on an article_list or an individual article page?

Thank you so much for your response. Indeed, I need a gallery on an individual article page.

Last edited by Amin (2022-01-16 06:14:04)

jakob · 2022-01-16 10:46:49

If you just have a collection of images with captions, you can do this as follows:

Create an image category, e.g. publications for your collection under Content › Categories. Make sure it’s an image category (not an article category) you’re creating.
Prepare a set of large version images of your book covers and upload them via the Content › Images pane. If you’re on a more recent version of textpattern, you can drag a batch of pre-prepared images onto the upload form and pre-assign the category publications to which they should be assigned. They will then all be uploaded at once and assigned to that category.
Create thumbnails of those images if they are not automatically made – these will be the small versions. Tip: If the thumbnail size you already have is wrong, begin by uploading just one image and then re-create the thumbnail at the desired size (in the case of books, it may be the height you want to define). The setting should stick and you can then upload the remaining book covers.
Add captions and alt text to the images in the Content › Images pane.

You can then use txp:images to output batches of images. For example:

<txp:images category="publications" wraptag="ul" class="publication-list" break="li">
    <a href="<txp:image_url />" class="publication lightbox" data-caption="<txp:image_info />">
        <img src="<txp_image_url thumbnail />" alt="<txp:image_info type="alt" />">
    </a>
</txp:images>

replacing “publications” with whatever category name you have chosen. You may need to adjust this slightly depending on the lighbox script you use. (Note: txp:image_info without a type attribute defaults to outputting a caption).

Place this in your article form or page template or even directly into the article (depending on how your site is set up).

This gives you the unstyled HTML source code you can use with a javascript lightbox gallery. You’ll see a bullet list of thumbnail images that each link to a larger version of the image. Turning this into a pretty grid is then just a matter of adding the requisite styling. For example, for a very simple, auto-collapsing regular grid with the images auto-fitted within each box, you might do:

.publication-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));  // 14rem = 224px max img width
    grid-gap: 1.5rem;  // 1.5rem = 24px gap
}
.publication img {
    max-width: 100%;
    object-fit: cover;
}

For the lightbox gallery you can use highslide like in your original example where the book cover zooms in at the position of the thumbnail. That’s now very old and a huge library. Lightbox2 that Yiannis/colak mentioned is much smaller but requires also loading jQuery. If you’re already using that for other scripts that’s fine. If not, there are a million and one other lightbox scripts that don’t require installing jQuery as well: one that I’ve been using lately is Parvus.

For that you need to download the library from GitHub as described here. If you like the styling it comes with, you can use the minified (=compressed) parvus.min.js and parvus.min.css files. Otherwise use the non-minified css file and adjust the styling to what you prefer. As in the example shown on that page, you need to load the css file in the head part of your page template, and the js file at the bottom of your page template:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><txp:page_title /></title>

    <!-- CSS -->
    <link href="/path/to/parvus.min.css" rel="stylesheet">
</head>
<body>
    <!-- HTML content -->

    <!-- JS -->
    <script src="/path/to/parvus.min.js"></script>
    <script>const prvs = new Parvus();</script>
</body>
</html>

replacing /path/to with the directory structure of where you put the parvus (or other lightbox) css and js files.

Parvus supports various other options, for example to group images to a gallery if you want to be able to page through the zoomed images, you would replace the final initialisation of the script above with:

<script>
    const prvs = new Parvus({
        gallerySelector: '.publication-list',
    });
</script>

See the instructions for more details.

If you want to show the caption with each item in your grid view, for example as in the books page of the site you linked to – https://homel.vsb.cz/~tol0013/books.htm – you can change the txp:images markup above to use figure and figcaption tags instead of a list of linked images, e.g.

<txp:images category="publications" wraptag="div" class="publication-list" break="">
    <a href="<txp:image_url />" class="lightbox" data-caption="<txp:image_info />">
        <figure class="publication">
            <img src="<txp_image_url thumbnail />" alt="<txp:image_info type="alt" />">
            <txp:image_info wraptag="figcaption" />
        </figure>
    </a>
</txp:images>

Amin · 2022-01-28 06:46:56

jakob wrote #332441:

If you just have a collection of images with captions, you can do this as follows:

Create an image category, e.g. publications for your collection under Content › Categories. Make sure it’s an image category (not an article category) you’re creating.

Prepare a set of large version images of your book covers and upload them via the Content › Images pane. If you’re on a more recent version of textpattern, you can drag a batch of pre-prepared images onto the upload form and pre-assign the category publications to which they should be assigned. They will then all be uploaded at once and assigned to that category.

Create thumbnails of those images if they are not automatically made – these will be the small versions. Tip: If the thumbnail size you already have is wrong, begin by uploading just one image and then re-create the thumbnail at the desired size (in the case of books, it may be the height you want to define). The setting should stick and you can then upload the remaining book covers.

Add captions and alt text to the images in the Content › Images pane.

You can then use txp:images to output batches of images. For example:

<txp:images category="publications" wraptag="ul" class="publication-list" break="li">...

replacing “publications” with whatever category name you have chosen. You may need to adjust this slightly depending on the lighbox script you use. (Note: txp:image_info without a type attribute defaults to outputting a caption).

Place this in your article form or page template or even directly into the article (depending on how your site is set up).

This gives you the unstyled HTML source code you can use with a javascript lightbox gallery. You’ll see a bullet list of thumbnail images that each link to a larger version of the image. Turning this into a pretty grid is then just a matter of adding the requisite styling. For example, for a very simple, auto-collapsing regular grid with the images auto-fitted within each box, you might do:

.publication-list {...

For the lightbox gallery you can use highslide like in your original example where the book cover zooms in at the position of the thumbnail. That’s now very old and a huge library. Lightbox2 that Yiannis/colak mentioned is much smaller but requires also loading jQuery. If you’re already using that for other scripts that’s fine. If not, there are a million and one other lightbox scripts that don’t require installing jQuery as well: one that I’ve been using lately is Parvus.

For that you need to download the library from GitHub as described here. If you like the styling it comes with, you can use the minified (=compressed) parvus.min.js and parvus.min.css files. Otherwise use the non-minified css file and adjust the styling to what you prefer. As in the example shown on that page, you need to load the css file in the head part of your page template, and the js file at the bottom of your page template:

<!DOCTYPE html>...

replacing /path/to with the directory structure of where you put the parvus (or other lightbox) css and js files.

Parvus supports various other options, for example to group images to a gallery if you want to be able to page through the zoomed images, you would replace the final initialisation of the script above with:

<script>...

See the instructions for more details.

If you want to show the caption with each item in your grid view, for example as in the books page of the site you linked to – https://homel.vsb.cz/~tol0013/books.htm – you can change the txp:images markup above to use figure and figcaption tags instead of a list of linked images, e.g.

<txp:images category="publications" wraptag="div" class="publication-list" break="">...

Thank you for your help. I’m working on it. I hope I can do it. Thanks again.

Textpattern CMS

Textpattern CMS support forum

#1 2022-01-15 17:38:48