Layer9
Achievement unlocked: Lightbox
Achievement unlocked: Lightbox
   3 min leitura

Uma coisa que me está a irritar no Zdoc é o espaço que se perde com as barras laterais, deixando pouco espaço ao centro para os artigos e tornando as imagens pequenas (sobretudo quando são screenshots widescreen).
Não percebo o suficiente de HTML para tentar alargar a coluna central (aparte a seta pré-definida acima que alarga a coluna do artigo mas esconde o TOC), mas posso tentar que as imagens sejam mostradas em maior tamanho quando se clica nelas.

Portanto fui a este link e configurei a biblioteca Lightbox.
Descarreguei a última release e coloquei:

  • lightbox.css em static/css/
  • lightbox.jsem static/js/
    Acrescentei no fim deste ficheiro:
1
2
3

// ========= lightbox
<link rel="stylesheet" href="/css/lightbox.css">
// ==================

Acrescentei antes do tag </body> neste ficheiro:

1
2
3
4
5
6
7
8

<!-- /lightbox -->
	<script src="https://code.jquery.com/jquery-3.4.1.min.js" 
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
        crossorigin="anonymous">
    </script>
    <script src="/js/lightbox.js"></script>
    <link rel="stylesheet" href="/css/lightbox.css">
<!-- /lightbox -->

Criei um shortcode lightbox, que aceita as mesmas opções do shortcode figure em que se baseia:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

{{ if .Get "caption" }}
  {{ $.Scratch.Set "caption" (.Get "caption") }}
{{ else if .Get "alt" }}
  {{ $.Scratch.Set "caption" (.Get "alt") }}
{{ end }}
<!-- resolve absolute image path -->
{{ $permalink := $.Page.Permalink }}
{{ $image := .Get "src" }}
{{ $image_link_absolute := (findRE "^/" $image) }}
<figure
  {{ with .Get "class" }}class="{{.}}"{{ end }}
  {{ with .Get "width" }}style="width: {{ . }};"{{ end }}
  {{ with .Get "height" }}style="height: {{ . }};"{{ end }}
  >
    <a 
      {{ if .Get "lightbox" }}
        data-lightbox="{{ .Get "lightbox" | markdownify | plainify }}"
      {{ else }}
        data-lightbox="image-{{ $image }}"
      {{ end }}
      {{ if $image_link_absolute }}
        href="{{ $image | absURL }}"
      {{ else }}
        href="{{ (printf "%s%s" $permalink $image) }}"
      {{ end }}
    {{ with .Get "target" }} target="{{ . }}"{{ end }}
    {{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
  <img
      {{ if $image_link_absolute }}
        src="{{ $image | absURL }}"
      {{ else }}
        src="{{ (printf "%s%s" $permalink $image) }}"
      {{ end }}
        {{ if .Get "alt" }}alt="{{ .Get "alt" | markdownify | plainify }}"
        {{ else if .Get "caption" }}alt="{{ .Get "caption" | markdownify | plainify }}"
        {{ end }}
        {{ with .Get "align" }}align="{{ . }}"{{ end }}
         />
    </a>
  <!-- caption and attr-->
  {{ if ($.Scratch.Get "caption") }}
    <figcaption>
      <span class="img--caption">
        Figure {{ $.Page.Scratch.Get "fig" }}. {{ $.Scratch.Get "caption" | markdownify | plainify }}
        {{ if .Get "attr" }}
          [{{- with .Get "attrlink"}}<a href="{{ . }}">{{ end }}{{ .Get "attr" | markdownify }}{{ if .Get "attrlink"}}</a>{{ end -}}]
        {{ end }}
      </span>
    </figcaption>
  {{ end }}
</figure>
{{ .Page.Scratch.Add "fig" 1 }}
{{ $.Scratch.Delete "caption"}}

E está feito, tenho o efeito lightbox activado!
Clique na imagem em baixo para experimentar:

Neste artigo