Use links?

[rctneil]

Hey,

I have added some links into my caption but they don't show up. Are links not allowed?

[thkukuk]

I have the same question, how to add URLs/links in the caption? If I use "<a href=..." the URL is shown in the image thumbnail and photoswipe seems to think it's an additional image to show. But it's never shown in the caption text.

[dimsemenov]

There is an example in the demo, you can check the HTML file.

<div class="pswp-gallery__item">
  <a  
    href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-2500.jpg" 
    data-pswp-width="2500" 
    data-pswp-height="1668" 
    target="_blank">
    <img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-200.jpg" alt="Demo image 4" />
  </a>
  <div class="pswp-caption-content">
    Short caption with <a href="https://example.com" target="_blank">the link</a>.
  </div>
</div>

childSelector: '.pswp-gallery__item',

[tianmengzhe]

When I use data separation, I use lightbox.loadAndOpen(1) to open the preview, how do I use the plugin

[nicokaiser]

Okay, I figured out how to do this:

• Create a <div> around the image link
• Move the gallery-item class to the new div
• Inside the div, create the pswp-caption-content span

So gallery.html might look something like this:

<section class="gallery">
  <div id="gallery" style="visibility: hidden; height: 1px; overflow: hidden">
    {{ $images := slice }}
    {{ range $image :=  .Resources.ByType "image" }}
      {{ $title := "" }}
      {{ with $image.Exif }}
        {{ with .Tags.ImageDescription }}
          {{/* Title from EXIF ImageDescription */}}
          {{ $title = . }}
        {{ end }}
      {{ end }}
      {{ if ne $image.Title $image.Name }}
        {{/* Title from front matter */}}
        {{ $title = $image.Title }}
      {{ end }}
      {{ $images = $images | append (dict
        "Name" $image.Name
        "Title" $title
        "image" $image
        )
      }}
    {{ end }}
    {{ range sort $images (.Params.sort_by | default "Name") (.Params.sort_order | default "asc") }}
      {{ $image := .image }}
      {{ $thumbnail := $image.Filter (slice images.AutoOrient (images.Process "fit 600x600")) }}
      {{ $full := $image.Filter (slice images.AutoOrient (images.Process "fit 1600x1600")) }}
      {{ $color := index $thumbnail.Colors 0 | default "transparent" }}
      <div class="gallery-item">
        <a href="{{ $image.RelPermalink }}" data-pswp-src="{{ $full.RelPermalink }}" data-pswp-width="{{ $full.Width }}" data-pswp-height="{{ $full.Height }}" title="{{ .Title }}" itemscope itemtype="https://schema.org/ImageObject" style="aspect-ratio: {{ $thumbnail.Width }} / {{ $thumbnail.Height }}">
          <figure style="background-color: {{ $color }}; aspect-ratio: {{ $thumbnail.Width }} / {{ $thumbnail.Height }}">
            <img class="lazyload" width="{{ $thumbnail.Width }}" height="{{ $thumbnail.Height }}" data-src="{{ $thumbnail.RelPermalink }}" alt="{{ .Title }}" />
          </figure>
          <meta itemprop="contentUrl" content="{{ $image.RelPermalink }}" />
          {{ with site.Params.Author }}
            <span itemprop="creator" itemtype="https://schema.org/Person" itemscope>
              <meta itemprop="name" content="{{ site.Params.Author.name }}" />
            </span>
          {{ end }}
        </a>
        {{ if $image.Exif }}
          <span class="pswp-caption-content">
            {{ with .Title }}{{ . }}<br />{{ end }}
            {{ with $image.Exif.Tags }}
              {{ if .Model }}
                {{ .Make }} {{ .Model }} &middot;
              {{ end }}
              {{ with .FocalLength }}{{ . }}mm &middot;{{ end }}
              {{ with .ApertureValue }}f/{{ div (math.Round (mul (float .) 10)) 10 }}{{ end }}
              {{ with .ExposureTime }}{{ . }}s &middot;{{ end }}
              {{ with .ISO }}ISO {{ . }}{{ end }}
              {{ with $image.Exif.Long }}
                &middot; <a href="https://www.google.com/maps/place/{{ $image.Exif.Lat }},{{ $image.Exif.Long }}">Map</a>
              {{ end }}
            {{ end }}
          </span>
        {{ end }}
      </div>
    {{ end }}
  </div>
</section>