Skip to content

Commit

Permalink
Begin replacing lightslider with full lightgallery viewer.
Browse files Browse the repository at this point in the history
  • Loading branch information
@kimisgold
kimisgold committed Apr 14, 2022
1 parent 16fa185 commit d307bde
Show file tree
Hide file tree
Showing 22 changed files with 262 additions and 181 deletions.
8 changes: 8 additions & 0 deletions config.ini
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,13 @@ other_media.options.label = "Non-Image Media"
other_media.options.description = "Check this box if you wish to display non-image media as links on the page."
other_media.options.value = "1"

media_caption.type = "select"
media_caption.options.label = "Media Caption"
media_caption.options.description = "The content of the media caption within a lightgallery slide"
media_caption.options.multiOptions.none = "None"
media_caption.options.multiOptions.title = "Dublin Core Title"
media_caption.options.multiOptions.description = "Dublin Core Description"

[groups]

color.options.legend = "Colors"
Expand Down Expand Up @@ -137,6 +144,7 @@ homepage.elements[] = "homepage_text"

itemshow.options.legend = "Item Page"
itemshow.elements[] = "other_media"
itemshow.elements[] = "media_caption"

[plugins]

Expand Down
1 change: 0 additions & 1 deletion css/lg-transitions.min.css
View file

This file was deleted.

1 change: 0 additions & 1 deletion css/lightgallery.min.css
View file

This file was deleted.

3 changes: 0 additions & 3 deletions css/lightslider.min.css
View file

This file was deleted.

54 changes: 9 additions & 45 deletions css/sass/_screen.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -771,14 +771,9 @@ footer {
padding-bottom: 0 !important;
}

#itemfiles,
.lSSlideOuter .media-render {
margin: 0;
#itemfiles {
background-color: rgba(0,0,0,.8);
width: 100%;
}

#itemfiles {
margin: 0 auto $base-line-height;
text-align: center;
min-height: 50vh !important;
Expand All @@ -788,49 +783,18 @@ footer {
bottom: 0;
}

.lSSlideOuter ul.lSPager.lSGallery {
margin: auto;
margin-bottom: $base-line-height;
display: flex;
flex-wrap: wrap;
align-items: center;
}

.lSSlideOuter .media-render {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.lSSlideOuter .media-render a {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.lSSlideOuter .media-render img {
max-height: 100%;
width: auto;
}

.lSPager li {
text-align: center;
}

.lSPager li:only-of-type {
.lg-icon.hidden {
display: none;
}

.lSPager a {
margin: 0 (.25 * $base-line-height) (.5 * $base-line-height);
display: inline-block;
}
.lg-icon.o-icon-undo {
font-size: 16px;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900;

.lSPager img {
vertical-align: bottom;
width: 3 * $base-line-height;
&:before {
content: "\f0e2";
}
}

.lg-outer .lg-thumb {
Expand Down
60 changes: 8 additions & 52 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1187,15 +1187,9 @@ nav ul {
}
}
@media screen {
#itemfiles,
.lSSlideOuter .media-render {
margin: 0;
#itemfiles {
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
}
}
@media screen {
#itemfiles {
margin: 0 auto 24px;
text-align: center;
min-height: 50vh !important;
Expand All @@ -1207,56 +1201,18 @@ nav ul {
}
}
@media screen {
.lSSlideOuter ul.lSPager.lSGallery {
margin: auto;
margin-bottom: 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
}
@media screen {
.lSSlideOuter .media-render {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
@media screen {
.lSSlideOuter .media-render a {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
}
@media screen {
.lSSlideOuter .media-render img {
max-height: 100%;
width: auto;
}
}
@media screen {
.lSPager li {
text-align: center;
}
}
@media screen {
.lSPager li:only-of-type {
.lg-icon.hidden {
display: none;
}
}
@media screen {
.lSPager a {
margin: 0 6px 12px;
display: inline-block;
.lg-icon.o-icon-undo {
font-size: 16px;
font-family: "Font Awesome 5 Free" !important;
font-weight: 900;
}
}
@media screen {
.lSPager img {
vertical-align: bottom;
width: 72px;
.lg-icon.o-icon-undo:before {
content: "\f0e2";
}
}
@media screen {
Expand Down
88 changes: 88 additions & 0 deletions functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,94 @@ function centerrow_display_featured_exhibit() {
return $html;
}

function centerrow_sort_files($files = null) {
$sortedMedia = [];
$whitelist = ['image/bmp', 'image/gif', 'image/jpeg', 'image/png', 'image/svg+xml', 'video/flv', 'video/x-flv', 'video/mp4', 'video/m4v',
'video/webm', 'video/wmv', 'video/quicktime', 'application/pdf'];
$html5videos = [];
$mediaCount = 0;

foreach ($files as $media) {
$mediaType = $media->mime_type;
if (in_array($mediaType, $whitelist)) {
$sortedMedia['lightMedia'][$mediaCount]['media'] = $media;
if (strpos($mediaType,'video') !== false) {
$html5videos[$mediaCount] = pathinfo($media->filename, PATHINFO_FILENAME);
$sortedMedia['lightMedia'][$mediaCount]['tracks'] = [];
}
$mediaCount++;
} else {
$sortedMedia['otherMedia'][] = $media;
}
}
if ((count($html5videos) > 0) && isset($sortedMedia['otherMedia'])) {
foreach ($html5videos as $fileId => $filename) {
foreach ($sortedMedia['otherMedia'] as $key => $otherMedia) {
if ($otherMedia->filename == "$filename.vtt") {
$sortedMedia['lightMedia'][$fileId]['tracks'][] = $otherMedia;
unset($sortedMedia['otherMedia'][$key]);
}
}
}
}

return $sortedMedia;
}

function centerrow_output_lightgallery($files = null) {
$html = '<ul id="itemfiles" class="media-list">';
$mediaCaption = get_theme_option('media_caption');

foreach ($files as $file) {
$media = $file['media'];
$source = (metadata($media, 'uri')) ? metadata($media, 'uri') : metadata($media, 'uri');
$mediaCaptionOptions = [
'none' => '',
'title' => 'data-sub-html="' . metadata($media, 'display_title') . '"',
'description' => 'data-sub-html="'. metadata($media, array('Dublin Core', 'Description')) . '"'
];
$mediaCaptionAttribute = ($mediaCaption) ? $mediaCaptionOptions[$mediaCaption] : '';
$mediaType = $media->mime_type;
if (strpos($mediaType, 'video') !== false) {
$videoSrcObject = [
'source' => [
[
'src' => $source,
'type' => $mediaType,
]
],
'attributes' => [
'preload' => false,
'playsinline' => true,
'controls' => true,
],
];
if (isset($file['tracks'])) {
foreach ($file['tracks'] as $key => $track) {
$label = metadata($track, 'display_title');
$srclang = (metadata($track, 'dcterms:language')) ? metadata($track, 'dcterms:language') : '';
$type = (metadata($track, 'dcterms:type')) ? metadata($track, 'dcterms:type') : 'captions';
$videoSrcObject['tracks'][$key]['src'] = $track->getWebPath();
$videoSrcObject['tracks'][$key]['label'] = $label;
$videoSrcObject['tracks'][$key]['srclang'] = $srclang;
$videoSrcObject['tracks'][$key]['kind'] = $type;
}
}
$videoSrcJson = json_encode($videoSrcObject);
$html .= '<li data-video="' . html_escape($videoSrcJson) . '" ' . $mediaCaptionAttribute . 'data-thumb="' . html_escape(metadata($media, 'thumbnailUri')) . '" data-download-url="' . $source . '" class="media resource">';
} else if ($mediaType == 'application/pdf') {
$html .= '<li data-iframe="' . html_escape($source) . '" '. $mediaCaptionAttribute . 'data-src="' . $source . '" data-thumb="' . html_escape(metadata($media, 'thumbnailUri')) . '" data-download-url="' . $source . '" class="media resource">';
} else {
$html .= '<li data-src="' . $source . '" ' . $mediaCaptionAttribute . 'data-thumb="' . html_escape(metadata($media, 'thumbnail_uri')) . '" data-download-url="' . $source . '" class="media resource">';
}
$html .= file_markup($media);
$html .= '</li>';
}
$html .= '</ul>';

return $html;
}

function centerrow_output_text_track_file($textFile) {
$kind = metadata($textFile, array('Dublin Core', 'Type'));
$language = metadata($textFile, array('Dublin Core', 'Language'));
Expand Down
82 changes: 12 additions & 70 deletions items/show.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,85 +3,27 @@
$itemFiles = $item->Files;
$visualMedia = array();
$otherFiles = array();
foreach ($itemFiles as $itemFile) {
$mimeType = $itemFile->mime_type;
if ((strpos($mimeType, 'image') !== false) || (strpos($mimeType, 'video') !== false)) {
$visualMedia[] = $itemFile;
} else {
$otherFiles[] = $itemFile;
}
}
$sortedMedia = centerrow_sort_files($itemFiles);
$visualMedia = (isset($sortedMedia['lightMedia'])) ? $sortedMedia['lightMedia'] : null;
$otherMedia = (isset($sortedMedia['otherMedia'])) ? $sortedMedia['otherMedia'] : null;
$hasVisualMedia = (count($visualMedia) > 0);
if ($hasVisualMedia) {
queue_css_file('lightslider.min');
queue_css_file('lightgallery.min');
queue_js_file('lightgallery-all.min', 'js');
queue_js_file('lightslider.min', 'js');
queue_js_file('items-show', 'js');
queue_css_file('lightgallery.min', 'all', false, 'vendor/lightgallery/css');
queue_js_file('lightgallery.min', 'vendor/lightgallery/js');
queue_js_file('lg-thumbnail', 'vendor/lightgallery/js/plugins/thumbnail');
queue_js_file('lg-zoom', 'vendor/lightgallery/js/plugins/zoom');
queue_js_file('lg-video', 'vendor/lightgallery/js/plugins/video');
queue_js_file('lg-rotate', 'vendor/lightgallery/js/plugins/rotate');
queue_js_file('lg-hash', 'vendor/lightgallery/js/plugins/hash');
queue_js_file('lg-itemfiles-config', 'js');
}
echo head(array('title' => metadata('item', array('Dublin Core', 'Title')), 'bodyclass' => 'items show'));
?>

<h1><?php echo metadata('item', 'rich_title', array('no_escape' => true)); ?></h1>

<?php if ($hasVisualMedia): ?>
<ul id="itemfiles" <?php echo (count($visualMedia) == 1) ? 'class="solo"' : ''; ?>>
<?php $visualMediaCount = 0; ?>
<?php foreach ($visualMedia as $visualMediaFile): ?>
<?php
$squareThumbnail = centerrow_get_square_thumbnail_url($visualMediaFile, $this);
$visualMediaCount++;
$fileUrl = ($linkToFileMetadata == '1') ? record_url($visualMediaFile) : $visualMediaFile->getWebPath('original');
$mimeType = $visualMediaFile->mime_type;
$renderType = (strpos($mimeType, 'tiff') !== false) ? 'fullsize' : 'original';
?>
<?php if (strpos($visualMediaFile->mime_type, 'image') !== false): ?>
<li
data-src="<?php echo $visualMediaFile->getWebPath($renderType); ?>"
data-thumb="<?php echo $squareThumbnail; ?>"
data-sub-html=".media-link-<?php echo $visualMediaCount; ?>"
class="media resource"
>
<div class="media-render">
<?php echo file_image('thumbnail', array(), $visualMediaFile); ?>
</div>
<div class="media-link-<?php echo $visualMediaCount; ?>">
<a href="<?php echo $fileUrl; ?>"><?php echo metadata($visualMediaFile, 'rich_title', array('no_escape' => true)); ?></a>
</div>
</li>
<?php else: ?>
<li
data-thumb="<?php echo $squareThumbnail; ?>"
data-html="#video-<?php echo $visualMediaCount; ?>"
data-sub-html=".media-link-<?php echo $visualMediaCount; ?>"
class="media resource"
>
<div style="display: none;" id="video-<?php echo $visualMediaCount; ?>">
<?php $tracksPresent = centerrow_check_for_tracks($otherFiles); ?>
<video class="lg-video-object lg-html5" controls preload="none" <?php echo ($tracksPresent) ? 'crossorigin="anonymous"' : ''; ?>>
<source src="<?php echo file_display_url($visualMediaFile, 'original'); ?>" type="<?php echo $visualMediaFile->mime_type; ?>">
<?php echo __('Your browser does not support HTML5 video.'); ?>
<?php $mediaName = pathinfo($visualMediaFile->original_filename, PATHINFO_FILENAME); ?>
<?php if ($tracksPresent): ?>
<?php foreach ($otherFiles as $key => $otherFile): ?>
<?php if ($otherFile->original_filename == "$mediaName.vtt"): ?>
<?php echo centerrow_output_text_track_file($otherFile); ?>
<?php unset($otherFiles[$key]); ?>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
</video>
</div>
<div class="media-render">
<?php echo file_image('fullsize', array(), $visualMediaFile); ?>
</div>
<div class="media-link-<?php echo $visualMediaCount; ?>">
<a href="<?php echo $fileUrl; ?>"><?php echo metadata($visualMediaFile, 'rich_title', array('no_escape' => true)); ?></a>
</div>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<?php echo centerrow_output_lightgallery($visualMedia); ?>
<?php endif; ?>

<?php if ((count($otherFiles) > 0) && get_theme_option('other_media') == 0): ?>
Expand Down
Loading

0 comments on commit d307bde

Please sign in to comment.