-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
144 lines (130 loc) · 5.71 KB
/
index.html
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
<?php
// ----- begin edit -----
$title = 'Photo Gallery';
$random_image_count = 5;
// ----- end edit -----
require('php/common.php');
require_once('php/custom.php');
require_once('php/search.php');
$latest_photo_library_update = $mySiteUpdate;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $title; ?></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<?php echo $title; ?>">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/styles/style.css" />
</head>
<body class="text-left">
<div class="jumbotron">
<h1>
<a href="http://nestedkeywords.com/">
Lightroom-nested-keywords
</a>
</h1>
</div>
<?php showNavBar(); ?>
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li>You are here: <a href="/index.html">Home</a></li>
<li aria-current="page"><?php echo $title; ?></li>
</ol>
</nav>
</div>
<?php
// Read our XML image database here, so we know how many images are available
require_once('php/image-database.php'); // for readImageDatabase()
$imglist = readImageDatabase( $imageDatabaseBasename );
$total_photo_library_size = count($imglist);
if (empty($total_photo_library_size)) {
showError("Internal error: No images are available in spite of all evidence to the contrary.", __FILE__, __LINE__);
}
?>
<!-- main content -->
<div class="container-fluid bg-3 text-left">
<div class="row">
<h1 id="header-text">
<?php echo $title; ?> <span class="glyphicon glyphicon-picture"></span>
</h1>
<p>A demonstration website for the Github project
<b><a href="https://github.com/barry-ha/Lightoom-nested-keywords" target="_blank">Lightroom-nested-keywords</b></a>,
providing a deep search system via structured keywords.</p>
<p>The problem we solve is how to navigate photos on the web for
medium to large image collections. Although web content management systems
(such as WordPress) have abundant plug-ins for images, none of them
help the web visitor find particular images. They leave the organization
to the webmaster to arrange them on web pages, one by one. This is fine
for up to a few dozen photos and then becomes unwieldy for both webmaster
visitors.</p>
<p>This project extends the powerful Lightroom keywording structure onto the
web. We built a keywording system that is, in concept, similar to stock photo
providers like Getty Images, iStockPhoto, ShutterStock, Dreamstime and
others.</p>
<p>The archivist will choose keywords in a tree structure (taxonomy, or
controlled vocabulary) and consistently applies them to guide visitor
navigation. This project automatically handles whatever taxonomy that it
finds in the photo's metadata.</p>
<h2>Usage</h2>
<p>Click on <a href="search.html">Photo Finder</a>
and enter keywords in the Keyword boxes, or type such things as proper names in the Text box.
Just looking around for fun? Use <a href="browse.html">Browse Images</a>
to see pages of random photos. Click on an image for larger view and for photo details.
Our structured list of keywords is found in the
<a href="keywords.html">Keyword Index</a>.
</p>
</div>
<div class="row">
<div class="col-sm-2">
<a href="search.html">Photo Finder <span class="glyphicon glyphicon-search"></span></a>
</div>
<div class="col-sm-10">
to start searching
</div>
</div>
<div class="row">
<div class="col-sm-2">
<a href="browse.html">Browse Images <span class="glyphicon glyphicon-picture"></span></a>
</div>
<div class="col-sm-10">
to wander around
</div>
</div>
<div class="row">
<div class="col-sm-2">
<a href="keywords.html">Keyword Index <span class="glyphicon glyphicon-tags"></span></a>
</div>
<div class="col-sm-10">
to see keyword tags
</div>
</div>
<div class="row">
<br/>
<p>As of <?php echo $latest_photo_library_update; ?>,
we have <?php echo number_format($total_photo_library_size); ?> photos
online.
</div>
<div class="row">
<h2>Random Images Just for Fun</h2>
<p>Shown below are
<?php echo $random_image_count; ?> random images
out of <?php echo number_format($total_photo_library_size); ?>.
Refresh this page for new random images. Enjoy!</p>
<?php
// randomize images and show the first few
$randomImageList = shuffle_with_keys($imglist, $random_image_count);
showSearchResultThumbnails($randomImageList, $indent);
?>
</div><!-- end .row -->
</div>
<footer class="container-fluid text-center">
<?php showFooter(); ?>
</footer>
</body>
</html>