Sign in

Show post content in index.hbs

  • This topic has 5 replies, 2 voices, and was last updated 6 months, 1 week ago by .
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #5856
    Yaroslav

    Hi friends! Wish everybody good working days! As always, I need a help of our friendly community, that always helps me.

    – I have an index file with six different sections. In first section I have content, that is shown on the main page in full-screen mode. Just simple title, picture on background and navigation.

    – The rest of five sections are hidden and when you are clicking on navigation from first section, they are shown with animation.

    – For each of five sections I created posts. Content is simple: title, gallery. Each post have its special tag.

    Now I want to get this posts content in my index file in sections.

    I decided that will do this with a help of

    ——————————————————

    {{#getPostsByTags (concatenate “count=8&tag_as=id” “&tags=”@config.custom.ClubTagDropdown
    “&orderby=modifiedAt&ordering=asc”)}}

    content
    {{/getPostsByTags}}
    inside of this construction I copied all from post.hbs

    Now in this sections I can see post content but it works not correct. When I am clicking on photo from gallery, big photo is shown but gallery functional is not working.

    If just to open post like we always do – gallery is working correct.

    So QUESTION: how to bring gallery from post in section of index file? Maybe some other mechanism of what am I doing wrong?

    I hope I explained my thoughts good and detailed. Will be happy for advices and help

     

    #5857
    Bob

    The gallery script and CSS files are loaded only for the post pages and when you select to display the post on the homepage.
    To work gallery in your case go to the head.hbs and footer.hbs file ‎⁨(Documents ▸ ⁨Publii⁩ ▸ ⁨sites⁩ ▸ ⁨YOUR_SITE ▸ ⁨input⁩ ▸ ⁨themes⁩ ▸ ⁨YOUR_THEME ▸ partials) and change the way it works.

    For example:, change this part:

    {{#checkIf @config.custom.frontSource '==' "post"}}
    {{#checkIf @config.custom.frontGallery '==' true}}
    {{#is "index"}}
    <style>	
    {{#checkIf @config.custom.galleryLightboxStyle '==' "pswp--dark" }}
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left:before,
    .pswp--svg .pswp__button--arrow--right:before {
    background-image: url({{@website.assetsUrl}}/svg/gallery-icons-light.svg);
    }
    {{else}}
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left:before,
    .pswp--svg .pswp__button--arrow--right:before {
    background-image: url({{@website.assetsUrl}}/svg/gallery-icons-dark.svg);
    }		
    {{/checkIf}}
    </style>	
    {{/is}}	
    {{/checkIf}}
    {{/checkIf}}

    to:

    {{#is "index"}}
    <style>	
    {{#checkIf @config.custom.galleryLightboxStyle '==' "pswp--dark" }}
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left:before,
    .pswp--svg .pswp__button--arrow--right:before {
    background-image: url({{@website.assetsUrl}}/svg/gallery-icons-light.svg);
    }
    {{else}}
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left:before,
    .pswp--svg .pswp__button--arrow--right:before {
    background-image: url({{@website.assetsUrl}}/svg/gallery-icons-dark.svg);
    }		
    {{/checkIf}}
    </style>	
    {{/is}}	
    

    In the same way, edit the gallery script part in the footer.hbs file.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #5858
    Yaroslav

    Bob, it is totally great! Everything is working now. Not from the first time, but I figured out ))

    Thank you!

    #5865
    Yaroslav

    Bob, I was happy too early. I tried to solve this myself and tried 8 times in different way, but not working correct. I am doing something wrong. I did like you said and it works only for first section. But the rest of sections are working not correct. I will try to explain in details:

    As I wrote from the beginning I have four sections in index file:

    <section class="club-section"></section> 
    <section class="events-section"></section> 
    <section class="private-section"></section> 
    <section class="food-section"></section>

    in each of this sections I added:

    {{#getPostsByTags (concatenate "count=8&tag_as=id" "&tags="@config.custom.ClubTagDropdown
    "&orderby=modifiedAt&ordering=asc")}}
    {{> post-head}}
    <article class="post">
    <header class="post__header">
    <h3>{{title}}</h3>
    </header>
    
    {{#if @config.custom.lazyLoad}} {{{lazyLoadForContentImages text @config.custom.lazyLoadEffect}}} {{else}} {{{text}}} {{/if}}
    <footer class="post__footer hover-target">
    </footer> </article> {{> post-footer}} {{/getPostsByTags}}

    in post-head I did like you said and changed gallery code to this:

    {{#is "index"}}
    {{#if hasGallery}}
    <link rel="stylesheet" href="{{css "photoswipe.css" }}">
    {{/if}}
    {{/is}}
    {{jsonLD}}
    {{#is "index"}}
    <script>
    window.addEventListener(
    'load',
    function load() {
    window.removeEventListener('load', load, false);
    document.body.classList.remove('js-loading');
    },
    false);
    </script>
    {{/is}}
    {{#if @config.custom.lazyLoad}}
    <script async src="{{js "lazysizes.min.js"}}"></script>
    {{/if}}
    {{#is "index"}}
    <style>
    {{#checkIf @config.custom.galleryLightboxStyle '==' "pswp--dark" }}
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left:before,
    .pswp--svg .pswp__button--arrow--right:before {
    background-image: url({{@website.assetsUrl}}/svg/gallery-icons-light.svg);
    }
    {{else}}
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left:before,
    .pswp--svg .pswp__button--arrow--right:before {
    background-image: url({{@website.assetsUrl}}/svg/gallery-icons-dark.svg);
    }
    {{/checkIf}}
    </style>
    {{/is}}

    In post-footer I also did like you said and changed to this:

    {{#is "index"}}
    {{#if hasGallery}}
    {{> photoswipe}}
    {{/if}}
    {{/is}}

    I did this way in each section. I was happy because it works for the first section. But when I did it with the rest of the sections, in rest it works not correct. In rest of sections it opens not in front of the gallery, but in the back of the whole section.

    I don’t understand why it works good for first section but not for the rest? I tried to give the whole four sections common wrapper and place post-head and post-footer there, but it is not working. I tried to play with this idea and wrapper, but everytime it works not correct.

    I am using portfolio theme.

    If it is not enough, I can upload it to netlify.

    Please, Save me!

     

     

    #5868
    Yaroslav

    After trying more than 15 times, I solved this moment. I think that it is still not elegant, but it works both local and on hosting and both mobile and desktop. But deep inside of me there is a feeling that it can be easier and more elegant way. If you will have some free time, I will be glad to hear, but I understand if not.

    #5874
    Bob

    Hi Yaroslav,

    Attach the website backup here, I will look at it.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.