Nextcloud - Show gallery view by default with public / sharing / shared folders

README.md

Nextcloud - Show gallery view by default with public / sharing / shared folders

This will automatically switch a public or shared folder to gallery view when loading.

This only works on public or shared folders on Nextcloud and will not affect normal folders viewed under your user account.

Tested and working on Nextcloud 27+.

How to Configure

1. Open core/js/public/publicpage.js.
2. Inside the window.addEventListener('DOMContentLoaded', function () { closure, add the JS.
3. Save.

How to Use

Append #view-grid to any shared URL.

For example...

https://YourDrive.com/s/daBAWTg3aa3FMLS#view-grid

How to Make Gallery View Always Default

Set onlyOnViewGridUrl to false which will cause the gallery/grid view to be shown each time without having to append #view-grid to the URL.

Disclaimers

1. This is a workaround that will be lost when you update Nextcloud. You will have to reapply it each time you update.
2. Beacuse a Nextcloud file has changed, the file integrity check will fail. That's okay, it just means that because the file doesn't match the original file it will give you a warning on the Overview page.

additions-to-publicpage.js

/***************************************************************************/
/* Switch to grid view automatically if the URL contains #view-grid        */
/***************************************************************************/
let onlyOnViewGridUrl = true;

// Execute if onlyOnViewGrid is false or if the URL hash is "#view-grid"
if (!onlyOnViewGridUrl || (onlyOnViewGridUrl && window.location.hash === "#view-grid")) {
	// Function to check if the file list is loaded
	function checkFileListLoaded() {
		var fileListSelector = '#preview > table > tbody > tr:nth-child(1)';

		if (document.querySelector(fileListSelector)) {
			$('#view-toggle').click();
			clearInterval(checkInterval); // Clear the interval once the action is performed
		}
	}

	// Set an interval to periodically check for the file list
	var checkInterval = setInterval(checkFileListLoaded, 500); // Check every 500 milliseconds

	// Set a timeout to stop checking after 10 seconds
	setTimeout(function () {
		clearInterval(checkInterval);
	}, 10000); // Stop after 10000 milliseconds (10 seconds)
}
/***************************************************************************/
/* END - Switch to grid view automatically if the URL contains #view-grid  */
/***************************************************************************/

nice patch, it's a shame upstream nextcloud doesn't support something like this

Agreed! You would think it'd be an option.

For photos, this is a great feature. For files, I prefer the existing list view. Similar to how Window Explorer will detect photos vs documents, I wish Nextcloud did the same.

Found this searching for exactly this, as I only use it for image distribution to clients - Is there any word on whether this will be a configurable option in the latest versions, as @michaelsproul suggests upstream wouldn't allow this?

I haven't heard anything good, bad, or otherwise in regards to the gallery as the default view on Nextcloud. I still use Nextcloud, but also started using Immich for photos and videos. It's much faster and more what you'd expect for displaying photos and videos. It's not perfect either, but it's worth checking out!

Fortunately now the option to specify the Grid view in a share via the api is now exposed. I'll have a look at the bare PHP install of Immich but for syncing and delivering images for customers Nextcloud feels like a more sensible fit.

Did they changed this on v31 again? I don´t have a public folder under core/js/ on any of my nextclouds with v31, so i´m not sure how to use this workaround.

@rkutschi I haven't tested it on v31, but on v30 it is working. I just updated the code with some of the latest changes that I've found help display the grid view correctly.

Here's some of the original code from publicpage.js before the changes. Maybe you can search across all the files to find which file it's located in?

You might search for just a line or two to match?

$('#body-public').find('.header-right .menutoggle').click(function () {
	$(this).next('.popovermenu').toggleClass('open');
});

$('#save-external-share').click(function () {
	$('#external-share-menu-item').toggleClass('hidden')
	$('#remote_address').focus();
});

$(document).mouseup(function (e) {
	var toggle = $('#body-public').find('.header-right .menutoggle');
	var container = toggle.next('.popovermenu');

	// if the target of the click isn't the menu toggle, nor a descendant of the
	// menu toggle, nor the container nor a descendant of the container
	if (!toggle.is(e.target) && toggle.has(e.target).length === 0 &&
		!container.is(e.target) && container.has(e.target).length === 0) {
		container.removeClass('open');
	}
});