Projets/Shaarli_bm_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

picture wall update

Browse Source
This commit is contained in:
bruno
2026-01-13 21:59:14 -05:00
parent 2da5ffcacc
commit 16a76db547
2 changed files with 403 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shaarli-pro/picwall.html
+123 -50
View File
@@ -1,60 +1,133 @@
<!DOCTYPE html>
<html{if="$language !== 'auto'"} lang="{$language}"{/if}>
<head>
{$pageName="picwall"}
{include="includes"}
</head>
<body>
{include="page.header"}
<html{if="$language !=='auto'"} lang=" {$language}"{/if}>
<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}
<head>
{$pageName="picwall"}
{include="includes"}
</head>
<div id="plugin_zone_start_picwall" class="plugin_zone">
{loop="$plugin_start_zone"}
{$value}
{/loop}
</div>
<body>
{include="page.header"}
<div class="picwall-container">
{loop="$linksToDisplay"}
<div class="picwall-pictureframe">
<img src="{$root_path}/{$value.thumbnail}#"
loading="lazy"
alt="{$value.title}"
style="width: 100%; height: 100%; object-fit: cover;" />
<div class="picwall-overlay" style="position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.7); padding: 0.5rem; transform: translateY(100%); transition: transform 0.2s ease;">
<a class="picwall-link" href="{$value.real_url}" style="color: white; font-size: 0.9rem; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
{$value.title}
</a>
<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>
{loop="$value.picwall_plugin"}
{/if}
<div id="plugin_zone_start_picwall" class="plugin_zone">
{loop="$plugin_start_zone"}
{$value}
{/loop}
{/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>
{/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');
<style>
.picwall-pictureframe:hover .picwall-overlay {
transform: translateY(0);
}
</style>
// Load saved size from localStorage
const savedSize = localStorage.getItem('picwallImageSize');
if (savedSize) {
slider.value = savedSize;
updateSize(savedSize);
}
{include="page.footer"}
</body>
</html>
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>