gallery gallery misalignment of folder previews

Steps to reproduce

Upload pictures into multiple folders, to get 2 rows of folder in a single folder
Go to gallery
Navigate to folder

Expected behaviour

All folder previews should be the same size (grid)

Actual behaviour

Misalignment of folder previews of the second row, in each row the previews are the same size, but differ from first to second row

Inspecting the html file in the browser reveals, that each row (class: row) has a different height and width, and so do the row-elements.

example

<div class="row" style="height: 194.642px; width: 1365px; opacity: 1;"><a class="row-element ui-droppable ui-draggable ui-draggable-handle" style="width: 190.642px; height: 190.642px;" data-width="200" data-height="200" ...

and

<div class="row" style="height: 204px; width: 1228px; opacity: 1;"><a class="row-element ui-droppable ui-draggable ui-draggable-handle" style="width: 200px; height: 200px;" data-width="200" data-height="200" ...

I think the secon row (second example) should be the right one, as it has the same values as folders with only one row and the thumbnails do not seem to be resized there

Digging deeper reveals, that the pictrures (class: cropped) have the same dimensions across both rows, yet when hovering over an item, first row thumbnails have different sizes than they should:

example

<div class="cropped" style="height: 98px; width: 97.99px; background-image: url(&quot;http://192.168.178.37/nextcloud/apps/gallery/preview/16448?width=200&amp;height=200&quot;); opacity: 1;"></div>

has actually a dimension of 93.4x93.41

EDIT: tried the

rm -r data/appdata_*/js/*
rm -r data/appdata_*/css/*
php occ files:scan-app-data

fix from nextcloud/server#8467

Consistent across Chrome and Firefox

Server configuration

Operating system: raspbian buster (2019-07-10, july)

Web server: apache 2.4.25

Database: should be mariadb 10.1 rpi image

PHP version: 7.3.7

Nextcloud version: 16.0.3

Updated from an older Nextcloud/ownCloud or fresh install: docker, fresh

Where did you install Nextcloud from: docker image: nextcloud:apache

Signing status:

Signing status

List of activated apps:

Enabled:

accessibility: 1.2.0
activity: 2.9.1
cloud_federation_api: 0.2.0
comments: 1.6.0
dav: 1.9.2
federatedfilesharing: 1.6.0
federation: 1.6.0
files: 1.11.0
files_pdfviewer: 1.5.0
files_rightclick: 0.13.0
files_sharing: 1.8.0
files_texteditor: 2.8.0
files_trashbin: 1.6.0
files_versions: 1.9.0
files_videoplayer: 1.5.0
firstrunwizard: 2.5.0
gallery: 18.3.0
logreader: 2.1.0
lookup_server_connector: 1.4.0
nextcloud_announcements: 1.5.0
notifications: 2.4.1
oauth2: 1.4.2
password_policy: 1.6.0
previewgenerator: 2.1.0
privacy: 1.0.0
provisioning_api: 1.6.0
recommendations: 0.4.0
serverinfo: 1.6.0
sharebymail: 1.6.0
support: 1.0.0
survey_client: 1.4.0
systemtags: 1.6.0
theming: 1.7.0
twofactor_backupcodes: 1.5.0
updatenotification: 1.6.0
viewer: 1.0.0
workflowengine: 1.6.0

Nextcloud configuration:

{
    "system": {
        "htaccess.RewriteBase": "\/",
        "memcache.local": "\\OC\\Memcache\\APCu",
        "apps_paths": [
            {
                "path": "\/var\/www\/html\/apps",
                "url": "\/apps",
                "writable": false
            },
            {
                "path": "\/var\/www\/html\/custom_apps",
                "url": "\/custom_apps",
                "writable": true
            }
        ],
        "instanceid": "***REMOVED SENSITIVE VALUE***",
        "passwordsalt": "***REMOVED SENSITIVE VALUE***",
        "secret": "***REMOVED SENSITIVE VALUE***",
        "trusted_domains": [
            "192.168.178.37:1240",
            "192.168.178.37"
        ],
        "datadirectory": "***REMOVED SENSITIVE VALUE***",
        "dbtype": "mysql",
        "version": "16.0.3.0",
        "overwrite.cli.url": "http:\/\/192.168.178.37:1240",
        "dbname": "***REMOVED SENSITIVE VALUE***",
        "dbhost": "***REMOVED SENSITIVE VALUE***",
        "dbport": "",
        "dbtableprefix": "oc_",
        "mysql.utf8mb4": true,
        "dbuser": "***REMOVED SENSITIVE VALUE***",
        "dbpassword": "***REMOVED SENSITIVE VALUE***",
        "installed": true,
        "overwritewebroot": "\/nextcloud",
        "maintenance": false
    },
    "apps": {
        "accessibility": {
            "enabled": "yes",
            "installed_version": "1.2.0",
            "types": ""
        },
        "activity": {
            "enabled": "yes",
            "installed_version": "2.9.1",
            "types": "filesystem"
        },
        "backgroundjob": {
            "lastjob": "633"
        },
        "bruteforcesettings": {
            "enabled": "yes",
            "installed_version": "1.4.0",
            "types": ""
        },
        "cloud_federation_api": {
            "enabled": "yes",
            "installed_version": "0.2.0",
            "types": "filesystem"
        },
        "comments": {
            "enabled": "yes",
            "installed_version": "1.6.0",
            "types": "logging"
        },
        "core": {
            "backgroundjobs_mode": "cron",
            "installed.bundles": "[\"CoreBundle\"]",
            "installedat": "1563636244.7674",
            "lastcron": "1564178403",
            "lastupdateResult": "[]",
            "lastupdatedat": "1564178867",
            "oc.integritycheck.checker": "[]",
            "public_files": "files_sharing\/public.php",
            "public_webdav": "dav\/appinfo\/v1\/publicwebdav.php",
            "scss.variables": "08343dd3f787291558383b46e1b489fb",
            "vendor": "nextcloud"
        },
        "dav": {
            "buildCalendarSearchIndex": "yes",
            "enabled": "yes",
            "installed_version": "1.9.2",
            "regeneratedBirthdayCalendarsForYearFix": "yes",
            "types": "filesystem"
        },
        "federatedfilesharing": {
            "enabled": "yes",
            "installed_version": "1.6.0",
            "types": ""
        },
        "federation": {
            "enabled": "yes",
            "installed_version": "1.6.0",
            "types": "authentication"
        },
        "files": {
            "cronjob_scan_files": "500",
            "enabled": "yes",
            "installed_version": "1.11.0",
            "types": "filesystem"
        },
        "files_pdfviewer": {
            "enabled": "yes",
            "installed_version": "1.5.0",
            "types": ""
        },
        "files_rightclick": {
            "enabled": "yes",
            "installed_version": "0.13.0",
            "types": ""
        },
        "files_sharing": {
            "enabled": "yes",
            "installed_version": "1.8.0",
            "types": "filesystem"
        },
        "files_texteditor": {
            "enabled": "yes",
            "installed_version": "2.8.0",
            "types": ""
        },
        "files_trashbin": {
            "enabled": "yes",
            "installed_version": "1.6.0",
            "types": "filesystem,dav"
        },
        "files_versions": {
            "enabled": "yes",
            "installed_version": "1.9.0",
            "types": "filesystem,dav"
        },
        "files_videoplayer": {
            "enabled": "yes",
            "installed_version": "1.5.0",
            "types": ""
        },
        "firstrunwizard": {
            "enabled": "yes",
            "installed_version": "2.5.0",
            "types": "logging"
        },
        "gallery": {
            "enabled": "yes",
            "installed_version": "18.3.0",
            "types": ""
        },
        "logreader": {
            "enabled": "yes",
            "installed_version": "2.1.0",
            "types": ""
        },
        "lookup_server_connector": {
            "enabled": "yes",
            "installed_version": "1.4.0",
            "types": "authentication"
        },
        "nextcloud_announcements": {
            "enabled": "yes",
            "installed_version": "1.5.0",
            "types": "logging"
        },
        "notifications": {
            "enabled": "yes",
            "installed_version": "2.4.1",
            "types": "logging"
        },
        "oauth2": {
            "enabled": "yes",
            "installed_version": "1.4.2",
            "types": "authentication"
        },
        "password_policy": {
            "enabled": "yes",
            "enforceHaveIBeenPwned": "1",
            "enforceNumericCharacters": "1",
            "enforceSpecialCharacters": "1",
            "enforceUpperLowerCase": "1",
            "installed_version": "1.6.0",
            "types": ""
        },
        "previewgenerator": {
            "enabled": "yes",
            "installed_version": "2.1.0",
            "types": "filesystem"
        },
        "privacy": {
            "enabled": "yes",
            "installed_version": "1.0.0",
            "types": ""
        },
        "provisioning_api": {
            "enabled": "yes",
            "installed_version": "1.6.0",
            "types": "prevent_group_restriction"
        },
        "recommendations": {
            "enabled": "yes",
            "installed_version": "0.4.0",
            "types": ""
        },
        "serverinfo": {
            "enabled": "yes",
            "installed_version": "1.6.0",
            "types": ""
        },
        "sharebymail": {
            "enabled": "yes",
            "installed_version": "1.6.0",
            "types": "filesystem"
        },
        "support": {
            "enabled": "yes",
            "installed_version": "1.0.0",
            "types": ""
        },
        "survey_client": {
            "enabled": "yes",
            "installed_version": "1.4.0",
            "types": ""
        },
        "systemtags": {
            "enabled": "yes",
            "installed_version": "1.6.0",
            "types": "logging"
        },
        "theming": {
            "enabled": "yes",
            "installed_version": "1.7.0",
            "types": "logging"
        },
        "twofactor_backupcodes": {
            "enabled": "yes",
            "installed_version": "1.5.0",
            "types": ""
        },
        "updatenotification": {
            "enabled": "yes",
            "installed_version": "1.6.0",
            "types": "",
            "update_check_errors": "0"
        },
        "viewer": {
            "enabled": "yes",
            "installed_version": "1.0.0",
            "types": ""
        },
        "workflowengine": {
            "enabled": "yes",
            "installed_version": "1.6.0",
            "types": "filesystem"
        }
    }
}

Are you using external storage, if yes which one: no

Are you using encryption: no

Are you using an external user-backend, if yes which one:

Client configuration

Browser:

Chrome 75.0.3770.142
Firefox 64.0.4

Operating system: Win 7 64bit SP1

Logs

Web server error log

Insert your webserver log here

Nextcloud log (data/nextcloud.log)

Nextcloud log

reloading the page logs this

172.18.0.4 - - [27/Jul/2019:00:41:54 +0200] "GET /apps/gallery/files/list?location=Media%252FPictures...&mediatypes=image%2Fpng%3Bimage%2Fjpeg%3Bimage%2Fgif%3Bimage%2Fx-xbitmap%3Bimage%2Fbmp&features=&etag=5d39e3f569dd0 HTTP/1.1" 200 987 "-" "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36"

Browser log

Unchecked runtime.lastError: The message port closed before a response was received.

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

merged.js?v=88ddf1ef-0:3647 Uncaught TypeError: Cannot set property 'alt' of null
    at Object.<anonymous> (merged.js?v=88ddf1ef-0:3647)
    at Object.<anonymous> (main.js?v=88ddf1ef-0:39)
    at u (main.js?v=88ddf1ef-0:39)
    at Object.fireWith [as resolveWith] (main.js?v=88ddf1ef-0:39)
    at Object.r.<computed> [as resolve] (main.js?v=88ddf1ef-0:39)
    at Image.thumb.image.onerror (merged.js?v=88ddf1ef-0:4306)

Thumbnails look like this:
Thumbnail
fileId: 16448
height: 200
image: img
loadingDeferred: {resolve: ƒ, resolveWith: ƒ, reject: ƒ, rejectWith: ƒ, notify: ƒ, …}
ratio: 1
square: true
status: 200
valid: true
width: 400
__proto__: Object

DevTools failed to parse SourceMap: http://192.168.178.37/nextcloud/core/js/dist/share_backend.js.map

DevTools failed to parse SourceMap: http://192.168.178.37/nextcloud/core/js/dist/main.js.map

DevTools failed to parse SourceMap: http://192.168.178.37/nextcloud/apps/files_videoplayer/js/main.js.map

DevTools failed to parse SourceMap: http://192.168.178.37/nextcloud/apps/notifications/js/notifications.js.map

Jul 26 '19 22:07 5chmidti

This seems to be done intentionally. The second row, which doesn't cover the entire screen width-wise, has the original size. The first row, which covers the entire screen width-wise, is scaled down to fit.

https://github.com/nextcloud/gallery/blob/master/js/galleryrow.js#L126

cc @nextcloud/designers

Aug 05 '19 11:08 georgehrke

Some screenshots so it's easier to understand what this issue is about:

Without scaling (because the screen width is just about right): one

With scaling down: two

Aug 05 '19 11:08 georgehrke

One option would be to apply fit() to all rows, even when they are not complete.

Aug 05 '19 11:08 georgehrke

One option would be to apply fit() to all rows, even when they are not complete.

I think that would be best

Aug 05 '19 11:08 5chmidti

thank you @georgehrke

Aug 05 '19 13:08 GretaD

~~Closing~~Moving, see https://github.com/nextcloud/gallery/pull/537

Oct 30 '19 21:10 skjnldsv

gallery gallery copied to clipboard

gallery misalignment of folder previews

Steps to reproduce

Expected behaviour

Actual behaviour

Server configuration

Client configuration

Logs

Web server error log

Nextcloud log (data/nextcloud.log)

Browser log

gallery
gallery copied to clipboard