Forum

Thread tagged as: Question

Displaying galleries in blog posts

Hi, I wonder if it is possible to display an image gallery within a blog post please.

I have a gallery working on the main page of my site

https://www.tailoryourholiday.com/gallery.html

I would like to be able to add specific galleries within blog posts. Different galleries would be shown on different posts. e.g here

https://www.tailoryourholiday.com/blog/2018-08-10-test-post

Not sure if it possible to do this.

I did find a reference to the following code, but I dont know where to use this (sorry for the simple questions I am quite new to using the more extended features of Perch)

<?php

    perch_blog_custom([
        'template' => 'post_in_list.html',
        'each' => function($post) {
            $blog_album = perch_blog_post_field($post['postSlug'], 'album', true);
            $html = perch_gallery_album($blog_album, [
                'count' => 4,
                'template' => 'c_list_image.html',
                ], true); 
            $post['gallery_html'] = $html;
            return $post;
        }
    ]);

    ?>

Grateful if anyone can point me in the direction of suitable tutorial pages if it is possible. If this isn't possible could I use Perch blocks to allow the user to upload several images to a post to make a mini gallery?

Many thanks Vee Jones

Vanessa Jones 0 points

3 years ago

Adam Green 0 points

3 years ago

Hi Vanessa,

I've found Perch repeaters good for image galleries - these work well wrapped up in blocks too so you can drop a gallery anywhere within the content. Using sub-templates, rescoped to parent, you can reuse both for normal content regions and other apps such as blog. Your image gallery mark up will vary.

_image_slider.html sub-template:

<perch:repeater id="images" label="Images" max="10">
<perch:before><div class="flickityslideshow"></perch:before>
<div class="flickity__cell">
    <figure class="ratio-box">
        <img data-srcset="<perch:content type="image" id="sliderimage" width="320" height="120" crop="true" label="Image" help="Recommended Image format: high quality 72dpi jpeg, minimum width 2000px, approx. 1-2MB" /> 320w,
                <perch:content type="image" id="sliderimage" width="480" height="180" crop="true" /> 480w,
                <perch:content type="image" id="sliderimage" width="640" height="240" crop="true" /> 640w,
                <perch:content type="image" id="sliderimage" width="720" height="320" crop="true" /> 720w,
                <perch:content type="image" id="sliderimage" width="960" height="360" crop="true" /> 960w,
                <perch:content type="image" id="sliderimage" width="1280" height="480" crop="true" /> 1280w,
                <perch:content type="image" id="sliderimage" width="1600" height="600" crop="true" /> 1600w,
                <perch:content type="image" id="sliderimage" width="1920" height="720" crop="true" quality="30" sharpen="2" /> 1920w, 
                <perch:content type="image" id="sliderimage" width="2560" height="960" crop="true" quality="30" sharpen="2" /> 2560w"
            data-sizes="(min-width: 1250px) 804px, (min-width: 768px) 60vw, 90vw"
            class="lazyload"
            alt="<perch:content type="text" id="alt" label="Description (required)" title="true" />">
    </figure>
</div>
<perch:after></div></perch:after>
</perch:repeater>

Perch blocks using sub-template above

<perch:blocks>
<perch:block label="Heading (clear floats)" type="heading" icon="pencil">
    <h3 class="cb"><perch:content id="heading" type="text" size="xl" label="Heading (h3)" /></h3>
</perch:block>

<perch:block label="Text (Markdown)" type="article-text" icon="pencil">
    <perch:content id="body" type="textarea" size="xl autowidth" label="Text" markdown="true" editor="markitup" html="true" />
</perch:block>

<perch:block label="Button" type="button" icon="link">
    <perch:template path="content/default/blocks/_button.html" rescope="parent"  /> 
</perch:block>

<perch:block label="Photo" type="image" icon="photo">
    <perch:template path="content/default/blocks/_image.html" rescope="parent"  />  
</perch:block>

<perch:block label="Image slider" type="imageslider" icon="photo">
    <perch:template path="content/default/blocks/_image_slider.html" rescope="parent"  />   
</perch:block>
</perch:blocks>

Vanessa Jones 0 points

3 years ago

Thanks I will have a try using your suggestion.

Vanessa Jones 0 points

3 years ago

I have managed to get this working with your help thanks.

First I created a template blog-image-gal.html (templates – content )

<perch:repeater id="images" label="Images" max="20">
    <perch:before><h3>Gallery</h3><div id="portfolio" class="portfolio grid-container portfolio-nomargin gallery clearfix" data-lightbox="gallery">
</perch:before>
    <article class="portfolio-item ">
                            <div class="portfolio-image">
                                <img class="border" src="<perch:blog id="image" type="image" label="Small Image" width="300" >" alt="<perch:blog id="alt" type="smarttext" label="Image description">">
                                <div class="portfolio-overlay">
                                    <div class="portfolio-desc">
                                        <h3><perch:blog type="text" id="alt" label="Description" title="true" /></h3>                                       
                                    </div>
                                    <a href="<perch:blog type="image" id="imagelarge" width="680"  label="Image Large" help="Large image" /> "
                       alt="<perch:blog type="text" id="alt" label="Description " title="true" />" class="center-icon" data-lightbox="gallery-item"  title="<perch:blog type="text" id="alt" label="Description" title="true" />"><i class="icon-line-plus"></i></a>

                                </div>
                            </div>
                        </article>

    <perch:after>
</div>
</perch:after>
</perch:repeater>

I have a lightbox gallery set up in my site.

Then I used Perch blocks to call this into the post.html blog template (templates blog). I positioned this just below the main Post description I also added a content region using blogs so some text could be added below the gallery.

Thanks again for your help. Vee

<perch:blocks>      
<perch:block label="Blog Gallery" type="gallery" icon="photo">
    <perch:template path="content/blog-image-gal.html" rescope="parent"  />   
</perch:block>
<perch:block type="text" label="Text">
   <perch:blog id="bloggallerytext" type="textarea" label="Gallery Text"  editor="ckeditor" html=“true” size="xxl autowidth"  />
  </perch:block>
</perch:blocks>