Photo Deletion, Overlapping Icons, and Layout Problems

[Tiritibambix]

Lychee version

Lychee 6.10.0

Did you check the latest Lychee version?

Yes, I did

Which PHP version are you using?

PHP 8.4

Detailed description of the problem

Hi there,
After sticking with Lychee 4.9.0 for a long time due to the issues encountered with version 5, I was excited to finally test version 6. I was thrilled to see a more modern interface and all the features I love.
However, after some testing, I noticed the following issues:

Unable to delete a photo from an album: Clicking the trash can icon does nothing.
Overlapping icons: The icons (favorite, move, rotate, delete) overlap the photo itself.
Photo display too large: The photo takes up too much space, creating unnecessary scrollable area and hiding the top menu options.

Regarding the last point, I suspect this might be caused by my custom CSS/JS for the footer. It’s unfortunate that this customization breaks the photo viewing page.
Until these issues are resolved, I won’t be able to switch to Lychee 6, but I’m really happy to see the hard work paying off. This is very encouraging, great job so far.

I’m more than happy to provide screenshots or further details if needed.
Thanks for your hard work and for considering these issues!
Best regards,
Stéphane

Steps to reproduce the issue

Open an album.
Try to delete a photo using the trash can icon.
Observe the overlapping icons on the photo.
Notice the excessive photo size and scrollable area.

Diagnostics [REQUIRED]

Self-diagnosis:

Info: Hash: cc24cd495dc7f8c8—7d206e749a791991
2327 files and 13345 vendor files
Info: Full directory permission check is disabled

Info:

Lychee Version (tag): v6.10.0 (bf5495c) -- Up to date (0 seconds ago).
DB Version: 6.10.0

Docker: lycheeorg
composer install: --no-dev
APP_ENV: production
APP_DEBUG: false
APP_URL: set
APP_DIR: default
LOG_VIEWER_ENABLED: true

System: Linux
PHP Version: 8.4.14
PHP User agent: Lychee/6 (https://lycheeorg.dev/)
Timezone: Europe/Paris
Max uploaded file size: 100M
Max post size: 100M
Chunk size: 25.60 MB
Max execution time: 3600
MySQL Version: 10.11.15-MariaDB-ubu2204

exec() Available: yes
Imagick Available: 1
Imagick Enabled: 1
Imagick Version: 1691
GD Version: 2.3.3
Number of foreign key: 27 found.

Config:

version: 061000
check_for_updates: 0
sorting_photos_col: title
sorting_photos_order: ASC
sorting_albums_col: max_taken_at
sorting_albums_order: ASC
imagick: 1
skip_duplicates: 0
small_max_width: 0
small_max_height: 360
medium_max_width: 1920
medium_max_height: 1080
lang: en
image_overlay_type: desc
default_license: reserved
compression_quality: 90
grants_full_photo_access: 1
delete_imported: 0
mod_frame_enabled: 1
mod_frame_refresh: 30
thumb_2x: 1
small_2x: 1
medium_2x: 1
landing_page_enable: 0
search_public: 0
hide_version_number: 0
recent_age: 1
grants_download: 1
photos_wraparound: 1
map_display: 1
zip64: 1
map_display_public: 0
map_provider: Wikimedia
map_include_subalbums: 1
update_check_every_days: 3
has_exiftool: 1
share_button_visible: 1
import_via_symlink: 0
has_ffmpeg: 1
location_decoding: 0
location_decoding_timeout: 30
location_show: 1
location_show_public: 0
rss_enable: 0
rss_recent_days: 7
rss_max_items: 100
prefer_available_xmp_metadata: 0
editor_enabled: 1
lossless_optimization: 0
local_takestamp_video_formats: .avi|.mov
log_max_num_line: 1000
unlock_password_photos_with_url_param: 0
nsfw_visible: 1
nsfw_blur: 0
nsfw_warning: 0
nsfw_warning_admin: 0
nsfw_banner_override:
map_display_direction: 1
album_subtitle_type: oldstyle
upload_processing_limit: 4
new_photos_notification: 0
zip_deflate_level: 6
default_album_protection: 1
album_decoration: none
album_decoration_orientation: row
allow_username_change: 1
auto_fix_orientation: 1
random_album_id: starred
use_last_modified_date_when_no_exif_date: 0
layout: justified
date_format_photo_thumb: M j, Y, g:i:s A e
date_format_photo_overlay: M j, Y, g:i:s A e
date_format_sidebar_uploaded: M j, Y, g:i:s A e
date_format_sidebar_taken_at: M j, Y, g:i:s A e
date_format_hero_min_max: F Y
date_format_hero_created_at: M j, Y, g:i:s A T
date_format_album_thumb: M Y
upload_chunk_size: 0
nsfw_banner_blur_backdrop: 0
search_pagination_limit: 300
search_minimum_length_required: 4
photo_layout_justified_row_height: 320
photo_layout_masonry_column_width: 300
photo_layout_grid_column_width: 250
photo_layout_square_column_width: 200
photo_layout_gap: 12
display_thumb_album_overlay: always
display_thumb_photo_overlay: hover
default_album_thumb_aspect_ratio: 3/2
use_album_compact_header: 1
back_button_enabled: 0
back_button_text: Return to Home
SA_random_thumbs: 0
login_required: 0
enable_unsorted: 1
enable_starred: 1
enable_recent: 1
enable_on_this_day: 1
login_required_root_only: 1
dark_mode_enabled: 1
low_quality_image_placeholder: 1
show_keybinding_help_popup: 1
show_keybinding_help_button: 1
disable_se_call_for_actions: 1
enable_se_preview: 0
slideshow_timeout: 5
keep_original_untouched: 1
timeline_photos_enabled: 1
timeline_photos_public: 0
timeline_photos_granularity: day
timeline_photos_order: taken_at
timeline_photos_layout: square
timeline_photos_pagination_limit: 200
timeline_albums_enabled: 1
timeline_albums_public: 0
timeline_albums_granularity: year
timeline_left_border_enabled: 1
timeline_photo_date_format_year: Y
timeline_photo_date_format_month: M Y
timeline_photo_date_format_day: j M Y
timeline_photo_date_format_hour: g:i
timeline_album_date_format_year: Y
timeline_album_date_format_month: M Y
timeline_album_date_format_day: j M
hide_nsfw_in_smart_albums: 1
hide_nsfw_in_frame: 1
hide_nsfw_in_map: 1
hide_nsfw_in_search: 1
search_photos_layout: square
hide_nsfw_in_rss: 1
hide_nsfw_in_timeline: 1
number_albums_per_row_mobile: 3
cache_enabled: 0
cache_ttl: 86400
low_number_of_shoots_per_day: 10
medium_number_of_shoots_per_day: 50
high_number_of_shoots_per_day: 100
maintenance_processing_limit: 5000
disable_recursive_permission_check: 1
exif_disabled_for_all: 0
file_name_hidden: 0
default_old_settings: 0
default_expert_settings: 0
default_all_settings: 0
client_side_favourite_enabled: 0
disable_thumb_download: 1
disable_thumb2x_download: 1
disable_small_download: 0
disable_small2x_download: 0
disable_medium_download: 0
disable_medium2x_download: 0
temporary_image_link_enabled: 0
temporary_image_link_when_logged_in: 0
temporary_image_link_when_admin: 0
temporary_image_link_life_in_seconds: 86400
secure_image_link_enabled: 0
SA_override_visibility: 0
TA_override_visibility: 0
enable_colour_extractions: 0
colour_extraction_driver: farzai
home_page_default: gallery
timeline_page_enabled: 1
timeline_quick_access_date_format_year: Y
timeline_quick_access_date_format_month: M
timeline_quick_access_date_format_day: j M
timeline_quick_access_date_format_hour: h M, g:i
flow_enabled: 1
flow_public: 0
flow_base:
flow_max_items: 10
flow_strategy: auto
flow_include_sub_albums: 0
flow_include_photos_from_children: 0
flow_open_album_on_click: 0
flow_display_open_album_button: 0
flow_highlight_first_picture: 1
flow_min_max_enabled: 1
flow_display_statistics: 1
flow_compact_mode_enabled: 1
flow_image_header_enabled: 1
flow_image_header_cover: cover
flow_image_header_height: 24
flow_carousel_enabled: 1
flow_carousel_height: 6
date_format_flow_published: M j, Y, g:i:s A e
date_format_flow_min_max: F Y
flow_blur_nsfw_enabled: 1
hide_nsfw_in_flow: 1
skip_duplicates_early: 1
sync_delete_missing_photos: 0
sync_delete_missing_albums: 0
sync_dry_run: 1
gallery_header_enabled: 0
gallery_header_logged_in_enabled: 0
gallery_header:
gallery_header_bar_transparent: 1
gallery_header_bar_gradient: 1
import_via_url_forbidden_localhost: 1
import_via_url_forbidden_local_ip: 1
import_via_url_require_https: 1
import_via_url_forbidden_ports: 1
details_links_enabled: 0
details_links_public: 0
is_scroll_to_navigate_photos_enabled: 1
is_swipe_vertically_to_go_back_enabled: 1
photo_thumb_tags_enabled: 0
hide_nsfw_in_tag_albums: 1
hide_nsfw_in_tag_listing: 1
sorting_pinned_albums_col: created_at
sorting_pinned_albums_order: DESC
copyright_text:
watermark_enabled: 0
watermark_photo_id:
watermark_public: 1
watermark_logged_in_users_enabled: 0
renamer_enabled: 0
renamer_enforced: 0
renamer_enforced_before: 0
renamer_enforced_after: 0
renamer_photo_title_enabled: 1
renamer_album_title_enabled: 1
extract_zip_on_upload: 1
webshop_currency: EUR
webshop_default_description: No description provided.
webshop_allow_guest_checkout: 1
webshop_terms_url:
webshop_privacy_url:
webshop_default_price_cents: 0
webshop_default_license: personal
webshop_default_size: medium
enable_untagged: 1
photos_pagination_limit: 500
deduplicate_pinned_albums: 0

Browser & System [REQUIRED]

Firefox
Docker

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I understand my bug report will be removed if I haven't met the criteria above.
• I understand that if I am requested to provide more information, I must do so within 14 days or the bug report will be closed.

[ildyria]

Hi,

I am happy to hear that you are considering switching to version 6.
Coming from version 4, there are plenty of things that you are missing!

Unable to delete a photo from an album: Clicking the trash can icon does nothing.

I will double check that.

Overlapping icons: The icons (favorite, move, rotate, delete) overlap the photo itself.

Can you provide me a screenshot?

If you mean like this, then this is working as intended.

I tried my best to remove the dead spaces such as the headerbar on the photo view.

Photo display too large: The photo takes up too much space, creating unnecessary scrollable area and hiding the top menu options.

Hummm, I do not observe this behaviour in either direction.

I suspect this might be caused by my custom CSS/JS for the footer.

I believe this is indeed likely due to your own CSS.
What does your footer contains ? Because there are already quite a few options:

[Tiritibambix]

Hi,

Thank you so much for your quick response!

Here’s a short video to illustrate my points.

lychee6.mp4

You can clearly see that the delete button doesn’t do anything when clicked.

It also shows the extra space created by my custom footer.
I decided to create my own footer mainly to choose my own icons (which is not essential) but, more importantly, to include an icon and a link to my website. Ideally, it would be great to have a "website" field in the settings, or a way to include the footer without creating unnecessary space (apologies if I’m not clear, I find it hard to explain).

Regarding the icons overlapping the photo, I find them a bit distracting during viewing. I hope there’s an elegant solution that’s easy to implement.

I’d be happy to provide more details or screenshots if needed. Thanks again for your response and for looking into these issues!
Best regards,
Stéphane

[ildyria]

more importantly, to include an icon and a link to my website

:)
And you can also configure the bottom footer.

For the icons, I can see if there is something I can do, probably gonna be a setting though, will see.

[ildyria]

Note that I will not change anything for your custom footer, for that you will need to fiddle with css yourself. :)

[ildyria]

#3804 : add option to make the icons of the dock completely transparent.

[ildyria]

#3805 : fix delete not working (and move)

[Tiritibambix]

Hi,
Thank you for your response and for taking the time to clarify these points!

Regarding the "Back Home" option:
I appreciate the explanation, but I’m afraid I don’t see how this relates to adding an icon linking to my website in the bottom footer. I also couldn’t figure out how to make this option visible in the UI. Could you clarify where this button appears? My goal is simply to have a small, unobtrusive icon in the footer that links to my website, without creating extra space or conflicts with custom CSS.
And of course, I’m not expecting you to fix or adjust my custom CSS ;)

About the dock transparency option:
The new dock transparency feature sounds great! I’m really looking forward to seeing how it improves the viewing experience :)

On the delete button fix:
I’m so glad to hear the delete button issue has been resolved! I’ll test it as soon as I can and share my feedback.

Thanks again for your hard work and for addressing these issues so promptly. I can’t wait to try everything out once the new Docker image is released!

[ildyria]

When mousing over:

[ildyria]

Or using the footer module:

And it is obviously a link:

[ildyria]

Fixed issues reported with #3804 and #3805

[Tiritibambix]

Hi,

Thank you for taking the time to explain the "Back Home" option. I can see how it works now, though it’s not quite what I was looking for in my use case. No worries, I appreciate your help!

The footer module is much clearer now. Thanks for the explanation.

And a big thank you for implementing the fixes for the delete button and the dock transparency (very elegant). I’m really excited to officially switch to version 6 very soon :)

Best regards,
Stéphane

P.S.: while tinkering with the footer module, I found a limitation:
PDOStatement::execute:595 SQLSTATE: String data, right truncated: 1406 Data too long for column 'value' at row 1
Is there a way to get around it ?