Skip to content
● Critical PHP security fixes are out: update PHP on your Grav sites. What to do →

Is it possible to disable media listing in admin for a single page (800 images, done automatically in twig), loading fails.

Started by Japhy 3 weeks ago · 2 replies · 393 views
3 weeks ago

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 %}

2 weeks ago

While this might not be a direct answer to disabling the media panel, how about structuring your images in a hierarchical directory instead of keeping 800 images on a single page?

Sorry if this isn't quite what you're looking for, as organizing files into subfolders does add a bit of manual work. However, this approach can effectively resolve the severe backend loading performance issue while keeping your gallery fully functional and manageable via FTP.

For example, using a folder structure like this:

TXT
user/
    └── pages/
        └── 03.gallery/
            ├── gallery.md
            ├── 2025/
            │   └── 11/
            │       ├── image1.jpg
            │       └── image2.jpg(...)
            └── 2026/
                ├── 04/
                │   └── image1.jpg(...)
                └── 05/
                    └── image1.jpg(...)

You can then use the following Twig snippet to aggregate all images from subdirectories just like before:

TWIG
{% for child in page.collection({'items': '@self.descendants'}) %}
    {% for image in child.media.images|sort|reverse %}
        {% set imgtitle = ... %}
        <div class="media-box snaps">...
    {% endfor %}
{% endfor %}
2 weeks ago

Thanks @g222 I might actually do that! It's simple and very easy to do. I am very strict in naming my files. Putting them in folders would be a breeze. Sometimes you just want to be pragmatic :)

Suggested topics

Topic Participants Replies Views Activity
Forms & Blueprints · by TomW, 2 days ago
3 76 2 days ago
Forms & Blueprints · by FrViPofm, 1 month ago
5 395 1 month ago
Forms & Blueprints · by Ton Haarmans, 6 years ago
13 2385 8 months ago
Forms & Blueprints · by Hugo Oliveira, 9 months ago
0 842 9 months ago
Forms & Blueprints · by Flachy Joe, 11 months ago
9 925 10 months ago