Permalink
Browse files

Provide a solution for no-javascript

This involves replacing the h2 in index.html with stuff that's shows the
thumbnails and links to the images, providing alt text and title
attributes based on the first line of the caption. It also uses some CSS
tricks to arrange the thumbnails in columns based on the width of the
display.

Hopefully this will help users linking to their gallery using social
media. At least Google+ seems to pick it up.
  • Loading branch information...
kensanata committed Jul 18, 2016
1 parent 004fd77 commit 46a023a37dc02878a301495e94990f37cf44fcf9
Showing with 105 additions and 0 deletions.
  1. +47 −0 album/index.css
  2. +39 −0 fgallery
  3. +19 −0 view/index.css
View
@@ -50,3 +50,50 @@ h2
text-align: center;
outline: none;
}
#photos {
/* Prevent vertical gaps */
line-height: 0;
-webkit-column-count: 8;
-webkit-column-gap: 0px;
-moz-column-count: 8;
-moz-column-gap: 0px;
column-count: 8;
column-gap: 0px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}
@media (max-width: 1200px) {
#photos {
-moz-column-count: 7;
-webkit-column-count: 7;
column-count: 7;
}
}
@media (max-width: 1000px) {
#photos {
-moz-column-count: 6;
-webkit-column-count: 6;
column-count: 6;
}
}
@media (max-width: 800px) {
#photos {
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
}
}
@media (max-width: 400px) {
#photos {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
View
@@ -875,4 +875,43 @@ unless(open($fd, '>:raw', "$out/data.json")) {
print($fd encode_json(\%json));
close($fd);
# provide alternative for nojavascript
my $html = join("\n\t", map {
my $props = $_;
my $caption = $props->{'caption'} ? $props->{'caption'}[0] : "";
my $root = $props->{root};
my $fbase = "$root.$ext";
my $file = $props->{'file'};
# no alt text or title attribute with caption?
qq{<a href="imgs/$fbase" title="$caption">}
. qq{<img src="thumbs/$fbase" alt="$caption"/></a>}
} @aprops);
my $index = slurp("$out/index.html");
$index =~ s!<h2>.*?</h2>!<div id="photos">\n\t$html\n </div>!;
unless(open($fd, ">:encoding($ENCODING)", "$out/index.html")) {
fatal("cannot write new index file: $!");
}
print($fd $index);
close($fd);
# don't append on repeated runs
my $css = slurp("$out/index.css");
if ($css !~ /\n\@media (max-width: \d+px)\n #photos/) {
unless(open($fd, ">>:raw", "$out/index.css")) {
fatal("cannot append to new css file: $!");
}
for (reverse 1..10) {
print($fd sprintf(q!
@media (max-width: %dpx) {
#photos {
-moz-column-count: %d;
-webkit-column-count: %d;
column-count: %d;
}
}!, ($_ + 0.5) * $minthumb[0], $_, $_, $_));
}
close($fd);
}
print("completed\n");
View
@@ -343,3 +343,22 @@ img
{
background: url(cut-mov.png) top left repeat-y, url(cut-mov.png) top right repeat-y;
}
/* noscript environment, based on https://css-tricks.com/seamless-responsive-photo-grid/ */
#photos {
/* Prevent vertical gaps */
line-height: 0;
/* max number of columns */
-webkit-column-count: 11;
-webkit-column-gap: 0px;
-moz-column-count: 11;
-moz-column-gap: 0px;
column-count: 11;
column-gap: 0px;
}
#photos img {
/* Just in case there are inline attributes */
width: 100% !important;
height: auto !important;
}

0 comments on commit 46a023a

Please sign in to comment.