133 lines
5.4 KiB
HTML
133 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html{if="$language !=='auto'"} lang=" {$language}"{/if}>
|
|
|
|
<head>
|
|
{$pageName="picwall"}
|
|
{include="includes"}
|
|
</head>
|
|
|
|
<body>
|
|
{include="page.header"}
|
|
|
|
<div class="container content-container">
|
|
{if="count($linksToDisplay) === 0 && $is_logged_in"}
|
|
<div class="alert alert-warning text-center">
|
|
{'There is no cached thumbnail.'|t}
|
|
<a href="{$base_path}/admin/thumbnails">{'Try to synchronize them.'|t}</a>
|
|
</div>
|
|
{/if}
|
|
|
|
<div id="plugin_zone_start_picwall" class="plugin_zone">
|
|
{loop="$plugin_start_zone"}
|
|
{$value}
|
|
{/loop}
|
|
</div>
|
|
|
|
<!-- Picwall Controls -->
|
|
<div class="picwall-controls">
|
|
<div class="picwall-controls-inner">
|
|
<span class="picwall-controls-label">
|
|
<i class="ri-zoom-in-line"></i>
|
|
Image Size
|
|
</span>
|
|
<div class="picwall-size-controls">
|
|
<button type="button" class="picwall-size-btn" id="picwall-size-decrease" title="Decrease size">
|
|
<i class="ri-subtract-line"></i>
|
|
</button>
|
|
<input type="range" id="picwall-size-slider" class="picwall-size-slider" min="120" max="400"
|
|
value="200" step="20">
|
|
<button type="button" class="picwall-size-btn" id="picwall-size-increase" title="Increase size">
|
|
<i class="ri-add-line"></i>
|
|
</button>
|
|
</div>
|
|
<span class="picwall-size-value" id="picwall-size-value">200px</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="picwall-container" id="picwall-container">
|
|
{loop="$linksToDisplay"}
|
|
<div class="picwall-pictureframe">
|
|
<!-- Clickable image linking to the website -->
|
|
<a href="{$value.real_url}" target="_blank" rel="noopener noreferrer" class="picwall-image-link"
|
|
title="{$value.title}">
|
|
<img src="{$root_path}/{$value.thumbnail}#" loading="lazy" alt="{$value.title}" />
|
|
</a>
|
|
|
|
<!-- Overlay with title - visible on hover -->
|
|
<div class="picwall-overlay">
|
|
<a class="picwall-link" href="{$value.real_url}" target="_blank" rel="noopener noreferrer">
|
|
<span class="picwall-title">{$value.title}</span>
|
|
<span class="picwall-url">
|
|
<i class="ri-external-link-line"></i>
|
|
{$value.real_url}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
|
|
{loop="$value.picwall_plugin"}
|
|
{$value}
|
|
{/loop}
|
|
</div>
|
|
{/loop}
|
|
</div>
|
|
|
|
<div id="plugin_zone_end_picwall" class="plugin_zone">
|
|
{loop="$plugin_end_zone"}
|
|
{$value}
|
|
{/loop}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
// Picwall size control
|
|
const slider = document.getElementById('picwall-size-slider');
|
|
const container = document.getElementById('picwall-container');
|
|
const sizeValue = document.getElementById('picwall-size-value');
|
|
const decreaseBtn = document.getElementById('picwall-size-decrease');
|
|
const increaseBtn = document.getElementById('picwall-size-increase');
|
|
|
|
// Load saved size from localStorage
|
|
const savedSize = localStorage.getItem('picwallImageSize');
|
|
if (savedSize) {
|
|
slider.value = savedSize;
|
|
updateSize(savedSize);
|
|
}
|
|
|
|
function updateSize(size) {
|
|
container.style.setProperty('--picwall-item-size', size + 'px');
|
|
sizeValue.textContent = size + 'px';
|
|
localStorage.setItem('picwallImageSize', size);
|
|
}
|
|
|
|
slider.addEventListener('input', function () {
|
|
updateSize(this.value);
|
|
});
|
|
|
|
decreaseBtn.addEventListener('click', function () {
|
|
const currentValue = parseInt(slider.value);
|
|
const step = parseInt(slider.step);
|
|
const min = parseInt(slider.min);
|
|
const newValue = Math.max(min, currentValue - step);
|
|
slider.value = newValue;
|
|
updateSize(newValue);
|
|
});
|
|
|
|
increaseBtn.addEventListener('click', function () {
|
|
const currentValue = parseInt(slider.value);
|
|
const step = parseInt(slider.step);
|
|
const max = parseInt(slider.max);
|
|
const newValue = Math.min(max, currentValue + step);
|
|
slider.value = newValue;
|
|
updateSize(newValue);
|
|
});
|
|
|
|
// Initialize with default size
|
|
updateSize(slider.value);
|
|
})();
|
|
</script>
|
|
|
|
{include="page.footer"}
|
|
</body>
|
|
|
|
</html> |