Question: Display Grid view when sharing a folder of photos via url?

ℹ️ Support
1

I know it is possible to share individual photos with /preview appended so the actual image will be displayed to the recipient, similar to imgur.

Is it possible to share a folder of photos via url, but display them with the Grid view by default? Right now file list view is displayed by default on Nextcloud 16.0.2 and I’m sending the folder to non-technical users who are confused about needing to click the 4-dot grid view button in the top right.

3 Likes
2

I’m asking same question :slight_smile:

3

Jop, it is possible! Not really “by default” but there is a possibility to hand somebody a link and pics are shown in grid view.

Explanation:
The gallery app (= grid view) is automatically used in share links, when the link contains “…/apps/gallery/…” and therefore the grid view is used.

So you have two options to get the extended share link, after normally creating your share link:
Method 1:
Manually insert “…/apps/gallery/…” in your link in the right position:
“https://mynextclouddomain.com/s/e55WrBBjMc2A5Kp” -> “https://mynextclouddomain.com/apps/gallery/s/e55WrBBjMc2A5Kp”.

Method 2:
Open your share link, enter password if needed, switch to grid view, and copy the share link, which uses now the gallery.

Like I said, not really “by default”, but your recipient will get a link, which shows pics in grid view by default.

1 Like
4

Hi, these options seems to not work anymore (Nextcloud 18), when I toggle the grid view the url don’t change and if I add /apps/gallery/ it redirect me to login page.
Is there any new options ?

2 Likes
5

I confirm.

6

It is because the gallery app has been replaced by the newer Photos app. This new app has fewer features and hopes to improve overall speed, but lacks this grid feature on shared links afaik.

1 Like
7

The problem is the fact that the public share is a share to a normal data-dir with pictures and not to a gallery.

8

While not a final solution, if we have access to the code, we can change the core/js/public/publicpage.js so it changes the layout if it detects a pattern on the URL.

For instance:

on the function window.addEventListener('DOMContentLoaded', function () { we can add:

if ( window.location.hash === "#view-grid" ) {
	$('#view-toggle').removeClass('icon-toggle-pictures').addClass('icon-toggle-filelist');
	$('#filestable').addClass('view-grid');
}

This will change the layout to the grid layout if we add #view-grid to our URL.
If we do not use the if condition and add directly the code inside, then it should always default to the grid layout.

eg:
Original URL: https://my.domain/s/tNFJb66Eb4dHzEH
Final URL: https://my.domain/s/tNFJb66Eb4dHzEH#view-grid

If attempting this, please make a backup of the file, since the patch can change at any time depending on the version of nextcloud.

Take a note that if the visitor wants to change the layout back to the list, the visitor will need to double click since all we did was change the style for the page so it rendered the grid layout. As long as the code that runs inside is concerned it is in the list layout.

4 Likes
9

Hello Ivo,
Your code works well but…
I have only 20 files/thumbs displayed when I land on the shared folder, the result is that the page is not filled with thumbs.
When I use the mouse wheel then the other files are displayed and the page is filled.

Do you know where I can setup more displayed thumbs at launch, so they fill the entire page?

Here is the link
Thank you

10

Ivo, please submit the fix as a pull request! It helps us just as a url. Would be worth contributing to the core app!

2 Likes
11

I found the answer
Modify file
apps/files/js/filelist.js
line 110
In my case I changed
var rows = Math.ceil(this.$container.height() / 50);
to
var rows = Math.ceil(this.$container.height() / 22);

12

Looks like the class names have changed since then.

Current working solution is below. If you want the gallery to appear all the time without having to append #view-grid you can set onlyOnViewGridUrl to false.

    // Execute if onlyOnViewGrid is false or if the URL hash ends wis "#view-grid"
    let onlyOnViewGridUrl = true;
    if (!onlyOnViewGridUrl || (onlyOnViewGridUrl && window.location.hash === "#view-grid")) {
        $('#view-toggle').removeClass('icon-toggle-pictures').addClass('icon-toggle-filelist');
        $('.files-filestable').addClass('view-grid');
    }

Created a GitHub Gist here: