2023-03-17 05:38:54 +00:00
<!-- ? php
ini_set ( 'display_errors' , 1 );
ini_set ( 'display_startup_errors' , 1 );
error_reporting ( E_ALL );
? -->
2023-01-10 04:57:46 +00:00
<! 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 : 100 vw ;
overflow - x : hidden ;
}
. flex - container {
margin : 0 ;
padding : 0 ;
overflow - x : hidden ;
display : flex ;
flex - wrap : wrap ;
}
@ media ( max - width : 1200 px ) {
: root {
-- imagesperrow : 3 ;
}
}
@ media ( max - width : 800 px ) {
: root {
-- imagesperrow : 2 ;
}
}
a {
height : calc ( 100 vw / var ( -- imagesperrow ));
width : calc ( 100 vw / var ( -- imagesperrow ));
color : transparent ;
text - decoration : none ;
background - position : center ;
background - size : 100 % ;
padding : 2 rem ;
transition - duration : 0.5 s ;
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 ( 100 vw / var ( -- imagesperrow ) / 2 ) var ( -- shadowcolor ) inset ;
}
. caption {
padding : 10 px ;
padding - top : 6 px ;
height : 100 % ;
border - bottom - right - radius : 10 px ;
}
</ style >
</ head >
< body >
< div class = " flex-container " >
< ? php
2023-03-17 05:38:54 +00:00
$imagetimes = Array ();
2023-01-10 04:57:46 +00:00
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 );
}
2023-03-17 05:38:54 +00:00
function imagetime ( $file ) { // This needs to return a Unix timestamp.
global $imagetimes ;
if ( ! $imagetimes [ $file ]) {
$imagetimes [ $file ] = filemtime ( $file );
}
return $imagetimes [ $file ];
}
2023-01-10 04:57:46 +00:00
$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
2023-03-17 05:38:54 +00:00
return imagetime ( " $b " ) - imagetime ( " $a " );
2023-01-10 04:57:46 +00:00
});
$datecounts = array ();
foreach ( $images as $im ) { // Generate list of dates and how many images have them
2023-03-17 05:38:54 +00:00
$mt = date ( " Y-m-d " , imagetime ( " $im " )); // File modification date in ISO format
2023-01-10 04:57:46 +00:00
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
2023-03-17 05:38:54 +00:00
$mt = date ( " Y-m-d " , imagetime ( " $im " )); // File modification date in ISO format
2023-01-10 04:57:46 +00:00
$is = getimagesize ( " $im " );
$ist = $is [ 0 ] . " × " . $is [ 1 ] . " px " ; // Image size formatted as X×
$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 ;
2024-08-08 07:13:36 +00:00
if ( file_exists ( " thumbs/ $mt .jpg " )) { // 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.
2023-01-10 04:57:46 +00:00
$tn = $mt ;
}
2024-08-08 07:13:36 +00:00
echo " <label for='show $mt '><a style='background-image:url(thumbs/ $tn .jpg);'><span>...</span></a></label> " ;
2023-01-10 04:57:46 +00:00
$pmt = $mt ;
}
2023-03-17 05:38:54 +00:00
$cl = " class='d $mt ' " ;
2023-01-10 04:57:46 +00:00
}
2024-08-08 07:13:36 +00:00
echo " <a href=' $im ' style='background-image:url(thumbs/ $no .jpg);' $cl ><span> $im <br> $mt • $ist </span></a> " ;
2023-01-10 04:57:46 +00:00
}
?>
</ div >
</ body >
</ html >
