Thumbnail Display Issue v3.1+

brodkin · September 20, 2023, 10:21pm

CMS Version

v3.3.3 (official Docker image)

Issue

I’ve only just been informed by my team after years of this ongoing issue that they are experiencing extreme slowness when loading media in the layout editor ever since we upgraded to v3.1. It just hangs like this for 10-15 seconds after loading or a search, and then all of the thumbnails begin to load quickly after that:

Have you ever experienced this before? I did some testing and thumbnails that were loaded previously remain cached and load fast, but any thumbnail not previously loaded takes an eternity (measured in internet years ofc). It seems like all of the thumbnails are being generated every time that the image is loaded rather than being cached by Xibo.

Does anyone know the path to the cached images so I can look into it?

Is there anything else that could cause such performance issues with thumbnail generation?

Thanks in advance!

ProServ · September 21, 2023, 10:33am

In my version 3.3.3, I only had to wait 4 secondes to display these thumbnails.
All images above 1080p with around 500Kb/image.

I can confirm, however, that there is no cache.

I think the thumbnails are generated each time the pages are loaded.

@alex, can you confirm this?

alex · September 21, 2023, 11:12am

I’ve only checked 3.3.8 as that’s the current v3 release, but it does indeed cache that in the CMS library when the thumbnail is generated the first time.

github.com

xibosignage/xibo-cms/blob/release33/lib/Widget/Image.php#L193


      
          
              // Show the image - scaled to the aspect ratio of this region (get from GET)
              return '<div style="display:table; width:100%; height: ' . $height . 'px">
                  <div style="text-align:' . $align . '; display: table-cell; vertical-align: ' . $vAlign . ';">
                      <img src="' . $url . '" />
                  </div>
              </div>';
          }
          
          /** @inheritDoc */
          public function download(Request $request, Response $response): Response
          {
              $sanitizedParams = $this->getSanitizer($request->getQueryParams());
              $this->getLog()->debug('Image Module: download for ' . $this->getMediaId());
          
              $libraryLocation = $this->getConfig()->getSetting('LIBRARY_LOCATION');
              $media = $this->mediaFactory->getById($this->getMediaId());
              $filePath = $libraryLocation . $media->storedAs;
              $this->getLog()->debug('Media Returned: ' . $media->storedAs);
              
              $width = intval($sanitizedParams->getDouble('width'));

That’s the function.

github.com

xibosignage/xibo-cms/blob/release33/lib/Widget/Image.php#L245


      
          $thumbPath = $libraryLocation . 'tn_' . $media->storedAs;
          $proportional = true;
          $width = 120;
          $height = 120;
          
          $this->getLog()->debug('Thumbnail: ' . $thumbPath . ' requested');
          
          // Does the thumbnail exist already?
          $img = null;
          $regenerate = true;
          if (file_exists($thumbPath)) {
              $img = Img::make($filePath);
              if ($img->width() === $width || $img->height() === $height) {
                  // Correct cache
                  $regenerate = false;
              }
          }
          
          if ($regenerate) {
              // Get the full image and make a thumbnail
              $img = Img::make($filePath);

That’s where it’s checking if the file already exists. You’d see those in the CMS library directory as files starting with tn_.

brodkin · September 22, 2023, 12:28am

Greetings to you both! I appreciate you looking into this.

I originally thought that v3.3.3 was the latest version available, but I didn’t get the memo that you guys had switched to GitHub from Docker Hub for image hosting. Now on v3.3.8! Thanks to some inspiration from @ProServ I also profiled my thumbnail downloads. Not sure if there is any code difference, but I did see decent performance improvement on the new version.

Some further digging has led me to the following conclusions:

My team generates images at a needlessly high quality. Many images are over 3 MB due to file format, bit depth, transparency and other various factors. While not an unreasonable size for production, they’re not web-optimized and converting many of them to thumbnails on page load is a long process.
The media picker is designed such that it blocks the display of all thumbnails until the final thumbnail is shown. This means that any single thumbnail with an excessive processing time prevents the display of several images that had loaded in just a few seconds.
The previous also goes against user psychology since there is no progress indicator. I know the layout editor got a major redesign in v4 so this may be a thing of the past, but I wanted to offer the feedback in case it has value.

Thank you again! I’ll try to clean up my team’s habits to see if we can improve the user experience on our end.

ProServ · September 22, 2023, 10:10am

Don’t hesitate subscribe to newsletter: Blog | Xibo Digital Signage

Or directly from your customer account

damien · December 1, 2023, 12:00pm

Hi there !

Pleased to see I’m not the only one struggling with the thumbmails loading in the layout editor.

I can tell after upgrading to Xibo v4 (Docker version) that thumbnails still take ages to load every time I go on the layer editor. It even seems slower than in v3.1.2.
Maybe the size of the images is the culprit (some are >6MB large).

I will try with smaller images and give you feedback.

system · March 1, 2024, 6:00pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.