Images are Renamed, File Path Broken

Thanks for reaching out and sorry to hear you’re running into an issue creating a static version of your WordPress site.

To better understand the situation and determine if the Windows maximum path length is the root cause, could you please provide the exact path of your site on the Windows file system? For a default site path using LocalWP with a Windows username “Username”, the path length for the logo file would be 193 characters:

C:\Users\<Username>\Local Sites\urbanbirdservices\app\public\wp-content\uploads\2024\03\elementor\thumbs\UBS-Logo-2024-02-06-High-Quality-Cornerless-qlggdi1juyf9cleg0psnukzxka2r3my325cxh7weie.png

When deployed to the default Local Directory target directory, this path extends to 227 characters:

C:\Users\<Username>\Local Sites\urbanbirdservices\app\public\wp-content\uploads\staatic\deploy\wp-content\uploads\2024\03\elementor\thumbs\UBS-Logo-2024-02-06-High-Quality-Cornerless-qlggdi1juyf9cleg0psnukzxka2r3my325cxh7weie.png,

which is still below the Windows default maximum path length of 260 characters (for more details, see Microsoft’s documentation on maximum file path length).

Given that you’re encountering a crawl error for the logo, it suggests there might be another underlying issue. Staatic functions by crawling/visiting each page and asset on your site as a regular (non-authenticated) visitor would. It follows any internal links within your site’s scope and processes them to ensure compatibility with a static site version.

To address the 404 error Staatic reports while attempting to retrieve the logo, please check if the logo displays correctly on the dynamic version of your site at https://urbanbirdservices.local. Also, verify if the logo URL referenced in the HTML source code of the page matches the one references in the error reported.

If reducing the path length resolves the issue, implementing shorter names before generating the static site is indeed the best practice.

Looking forward to your feedback to help resolve this issue.

Thank you so much for your in-depth reply and your willingness to give support! Your team is excellent.

To answer your requests:

1. The logo does display properly on https://urbanbirdservices.local.
2. Here are some file paths as requested:

The username given on my system is ‘zachb’ (my name) and yes, the file paths mostly follow the standard setup.

For the logo from within Local WP, which displays properly:
C:\Users\zachb\Local Sites\ubs-website\app\public\wp-content\uploads\elementor\thumbs\UBS-Logo-2024-02-06-High-Quality-Cornerless-qlggdi1juyf9cleg0psnukzxka2r3my325cxh7weie.png
Character length: 176
The fact that this PNG file here already has a file name with the appended 40 characters is interesting, as this file is within LocalWP, which may indiciate that this is an issue unrelated to Staatic.

For the logo from within the Staatic Export, which does not display properly:
C:/Users/zachb/Documents/Zach’s%20Documents/Projects/Active%20Projects/UBS%20Wordpress%20Migration/Project%20Files/Staatic%20Files/Staatic%20Export%201.1/wp-content/uploads/elementor/thumbs/UBS-Logo-2024-02-06-High-Quality-Cornerless-qlggdi1juyf9cleg0psnukzxka2r3my325cxh7weie.png
Character length: 280

When the Staatic Export is moved into a lower nested folder, such as the following:
C:/Users/zachb/Documents/Staatic%20Export%201.1/wp-content/uploads/elementor/thumbs/UBS-Logo-2024-02-06-High-Quality-Cornerless-qlggdi1juyf9cleg0psnukzxka2r3my325cxh7weie.png
Character length: 174
the PNG does display as intended, which leads me to think it is an issue with the file path length.

If the PNG was able to retain the same name as it had received when entered into wordpress, then it would have the file path of:
C:/Users/zachb/Documents/Zach’s%20Documents/Projects/Active%20Projects/UBS%20Wordpress%20Migration/Project%20Files/Staatic%20Files/Staatic%20Export%201.1/wp-content/uploads/elementor/thumbs/UBS-Logo-2024-02-06-High-Quality-Cornerless.png
Character length: 237
Which leads me to think that the PNG would display as intended when named properly.

3. Checking if the logo URL referenced in the HTML source code of the page matches the one referenced in the error:

When on the dynamic version of the site, if I right-click to inspect the page or open the image in a new tab, the URL in both cases is given as:
https://urbanbirdservices.local/wp-content/uploads/elementor/thumbs/UBS-Logo-2024-02-06-High-Quality-Cornerless-qlggdi1juyf9cleg0psnukzxka2r3my325cxh7weie.png

The URL mentioned in the error was:
https://urbanbirdservices.local/wp-content/uploads/2024/03/elementor/thumbs/UBS-Logo-2024-02-06-High-Quality-Cornerless-qlggdi1juyf9cleg0psnukzxka2r3my325cxh7weie.png

These two are not the same, but I’m not sure what to make of that. I suppose that means the error is unrelated to the logo displaying?

Thank you for your timely reply! I look forward to hearing more about this.

Thank you for your detailed response and kind words! We’re happy to help.

After further investigation and trying to reproduce the exact issue you’re experiencing, we have identified several key points.

We can confirm that the issue you are seeing is indeed caused by the file path length exceeding the Windows maximum path length of 260 characters. Although Staatic correctly writes the files of the static version of your site into the configured target directory, certain applications and system functions may not handle it properly when the path length exceeds this limit.

Interestingly, when right-clicking the file with the long path in Explorer and selecting “Copy as path”, the path is converted using the 8.3 filename convention (short filenames), e.g., C:\Users\zachb\Documents\ZACHSD~1\Projects\ACTIVE~1\UBSWOR~1\PROJEC~1\STAATI~1\STAATI~1\WP-CON~1\uploads\ELEMEN~1\thumbs\UBS-LO~1.JPG. While the regular path does not display correctly in the browser, this shortened path does.

To make the static version of the site work, you will either need to use a web server to host it, or place the files in a different path that does not cause any file paths to exceed the limit of 260 characters when using Offline URLs.

The appended 40 characters to the PNG file name appear to be caused by Elementor. When selecting a custom image resolution, Elementor may generate a scaled version of the image at the exact resolution required, resulting in these longer filenames.

Regarding the URL mismatch, it is possible that there are two versions of the image, or the image path may have been altered in some way. Staatic simply takes over the file names as they appear on the dynamic version of your site and only alters the beginning of the URL to ensure compatibility with offline sites or different domains.

Hopefully, this information helps resolve the issue. If you continue to experience problems, please feel free to reopen the issue or open another topic, and we’ll be happy to assist further.

• This reply was modified 6 months ago by Team Staatic.

Ah, Elementor! Well, I’m glad the issue was unrelated to Staatic.

Yes, when I place the export onto a live web server, the PNG displays as intended. Thankfully, internet URLs have a much larger character limit, so the browsers don’t have the same problem that they do handling offline files. If I want to edit the file name to be closer to the original, that’s going to be a problem for the Elementor support forums or an additional plugin.

While I’d love to troubleshoot my exports from within very specific file paths, the solution here is really just to accept Window’s file path character limit and work around it by having the export on a live site or in a lower nested folder, or to just ignore that the file doesn’t display properly. Either way, this issue is unrelated to Staatic.

Thank you for your information and support!

Thanks for the update and confirmation. You’re very welcome! If you have any further questions or need additional assistance in the future, please don’t hesitate to reach out.