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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
<!--?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
?-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php
$siteurl = $_SERVER['HTTP_HOST'];
if($siteurl == "deeptwisty.com") {
echo '<link rel="icon" type="image/x-icon" href="../favicon.ico"><title>deep twisty official NFTs</title><style>@font-face { font-family: "Ubuntu"; src: url(../ubuntu.ttf); } :root { --stdfont: "Ubuntu", Century Gothic,CenturyGothic,AppleGothic,sans-serif; } </style>';
} elseif($siteurl == "isopod.cool") {
echo '<link rel="icon" type="image/x-icon" href="../../favicon.ico"><title>niceopod official NFTs</title><style>:root { --stdfont: mono, monospace; } </style>';
}
?>
<style>
:root {
--shadowcolor: #00000099;
--imagesperrow: 4;
}
body {
font-family: var(--stdfont);
margin: 0;
padding: 0;
background: #202020;
width: 100vw;
overflow-x: hidden;
}
.flex-container {
margin: 0;
padding: 0;
overflow-x: hidden;
display: flex;
flex-wrap: wrap;
}
@media (max-width: 1200px) {
:root {
--imagesperrow: 3;
}
}
@media (max-width: 800px) {
:root {
--imagesperrow: 2;
}
}
a {
height: calc(100vw / var(--imagesperrow));
width: calc(100vw / var(--imagesperrow));
color: transparent;
text-decoration: none;
background-position: center;
background-size: 100%;
padding: 2rem;
transition-duration: 0.5s;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 0 0 var(--shadowcolor) inset;
}
a span {
text-align: center;
}
input[type="checkbox"]:checked + label a {
--shadowcolor: #000000ef;
}
a:hover, input[type="checkbox"]:checked + label a {
color: white;
background-size: 115%;
/*box-shadow: 0 calc(100vw / var(--imagesperrow)) 0 0 var(--shadowcolor) inset;*/
box-shadow: 0 0 0 calc(100vw / var(--imagesperrow) / 2) var(--shadowcolor) inset;
}
.caption {
padding: 10px;
padding-top: 6px;
height: 100%;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<?php
$imagetimes = Array();
function test_image($name) { // Returns true if a file is an image (png or gif), false otherwise
return (strpos($name, ".png") > 0 or strpos($name, ".gif") > 0);
}
function imagetime($file) { // This needs to return a Unix timestamp.
global $imagetimes;
if(!$imagetimes[$file]) {
$imagetimes[$file] = filemtime($file);
}
return $imagetimes[$file];
}
$images = array_filter(scandir("."), "test_image"); // Generate array of every image in the directory by filename
usort($images, function($a, $b) { // Sort images by modification date of the files
return imagetime("$b") - imagetime("$a");
});
$datecounts = array();
foreach($images as $im) { // Generate list of dates and how many images have them
$mt = date("Y-m-d", imagetime("$im")); // File modification date in ISO format
if($datecounts[$mt]) {
$datecounts[$mt]++;
} else {
$datecounts[$mt] = 1;
}
}
$pmt = $mt;
foreach($images as $im) { // Loops through each image and echoes it to the page
$no = substr($im, 0, strpos($im, ".")); // Filename with extension stripped
$mt = date("Y-m-d", imagetime("$im")); // File modification date in ISO format
$is = getimagesize("$im");
$ist = $is[0] . "×" . $is[1] . "px"; // Image size formatted as X×Ypx
$cl = "";
if($datecounts[$mt] > 1) { // If there's more than one image published on the same date, merge them into a single thumbnail that can be clicked to reveal the full set. Would have done this based on names, but that would have been much harder. Might do that later.
if($pmt != $mt) {
echo "<style>.d$mt { display: none; } #show$mt:checked ~ .d$mt { display: flex; } #show$mt + label:hover a { cursor: pointer; }</style><input type='checkbox' style='display: none;' id='show$mt'></input>";
$tn = $no;
if(file_exists("thumbs/$mt.png")) { // Use the same image for the group thumbnail as the first image in the group. If there's a thumbnail named with the date in question, use that instead.
$tn = $mt;
}
echo "<label for='show$mt'><a style='background-image:url(thumbs/$tn.png);'><span>...</span></a></label>";
$pmt = $mt;
}
$cl = " class='d$mt'";
}
echo "<a href='$im' style='background-image:url(thumbs/$no.png);'$cl><span>$im<br>$mt • $ist</span></a>";
}
?>
</div>
</body>
</html>
|
