Add hugo-easy-gallery (rev 2935729), try one post with it
This commit is contained in:
Chris Hodapp
parent
dbd160794d
commit
6bbbd1dc4e
@ -10,12 +10,12 @@ _Modularity_ and _abstraction_ feature prominently wherever computers
|
||||
are involved. This is meant very broadly: it applies to designing
|
||||
software, using software, integrating software, and to a lot of
|
||||
hardware as well. It applies elsewhere, and almost certainly
|
||||
originated there first, however, it appears to be particularly
|
||||
crucial around software.
|
||||
originated there first, however, it appears especially crucial around
|
||||
software.
|
||||
|
||||
Definitions, though, are a bit vague (including anything in this
|
||||
post). My goal in this post isn't to try to (re)define them, but to
|
||||
explain a bit of their essence, and expand on a few theses:
|
||||
explain their essence and expand on a few theses:
|
||||
|
||||
- Modularity arises naturally in a wide array of places.
|
||||
- Modularity and abstraction are intrinsically connected.
|
||||
@ -60,9 +60,10 @@ different from being vague. The purpose of abstraction is not to be
|
||||
vague, but to create a new semantic level in which one can be
|
||||
absolutely precise." Joel Spolsky, in one of few instances of me
|
||||
actually caring what he said, also has a blog post from 2002 on the
|
||||
[[https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-abstractions/][Law of Leaky Abstractions]]. The [[https://en.wikipedia.org/wiki/Principle_of_least_privilege][principle of least privilege]] is
|
||||
likewise a thing. So, abstraction too has its practical and
|
||||
theoretical limitations.
|
||||
[[https://www.joelonsoftware.com/2002/11/11/the-law-of-leaky-abstractions/][Law of Leaky Abstractions]] ("All non-trivial abstractions, to some
|
||||
degree, are leaky.") The [[https://en.wikipedia.org/wiki/Principle_of_least_privilege][principle of least privilege]] is likewise a
|
||||
thing. So, abstraction too has its practical and theoretical
|
||||
limitations.
|
||||
|
||||
* How They Relate
|
||||
|
||||
@ -112,15 +113,15 @@ some details implies that a module is handling those details, that the
|
||||
details shouldn't matter, and what does matter is the abstraction one
|
||||
is using.
|
||||
|
||||
# -----
|
||||
Consider the information this module deals in, in essence.
|
||||
One of Rich Hickey's favorite topics is *composition*, and with good
|
||||
reason (and you should check out [[http://www.infoq.com/presentations/Simple-Made-Easy/][Simple Made Easy]] regardless). This
|
||||
relates as well: to *compose* things together effectively into bigger
|
||||
parts requires that they support some common abstraction.
|
||||
|
||||
In the same area, [[https://clojurefun.wordpress.com/2012/08/17/composition-over-convention/][Composition over convention]] is a good read on how
|
||||
/frameworks/ run counter to modularity: they aren't built to behave
|
||||
like modules of a larger system.
|
||||
|
||||
What is the most general form this information could be expressed in,
|
||||
without being so general as to encompass other things that are
|
||||
irrelevant or so low-level as to needlessly constrain the possible
|
||||
contexts?
|
||||
|
||||
(Aristotle's theory of definitions?)
|
||||
|
||||
# -----
|
||||
|
||||
@ -152,6 +153,33 @@ contains fewer incidental details, and more essential details.
|
||||
|
||||
# -------
|
||||
|
||||
* Information
|
||||
|
||||
I referred earlier to the abstractions themselves as both boundaries
|
||||
and communications channels. Another common view is that abstractions
|
||||
are *contracts* with a communicated and agreed purpose, and I think
|
||||
this is a useful definition too: it conveys the notion that there are
|
||||
multiple parties involved and that they are free to behave as needed
|
||||
provided that they fulfill some obligation
|
||||
|
||||
Some definitions refer directly to information, like the [[https://en.wikipedia.org/wiki/Abstraction_principle_(computer_programming)][abstraction
|
||||
principle]] which aims to reduce duplication of information which fits
|
||||
with [[https://en.wikipedia.org/wiki/Don%2527t_repeat_yourself][don't repeat yourself]] so that "a modification of any single
|
||||
element of a system does not require a change in other logically
|
||||
unrelated elements".
|
||||
|
||||
|
||||
|
||||
# ----- FIXME
|
||||
Consider the information this module deals in, in essence.
|
||||
|
||||
What is the most general form this information could be expressed in,
|
||||
without being so general as to encompass other things that are
|
||||
irrelevant or so low-level as to needlessly constrain the possible
|
||||
contexts?
|
||||
|
||||
(Aristotle's theory of definitions?)
|
||||
|
||||
* Less-Conventional Examples
|
||||
|
||||
One thing I've watched with some interest is when new abstractions
|
||||
@ -256,9 +284,6 @@ machine learning conflicts with proper modularity and abstraction.
|
||||
a good post and shows some sorts of abstraction that still exist
|
||||
at least in neural networks.)
|
||||
|
||||
[[https://clojurefun.wordpress.com/2012/08/17/composition-over-convention/][Composition over convention]] is an important read on why /frameworks/
|
||||
can also run completely counter to modularity.
|
||||
|
||||
Submitted without further comment:
|
||||
https://github.com/stevemao/left-pad/issues/4
|
||||
|
||||
@ -307,11 +332,6 @@ https://github.com/stevemao/left-pad/issues/4
|
||||
|
||||
- https://twitter.com/fchollet/status/962074070513631232
|
||||
|
||||
- How does this fit with /composition/? Does it?
|
||||
- The ability to sensibly compose things depends on them having some
|
||||
sort of well-defined, compatible boundary - right?
|
||||
- Note also /decomposition/ here, as in /decomposing/ something into
|
||||
parts.
|
||||
- [[https://mitpress.mit.edu/sites/default/files/sicp/full-text/book/book-Z-H-9.html#%25_chap_1][From SICP chapter 1 intro]]: "The acts of the mind, wherein it exerts
|
||||
its power over simple ideas, are chiefly these three: 1. Combining
|
||||
several simple ideas into one compound one, and thus all complex
|
||||
@ -338,14 +358,11 @@ https://github.com/stevemao/left-pad/issues/4
|
||||
boundaries, the abstractions that it interfaces with or that it
|
||||
implements) so that the 'inside' can change more or less freely
|
||||
without having any effect on the outside.
|
||||
- Abstractions as _contracts_ with a communicated/agreed purpose
|
||||
- Abstractions as a way of reducing the work required to add
|
||||
functionality (changes can be made just in the relevant modules, and
|
||||
other modules do not need to change to conform)
|
||||
- What is more key? Communication, information content, contracts,
|
||||
details?
|
||||
- [[https://en.wikipedia.org/wiki/Abstraction_principle_(computer_programming)][Abstraction principle]]
|
||||
- Reduce duplication of information
|
||||
- [[https://en.wikipedia.org/wiki/Don%2527t_repeat_yourself][Don't repeat yourself]]
|
||||
- [[https://simplyphilosophy.org/study/aristotles-definitions/][Aristotle & theory of definitions]]
|
||||
- this isn't right. I need to find the quote in the Durant book
|
||||
|
||||
@ -14,79 +14,14 @@ tags:
|
||||
- workfest
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{{< load-photoswipe >}}
|
||||
|
||||
It's quite different.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
People are open. Their groups are open.
|
||||
|
||||
|
||||
|
||||
|
||||
It's a difference between being pushed away from people constantly, and being pushed toward them, so one does not constantly need to fight back against the repulsion.
|
||||
|
||||
|
||||
Maybe it's the types of people. Maybe it's the environment. But it's wonderful. Maybe similar to the way I felt in Seattle when I visited there last year.
|
||||
|
||||
Months in Cincinnati and I might never meet a new friend... hours here and I've made several already.
|
||||
@ -98,6 +33,8 @@ They're out of that context. They look like they're in the context they belong.
|
||||
|
||||
My Canon camera is probably almost out of battery power, despite efforts. I should have brought the charger. But I have the Kodak too. Maybe it will show some of the picturesque terrain.
|
||||
|
||||
[](/wp_old/2008/03/img_6262.jpg)[](/wp_old/2008/03/img_6253.jpg)[](/wp_old/2008/03/img_6265.jpg)
|
||||
{{< figure src="/wp_old/2008/03/img_6262.jpg" caption="Camp AJ from one angle">}}
|
||||
{{< figure src="/wp_old/2008/03/img_6253.jpg" caption="Arriving at Camp AJ">}}
|
||||
{{< figure src="/wp_old/2008/03/img_6265.jpg" caption="Playground and climbing wall near entrance road">}}
|
||||
|
||||
(Later note: That is [Camp AJ, 2549 Sand Lick Rd, McKee, KY 40447](https://www.google.com/maps/dir/Cincinnati,+Ohio/Berea,+Kentucky/Camp+AJ,+2549+Sand+Lick+Rd,+McKee,+KY+40447/@37.488284,-84.0115257,16z/data=!4m19!4m18!1m5!1m1!1s0x884051b1de3821f9:0x69fb7e8be4c09317!2m2!1d-84.5120196!2d39.1031182!1m5!1m1!1s0x8842e18aa160b579:0xd32df1c2b2266672!2m2!1d-84.2963223!2d37.568694!1m5!1m1!1s0x884315ccbd7d479b:0x28e72c53d5d60a9d!2m2!1d-84.00718!2d37.4887543).)
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Hello, World (from Jekyll) (then from Hakyll) (then from Hugo)
|
||||
title: Hello, World (from Wordpress, then Jekyll, then Hakyll, then Hugo)
|
||||
author: Chris Hodapp
|
||||
date: "2014-02-06"
|
||||
---
|
||||
|
||||
@ -169,10 +169,10 @@ image.
|
||||
|
||||
Here's another comparison, this time a 1:1 crop from the center of an
|
||||
image (shot at 40mm with [this lens][12-40mm], whose Amazon price
|
||||
mysteriously is now $146 instead of the $23 I actually paid). Click
|
||||
the preview for a lossless PNG view, as JPEG might eat some of the
|
||||
finer details, or [here][leaves-full] for the full JPEG file
|
||||
(including raw, if you want to look around).
|
||||
mysteriously is now <span>$</span>146 instead of the <span>$</span>23
|
||||
I actually paid). Click the preview for a lossless PNG view, as JPEG
|
||||
might eat some of the finer details, or [here][leaves-full] for the
|
||||
full JPEG file (including raw, if you want to look around).
|
||||
|
||||
[{width=100%}](../assets_external/2016-10-12-pi-pan-tilt-3/leaves_test.png)
|
||||
|
||||
|
||||
@ -6,6 +6,7 @@ tags:
|
||||
- technobabble
|
||||
- go
|
||||
- golang
|
||||
toc: true
|
||||
---
|
||||
|
||||
# TODO: Link to my asyncio post
|
||||
@ -101,7 +102,7 @@ polymorphism.)
|
||||
My objections aren't unique. [[https://www.teamten.com/lawrence/writings/why-i-dont-like-go.html][Ten Reasons Why I Don't Like Golang]] and
|
||||
[[http://yager.io/programming/go.html][Why Go Is Not Good]] have criticisms I can't really disagree with.
|
||||
(Also, did you know someone put together
|
||||
https://github.com/ksimka/go-is-not-good?)
|
||||
[[https://github.com/ksimka/go-is-not-good][https://github.com/ksimka/go-is-not-good]]?)
|
||||
|
||||
All in all, though, Go is a procedural/imperative language with a lot
|
||||
of good design in language and tooling... which is great, if it's only
|
||||
|
||||
29
hugo_blag/layouts/shortcodes/figure.html
Normal file
29
hugo_blag/layouts/shortcodes/figure.html
Normal file
@ -0,0 +1,29 @@
|
||||
<!--
|
||||
Put this file in /layouts/shortcodes/figure.html
|
||||
NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
-->
|
||||
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
|
||||
{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />{{ end }}
|
||||
{{- $.Page.Scratch.Add "figurecount" 1 -}}
|
||||
<!-- use either src or link-thumb for thumbnail image -->
|
||||
{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
|
||||
<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
|
||||
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
|
||||
<img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
|
||||
</div>
|
||||
{{ with .Get "link" | default (.Get "src") }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}
|
||||
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
|
||||
<figcaption>
|
||||
{{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
|
||||
{{- if or (.Get "caption") (.Get "attr")}}
|
||||
<p>
|
||||
{{- .Get "caption" -}}
|
||||
{{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
|
||||
</p>
|
||||
{{- end }}
|
||||
</figcaption>
|
||||
{{- end }}
|
||||
</figure>
|
||||
</div>
|
||||
41
hugo_blag/layouts/shortcodes/gallery.html
Normal file
41
hugo_blag/layouts/shortcodes/gallery.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!--
|
||||
Put this file in /layouts/shortcodes/gallery.html
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
-->
|
||||
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
|
||||
{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/hugo-easy-gallery.css" />{{ end }}
|
||||
{{- $.Page.Scratch.Add "figurecount" 1 }}
|
||||
{{ $baseURL := .Site.BaseURL }}
|
||||
<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
{{- with (.Get "dir") -}}
|
||||
<!-- If a directory was specified, generate figures for all of the images in the directory -->
|
||||
{{- $files := readDir (print "/static/" .) }}
|
||||
{{- range $files -}}
|
||||
<!-- skip files that aren't images, or that inlcude the thumb suffix in their name -->
|
||||
{{- $thumbext := $.Get "thumb" | default "-thumb" }}
|
||||
{{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
|
||||
{{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }}<!-- is the current file an image? -->
|
||||
{{- if and $isimg (not $isthumb) }}
|
||||
{{- $caption := .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
|
||||
{{- $linkURL := print $baseURL ($.Get "dir") "/" .Name | absURL }}<!-- absolute URL to hi-res image -->
|
||||
{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
|
||||
{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? -->
|
||||
{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
|
||||
<div class="box">
|
||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
|
||||
<img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
|
||||
</div>
|
||||
<figcaption>
|
||||
<p>{{ $caption }}</p>
|
||||
</figcaption>
|
||||
<a href="{{ $linkURL }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
|
||||
</figure>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- else -}}
|
||||
<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
|
||||
{{ .Inner }}
|
||||
{{- end }}
|
||||
</div>
|
||||
71
hugo_blag/layouts/shortcodes/load-photoswipe.html
Normal file
71
hugo_blag/layouts/shortcodes/load-photoswipe.html
Normal file
@ -0,0 +1,71 @@
|
||||
<!--
|
||||
Put this file in /layouts/shortcodes/load-photoswipe.html
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
-->
|
||||
|
||||
<!-- prevent this shortcode from being loaded more than once per page -->
|
||||
{{ if not ($.Page.Scratch.Get "photoswipeloaded") }}
|
||||
{{ $.Page.Scratch.Set "photoswipeloaded" 1 }}
|
||||
|
||||
<!--
|
||||
*** jQuery must be loaded before load-photoswipe.js ***
|
||||
- If your template already loads jQuery in the header then you don't need to load it again here.
|
||||
- If your template already loads jQuery in the footer, then you could load load-photoswipe.js from the footer instead
|
||||
-->
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
||||
<script src="/js/load-photoswipe.js"></script>
|
||||
|
||||
<!-- Photoswipe css/js libraries -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" integrity="sha256-sCl5PUOGMLfFYctzDW3MtRib0ctyUvI9Qsmq2wXOeBY=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" integrity="sha256-BFeI1V+Vh1Rk37wswuOYn5lsTcaU96hGaI7OUVCLjPc=" crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Root element of PhotoSwipe. Must have class pswp. -->
|
||||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<!-- Background of PhotoSwipe.
|
||||
It's a separate element, as animating opacity is faster than rgba(). -->
|
||||
<div class="pswp__bg"></div>
|
||||
<!-- Slides wrapper with overflow:hidden. -->
|
||||
<div class="pswp__scroll-wrap">
|
||||
<!-- Container that holds slides.
|
||||
PhotoSwipe keeps only 3 of them in DOM to save memory.
|
||||
Don't modify these 3 pswp__item elements, data is added later on. -->
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
<div class="pswp__top-bar">
|
||||
<!-- Controls are self-explanatory. Order can be changed. -->
|
||||
<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>
|
||||
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
|
||||
<!-- element will get class pswp__preloader--active when preloader is running -->
|
||||
<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>
|
||||
{{ end }}
|
||||
159
hugo_blag/static/css/hugo-easy-gallery.css
Normal file
159
hugo_blag/static/css/hugo-easy-gallery.css
Normal file
@ -0,0 +1,159 @@
|
||||
/*
|
||||
Put this file in /static/css/hugo-easy-gallery.css
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
Grid Layout Styles
|
||||
*/
|
||||
.gallery {
|
||||
overflow: hidden;
|
||||
margin: 10px;
|
||||
max-width: 768px;
|
||||
}
|
||||
.gallery .box {
|
||||
float: left;
|
||||
position: relative;
|
||||
/* Default: 1 tile wide */
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
@media only screen and (min-width : 365px) {
|
||||
/* Tablet view: 2 tiles */
|
||||
.gallery .box {
|
||||
width: 50%;
|
||||
padding-bottom: 50%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 480px) {
|
||||
/* Small desktop / ipad view: 3 tiles */
|
||||
.gallery .box {
|
||||
width: 33.3%;
|
||||
padding-bottom: 33.3%; /* */
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 9999px) {
|
||||
/* Medium desktop: 4 tiles */
|
||||
.box {
|
||||
width: 25%;
|
||||
padding-bottom: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Transition styles
|
||||
*/
|
||||
.gallery.hover-transition figure,
|
||||
.gallery.hover-effect-zoom .img,
|
||||
.gallery:not(.caption-effect-appear) figcaption,
|
||||
.fancy-figure:not(.caption-effect-appear) figcaption {
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
/*
|
||||
figure styles
|
||||
*/
|
||||
figure {
|
||||
position:relative; /* purely to allow absolution positioning of figcaption */
|
||||
overflow: hidden;
|
||||
}
|
||||
.gallery figure {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.gallery.hover-effect-grow figure:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.gallery.hover-effect-shrink figure:hover {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.gallery.hover-effect-slidedown figure:hover {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
.gallery.hover-effect-slideup figure:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/*
|
||||
img / a styles
|
||||
*/
|
||||
|
||||
.gallery .img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.gallery.hover-effect-zoom figure:hover .img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.gallery img {
|
||||
display: none; /* only show the img if not inside a gallery */
|
||||
}
|
||||
figure a {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
figcaption styles
|
||||
*/
|
||||
.gallery figcaption,
|
||||
.fancy-figure figcaption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 75%; /* change this if you want bigger text */
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.gallery.caption-position-none figcaption,
|
||||
.fancy-figure.caption-position-none figcaption {
|
||||
display: none;
|
||||
}
|
||||
.gallery.caption-position-center figcaption,
|
||||
.fancy-figure.caption-position-center figcaption {
|
||||
top: 0;
|
||||
padding: 40% 5px;
|
||||
}
|
||||
.gallery.caption-position-bottom figcaption,
|
||||
.fancy-figure.caption-position-bottom figcaption {
|
||||
padding: 5px;
|
||||
}
|
||||
.gallery.caption-effect-fade figure:not(:hover) figcaption,
|
||||
.gallery.caption-effect-appear figure:not(:hover) figcaption,
|
||||
.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
|
||||
.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
|
||||
.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
|
||||
margin-bottom: -100%;
|
||||
}
|
||||
.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
|
||||
.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption {
|
||||
top: 100%;
|
||||
}
|
||||
figcaption p {
|
||||
margin: auto; /* override style in theme */
|
||||
}
|
||||
|
||||
80
hugo_blag/static/js/load-photoswipe.js
Normal file
80
hugo_blag/static/js/load-photoswipe.js
Normal file
@ -0,0 +1,80 @@
|
||||
/*
|
||||
Put this file in /static/js/load-photoswipe.js
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
*/
|
||||
|
||||
/* Show an alert if this js file has been loaded twice */
|
||||
if (window.loadphotoswipejs) {
|
||||
window.alert("You've loaded load-photoswipe.js twice. See https://github.com/liwenyip/hugo-easy-gallery/issues/6")
|
||||
}
|
||||
var loadphotoswipejs = 1
|
||||
|
||||
/* TODO: Make the share function work */
|
||||
$( document ).ready(function() {
|
||||
/*
|
||||
Initialise Photoswipe
|
||||
*/
|
||||
var items = []; // array of slide objects that will be passed to PhotoSwipe()
|
||||
// for every figure element on the page:
|
||||
$('figure').each( function() {
|
||||
if ($(this).attr('class') == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
|
||||
// get properties from child a/img/figcaption elements,
|
||||
var $figure = $(this),
|
||||
$a = $figure.find('a'),
|
||||
$img = $figure.find('img'),
|
||||
$src = $a.attr('href'),
|
||||
$title = $img.attr('alt'),
|
||||
$msrc = $img.attr('src');
|
||||
// if data-size on <a> tag is set, read it and create an item
|
||||
if ($a.data('size')) {
|
||||
var $size = $a.data('size').split('x');
|
||||
var item = {
|
||||
src : $src,
|
||||
w : $size[0],
|
||||
h : $size[1],
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
console.log("Using pre-defined dimensions for " + $src);
|
||||
// if not, set temp default size then load the image to check actual size
|
||||
} else {
|
||||
var item = {
|
||||
src : $src,
|
||||
w : 800, // temp default size
|
||||
h : 600, // temp default size
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
console.log("Using default dimensions for " + $src);
|
||||
// load the image to check its dimensions
|
||||
// update the item as soon as w and h are known (check every 30ms)
|
||||
var img = new Image();
|
||||
img.src = $src;
|
||||
var wait = setInterval(function() {
|
||||
var w = img.naturalWidth,
|
||||
h = img.naturalHeight;
|
||||
if (w && h) {
|
||||
clearInterval(wait);
|
||||
item.w = w;
|
||||
item.h = h;
|
||||
console.log("Got actual dimensions for " + img.src);
|
||||
}
|
||||
}, 30);
|
||||
}
|
||||
// Save the index of this image then add it to the array
|
||||
var index = items.length;
|
||||
items.push(item);
|
||||
// Event handler for click on a figure
|
||||
$figure.on('click', function(event) {
|
||||
event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
|
||||
// Get the PSWP element and initialise it with the desired options
|
||||
var $pswp = $('.pswp')[0];
|
||||
var options = {
|
||||
index: index,
|
||||
bgOpacity: 0.8,
|
||||
showHideOpacity: true
|
||||
}
|
||||
new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user