Is there a way to turn off the attachment panel for a page in Grav CMS version 2? My page has 800 images that are displayed in a gallery. This all happens in Twig, which reads all the attachments and places them into a lazy-load gallery. I have been doing this for years and it still amazes me this still works lightning fast, even with 800 hig res images. However If I open the backend page it tries to load all 800 thumbs and that is a problem. In v2 previews are not shown, in 1.7 that did work. But even so, I would rather disable the media panel and upload through ftp in this case. Or a view details without loading thumbs would be helpful as well.
I tried to do it with a blueprint, but i cold not get it working. Is this the way to go?
This is my twig, it's a bit hacky but I wanted as little work as possible so I extract the image title in the gallery from the file name.
{% extends 'partials/base.html.twig' %}
{# Media Boxes CSS #}
{% do assets.addCss('user/plugins/mediaboxes/components/Font Awesome/css/font-awesome.min.css') %}
{% do assets.addCss('user/plugins/mediaboxes/components/Fancybox/jquery.fancybox.min.css') %}
{% do assets.addCss('user/plugins/mediaboxes/css/mediaBoxes.css') %}
{# jQuery MUST load first #}
{% do assets.addJs('user/plugins/mediaboxes/components/jQuery/jquery-3.6.0.min.js', {'priority': 100}) %}
{# Then load all the dependencies #}
{% do assets.addInlineJs("
(function checkDeps() {
if (typeof jQuery === 'undefined') {
console.warn('Waiting for jQuery...');
setTimeout(checkDeps, 100);
return;
}
var scripts = [
'user/plugins/mediaboxes/components/Isotope/jquery.isotope.min.js',
'user/plugins/mediaboxes/components/imagesLoaded/jquery.imagesLoaded.min.js',
'user/plugins/mediaboxes/components/Transit/jquery.transit.min.js',
'user/plugins/mediaboxes/components/jQuery Easing/jquery.easing.js',
'user/plugins/mediaboxes/components/jQuery Visible/jquery.visible.min.js',
'user/plugins/mediaboxes/components/Modernizr/modernizr.custom.min.js',
'user/plugins/mediaboxes/components/Fancybox/jquery.fancybox.min.js',
'user/plugins/mediaboxes/js/jquery.mediaBoxes.dropdown.js',
'user/plugins/mediaboxes/js/jquery.mediaBoxes.js',
'user/plugins/mediaboxes/js/mediaboxesgrid.js'
];
function loadNext(index) {
if (index >= scripts.length) {
console.log('All scripts loaded');
console.log('Isotope:', typeof $.fn.isotope, 'mediaBoxes:', typeof $.fn.mediaBoxes);
return;
}
$.getScript(scripts[index], function() {
console.log('Loaded:', scripts[index]);
loadNext(index + 1);
});
}
loadNext(0);
})();
", {'priority': 99}) %}
{% block content %}
<article class="content-item">
{{ page.content|raw }}
<div class="media-boxes-search">
<span class="media-boxes-icon fa fa-search"></span>
<input type="text" id="search" placeholder="Zoeken">
<span class="media-boxes-clear fa fa-close"></span>
</div>
<div id="grid">
{% for image in page.media.images|sort|reverse %}
{% set imgtitle = image.filename|replace({'.JPG':'.','.jpg':'.','_':' ','__':', '}) %}
<div class="media-box snaps">
<div class="media-box-title">"{{ imgtitle }}"</div>
<div class="media-box-image">
<div data-thumbnail="{{ image.resize(300,200).quality(80).url }}"></div>
<div class="thumbnail-overlay">
<i class="fa fa-plus mb-open-popup" data-src="{{ image.quality(100).url }}" data-title="{{ imgtitle }}"></i>
</div>
</div>
</div>
{% endfor %}
</div>
</article>
{% endblock %}