search

GjjvdBurg / HugoPhotoSwipe

Command-line tool for easy PhotoSwipe galleries in Hugo
https://gertjanvandenburg.com/blog/hugophotoswipe/
GNU General Public License v3.0
128 stars 15 forks source link

Click on first thumbnail not detected when no text before first picture #27

Closed catkfr closed 6 years ago

catkfr commented 6 years ago

Hello,

Very happy with the new updates to hps! Thanks!

Here is a sample .md file that was initially generated by hps.

+++
title = "something"
date = "2018-04-22"
tags = ["gallery"]
image = "static/cover.jpg"
+++
bla

{{< wrap >}}
{{< photo href="/pics/test/large/20170901-img_7122_1600x901.jpg" largeDim="1600x901" smallUrl="/pics/test/small/20170901-img_7122_800x450.jpg" smallDim="800x450" alt="None" thumbSize="256x256" thumbUrl="/pics/test/thumb/20170901-img_7122_256x256.jpg" caption="" copyright="" >}}

... #Other photos 
{{< /wrap >}}

This example only has one picture where as the actual album has 69. When the text bla is present, everything works as expected. When there is no text (remove bla), clicking on the first picture does nothing. Clicking on the second picture opens the first picture.

And if I add 8 paragraphs, it will create 8 <p>text</p>sections and it will open photo 8 when I click on the first image.

I could not find in pswp_gallery.js what is causing this issue.

GjjvdBurg commented 6 years ago

Hi @catkfr , thanks for reporting this! What version of Hugo are you using? This issue might be related to issue 1642 of Hugo. Normally the {{< wrap >}} tags solve the problem, but perhaps not in this case. It would be great if you could share (part of) the generated HTML so we can debug this.

catkfr commented 6 years ago

Hi @GjjvdBurg I am using Hugo version v0.39

Here is some of the generated HTML.

<!DOCTYPE html>
<html lang="fr-fr">
<head>
    <title>
       Title
    </title>
    <meta name="generator" content="Hugo 0.39" />
</head>
<body class="nav-closed">

  <div class="nav">
    <h3 class="nav-title">Menu</h3>
    <a href="#" class="nav-close">
        <span class="hidden">Close</span>
    </a>
    <ul>

            <li class="nav-opened" role="presentation">
                <a href="https://...">Link 1 </a>
            </li>

            <li class="nav-opened" role="presentation">
              <a href="https://...">Link 2 </a>
            </li>

            <!-- ... other links -->

    </ul>

    <a class="subscribe-button icon-feed" href="https://.../index.xml">Subscribe</a>

</div>
<span class="nav-cover"></span>

 <div class="site-wrapper">
  <header class="main-header post-head" style="background-image: url(https://.../cover.jpg)">

  <nav class="main-nav overlay clearfix">
      <a class="blog-logo" href="https://.../"><img src="https://...//static/logo.jpg" alt="Home" /></a>
      <a class="menu-button" href="#"><span class="burger">&#9776;</span><span class="word">Menu</span></a>
  </nav>
</header>

<main class="content" role="main">
  <article class="post post">
    <header class="post-header">
        <h1 class="post-title">Post Title</h1>
        <small></small>

        <section class="post-meta">

          <time class="post-date" datetime="2018-04-22T00:00:00Z">
            Apr 22, 2018
          </time>

          <span class="post-tag small"><a href="https://.../tags/gallery/">#gallery</a></span>

        </section>
    </header>

    <section class="post-content">

            <div class="gallery" itemscope itemtype="https://schema.org/ImageGallery">
              <p>Paragraph 1</p>

              <p>Paragraph 2</p>

           <!-- ... other paragraphs -->

<figure itemprop="associatedMedia" itemscope
itemtype="https://schema.org/ImageObject">
  <a href="https://.../pics/gallery/large/20170901-img_7122_1600x901.jpg" itemprop="contentUrl" data-size="1600x901" data-medium-url="/pics/gallery/small/20170901-img_7122_800x450.jpg" data-medium-size="800x450">
    <img alt="None" data-size="256x256" itemprop="thumbnail" src="https://.../pics/gallery/thumb/20170901-img_7122_256x256.jpg">
  </a>
  <figcaption itemprop="caption description">

  </figcaption>
</figure>

<figure itemprop="associatedMedia" itemscope
itemtype="https://schema.org/ImageObject">
  <a href="https://.../pics/gallery/large/20170902_160508-img_3528_1600x1200.jpg" itemprop="contentUrl" data-size="1600x1200" data-medium-url="/pics/gallery/small/20170902_160508-img_3528_800x600.jpg" data-medium-size="800x600">
    <img alt="None" data-size="256x256" itemprop="thumbnail" src="https://.../pics/gallery/thumb/20170902_160508-img_3528_256x256.jpg">
  </a>
  <figcaption itemprop="caption description">

  </figcaption>
</figure>

           <!-- ... other pictures -->

            </div>

            <div class="pswp" role="dialog" aria-hidden="true" tabindex="-1">
              <div class="pswp__bg"></div>
              <div class="pswp__scroll-wrap">
                <div class="pswp__container">
                  <div class="pswp__item"></div>
                  <div class="pswp__item"></div>
                  <div class="pswp__item"></div>
                </div>
                <div class="pswp__ui pswp__ui--hidden">
                  <div class="pswp__top-bar">
                    <div class="pswp__counter"></div>
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                    <button class="pswp__button pswp__button--share" title="Share"></button>
                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                    <div class="pswp__preloader">
                      <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                          <div class="pswp__preloader__donut"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div>
                  </div>
                  <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
                  <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>
                  <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                  </div>
                </div>
              </div>
            </div>

            <script type="application/javascript" src="https://.../js/pswp_gallery.js"></script>

        </section>

  <footer class="post-footer">

    <figure class="author-image">
        <a class="img" href="https://.../" style="background-image: url(https://...//static/something.jpg)"><span class="hidden">somepicture</span></a>
    </figure>

<section class="author">
  <h4><a href="https://.../">author</a></h4>

  <p>Read <a href="https://.../">more posts</a> by this author.</p>

  <div class="author-meta">
    <span class="author-location icon-location">Here</span>

  </div>
</section>

  </footer>
</article>

</main>
    <footer class="site-footer clearfix">
        <section class="copyright"><a href="">Title</a> All rights reserved - 2017</section>

        <section class="poweredby">Proudly generated by <a class="icon-hugo" href="http://gohugo.io">HUGO</a>, with <a class="icon-theme" href="https://github.com/vjeantet/hugo-theme-casper">Casper</a> theme</section>

    </footer>
    </div>
    <script type="text/javascript" src="https://.../js/jquery.js"></script>
    <script type="text/javascript" src="https://.../js/jquery.fitvids.js"></script>
    <script type="text/javascript" src="https://.../js/index.js"></script>

    <script type="application/javascript" src="https://.../js/photoswipe.min.js"></script>
    <script type="application/javascript" src="https://.../js/photoswipe-ui-default.min.js"></script>

</body>
</html>

In my previous galleries, starting a year ago, I always had one paragraph so never ran into the issue of the first picture. But I always had issues with the number of the photo (opening another photo then the one I clicked on).

GjjvdBurg commented 6 years ago

@catkfr Thanks for providing the HTML. As you can see the paragraphs that you add are under the <div class="gallery" ... . I suspect that this makes PhotoSwipe fail. To fix this, you can either remove the paragraphs, change the JS code provided for PhotoSwipe, or use the work-in-progress feature using data-files with HugoPhotoSwipe as discussed in issue #24. If you'd like to use this last option, let me know so that I have an incentive to finish this feature soon.

catkfr commented 6 years ago

This feature seems awesome! Integrating a gallery within a post is exactly the use case I am trying to replicate!

I understand that modifying the js can solve opening the wrong picture. I just need to find how to test if the element is a

element.

But how about when there are no paragraphs? How come nothing happens when I click on the first imge of the gallery?

On Wed 25 Apr 2018 at 02:43, Gertjan van den Burg notifications@github.com wrote:

@catkfr https://github.com/catkfr Thanks for providing the HTML. As you can see the paragraphs that you add are under the <div class="gallery" ... . I suspect that this makes PhotoSwipe fail. To fix this, you can either remove the paragraphs, change the JS code provided for PhotoSwipe, or use the work-in-progress feature using data-files with HugoPhotoSwipe as discussed in issue #24 https://github.com/GjjvdBurg/HugoPhotoSwipe/issues/24. If you'd like to use this last option, let me know so that I have an incentive to finish this feature soon.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/GjjvdBurg/HugoPhotoSwipe/issues/27#issuecomment-384055822, or mute the thread https://github.com/notifications/unsubscribe-auth/AEoDRz7wwuB5OuQm1RVdrDPlNmGb1gJEks5tr4B0gaJpZM4Te7L0 .

GjjvdBurg commented 6 years ago

@catkfr Alright, I'll see if I can find some time to get the data-files feature integrated fully.

With regards to your other question, that's hard to answer for me without having access to the full source. Hopefully you'll be able to debug this yourself. Have you tried looking at the wiki to ensure your setup is correct?

catkfr commented 6 years ago

Hi again,

I found a way to solve this issue for me by adding a simple if statement. Just had to find how to do this in javascript...

Here is the modification I did:

        // find index of clicked item by looping through all child nodes
        // alternatively, you may define index via data- attribute
        var clickedGallery = clickedListItem.parentNode,
    childNodes = clickedListItem.parentNode.childNodes,
    numChildNodes = childNodes.length,
    nodeIndex = 0,
    index;

        for (var i = 0; i < numChildNodes; i++) {
            if(childNodes[i].nodeType !== 1) {
                continue;
            }

            if(childNodes[i].nodeName == 'P') { // added by catkfr
                continue;
            }

            if(childNodes[i] === clickedListItem) {
                index = nodeIndex;
                break;
            }
            nodeIndex++;
        }