Icons not loading when Drupal installed in a sub-directory

Here my approach, i created a new variable called social_buttons_sprite_path that includes the sprite route using the base_path and it is used on tags to solve the issue.

Unfortunately this does not work for sites that are NOT installed in a subdirectory.

The base_url is no longer required to be set for site (since D8) so sites not needing this would be blank and then would end up missing the leading '/'.

Thanks to all commenters! Ended up altering better-social-sharing-buttons.html.twig in a custom theme:
{% set social_buttons_sprite = url('<front>')| render ~ social_buttons_sprite %}
and removing line 16 :
<div style="display: none">{% include social_buttons_sprite %}</div>

Hi @shelane Sorry, i can't understand in which scenario my approach does not work. I've tested in two environments in a development that is subdirectory and in production install in the root of a domain.

I undestand that base_url now is not configurable but it is set automatically by core and gets the correct value if is a subdirectory or not.

Can you bringme more context or and example to understand in which use case use $base_ulr does not work?, in order to test and find a better aproach.

Provided a patch which resolves the relevant URL using Drupal's Uri resolver rather than accessing the global $base_url variable.

With the #9 patch and after installing 4.x-dev, I've been getting this error:

The website encountered an unexpected error. Please try again later.

Twig\Error\LoaderError: Template "/a/b/c/modules/contrib/better_social_sharing_buttons/assets/dist/sprites/social-icons--square.svg" is not defined in "modules/contrib/better_social_sharing_buttons/templates/better-social-sharing-buttons.html.twig" at line 4. in Twig\Loader\ChainLoader->getCacheKey() (line 99 of /home/myhome/domains/mydomain.com/public_html/a/b/c/vendor/twig/twig/src/Loader/ChainLoader.php).

After some testing, the issue I am having is that whenever I have actual whole URL with domain and/or protocol (or the one that is written in the module) in the module file function better_social_sharing_buttons_preprocess_better_social_sharing_buttons(), line where you set the $variables['social_buttons_sprite'], I keep getting this error. Well, even if I remove the function Url::fromUri() completely from that line and just use a static string with correct subfolder path like "/a/b/c/path-here", I get same error. If I use just "/path-here", no error but the icons also won't load as the path is missing the subfolders. Manually adding protocol/domain to the url string also generates the error. If I set the actual subfolder path inside Twig template instead of the variable in module file, everything works fine.

Based on this fix from related issue from another module (https://www.drupal.org/files/issues/2022-09-28/3312270-claro-menu-twig-f...), I added ignore missing at the end of the include in Twig file, and everything works again, icons do load nicely and no errors. Feels a bit weird to me, as the svg file does exist, can be opened in browser, dpm() shows the correct path etc. Maybe Twig is still getting wrong path somehow? Anyways, I just wanted to add this here, maybe there is still some part in the code that doesn't take every case into consideration.

phonkala, what method are you using to add the sharing to your page? Through block place, through a field, or through a twig file call? How is your site run? Is it at the root of the domain or a subdirectory?

Hey @shelane!

My site is running in subdir in my dev environment, that is what I was trying indicate with the "/a/b/c" folder/url structure. The share buttons are in a block, in the Social Bar region of Olivero. Running Drupal 10.1.1.

I just did a fresh install of Drupal to subfolder "mydomain.dev/a/b/c/web/" to test this, with just Better Social Sharing Buttons installed. If I install the stable version of this module and place the share buttons into a block, the url path of the svg file points to "mydomain.dev/modules/contrib/better_social_sharing_buttons/assets/dist/sprites/social-icons--square.svg" so it is missing the subfolders and the icons won't show up. When I install the dev version, I once again get the same error I mentioned before. Here is the stack trace of it:

Twig\Environment->getTemplateClass() (Line: 204)
Drupal\Core\Template\TwigEnvironment->getTemplateClass() (Line: 319)
Twig\Template->loadTemplate() (Line: 45)
__TwigTemplate_95a24dd74af07297fa12b28b9477ba05->doDisplay() (Line: 394)
Twig\Template->displayWithErrorHandling() (Line: 367)
Twig\Template->display() (Line: 379)
Twig\Template->render() (Line: 40)
Twig\TemplateWrapper->render() (Line: 53)
twig_render_template() (Line: 372)
Drupal\Core\Theme\ThemeManager->render() (Line: 436)
Drupal\Core\Render\Renderer->doRender() (Line: 204)
Drupal\Core\Render\Renderer->render() (Line: 474)
Drupal\Core\Template\TwigExtension->escapeFilter() (Line: 90)
__TwigTemplate_d1731b982d08fea58c1650bd7940916b->block_content() (Line: 171)
Twig\Template->displayBlock() (Line: 74)
__TwigTemplate_d1731b982d08fea58c1650bd7940916b->doDisplay() (Line: 394)
Twig\Template->displayWithErrorHandling() (Line: 367)
Twig\Template->display() (Line: 379)
Twig\Template->render() (Line: 40)
Twig\TemplateWrapper->render() (Line: 53)
twig_render_template() (Line: 372)
Drupal\Core\Theme\ThemeManager->render() (Line: 436)
Drupal\Core\Render\Renderer->doRender() (Line: 449)
Drupal\Core\Render\Renderer->doRender() (Line: 204)
Drupal\Core\Render\Renderer->render() (Line: 474)
Drupal\Core\Template\TwigExtension->escapeFilter() (Line: 176)
__TwigTemplate_421e2c49b82c005693398eac1d302f3e->doDisplay() (Line: 394)
Twig\Template->displayWithErrorHandling() (Line: 367)
Twig\Template->display() (Line: 379)
Twig\Template->render() (Line: 40)
Twig\TemplateWrapper->render() (Line: 53)
twig_render_template() (Line: 372)
Drupal\Core\Theme\ThemeManager->render() (Line: 436)
Drupal\Core\Render\Renderer->doRender() (Line: 204)
Drupal\Core\Render\Renderer->render() (Line: 474)
Drupal\Core\Template\TwigExtension->escapeFilter() (Line: 93)
__TwigTemplate_70a02092721b37e59a3f82beed4828fe->doDisplay() (Line: 394)
Twig\Template->displayWithErrorHandling() (Line: 367)
Twig\Template->display() (Line: 379)
Twig\Template->render() (Line: 40)
Twig\TemplateWrapper->render() (Line: 53)
twig_render_template() (Line: 372)
Drupal\Core\Theme\ThemeManager->render() (Line: 436)
Drupal\Core\Render\Renderer->doRender() (Line: 204)
Drupal\Core\Render\Renderer->render() (Line: 158)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 583)
Drupal\Core\Render\Renderer->executeInRenderContext() (Line: 159)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse() (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray()
call_user_func() (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch() (Line: 171)
Symfony\Component\HttpKernel\HttpKernel->handleRaw() (Line: 74)
Symfony\Component\HttpKernel\HttpKernel->handle() (Line: 58)
Drupal\Core\StackMiddleware\Session->handle() (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle() (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass() (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle() (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle() (Line: 704)
Drupal\Core\DrupalKernel->handle() (Line: 19)

And if I then just add the "ignore missing" to the include in the module twig template file:

{# --- Include svg sprite --- #}
<div style="display: none">{% include social_buttons_sprite ignore missing %}</div>

everything starts to work correctly, svg url has the correct subfolder structure.

Also tested with Claro theme in Drupal 10, same issue.

I just realized, using the stable version of the module, there is actual content in the first div of the twig file:

{# --- Include svg sprite --- #}
<div style="display: none">{% include social_buttons_sprite %}</div>

When I'm checking it via Chrome dev console or just source code, inside the div, with stable version, there is the svg html tag and all it's inner content (defs, symbols, paths etc.).

When using the dev version with the "ignore missing" added to twig file include (to bypass the error I keep getting), that div is completely empty for me (<div style="display: none"></div>). So the "ignore missing" is clearly filling it's purpose, I guess the svg file just is not found for whatever reason in twig template and twig is ignoring it. However, the icons do work perfectly, even after clearing Drupal/browser cache.

EDIT: Tested printing the variable saved in "social_buttons_sprite" in the module file so added dpm($variables['social_buttons_sprite']); at the end of the function better_social_sharing_buttons_preprocess_better_social_sharing_buttons(). It is outputting /a/b/c/web/modules/contrib/better_social_sharing_buttons/assets/dist/sprites/social-icons--square.svg, which is perfectly correct and can be accessed via browser. I also tried manually adding the protocol / my domain to the string when setting the variable, but still same issue with twig, it just gives the error.

SECOND EDIT: After reading https://stackoverflow.com/questions/46934020/including-svg-in-twig-template I started wondering if this could be some Twig permissions issue?

Ahh I think I figured it out. I was thinking the

{# --- Include svg sprite --- #}
<div style="display: none">{% include social_buttons_sprite %}</div>

is required in Twig to even use the icons, but I guess it's there just for preloading purposes?

I believe using include for that actually includes the contents of the file into the code and doesn't actually even preload the image file. Also, based on the link I added at the end of my last comment (#15), there might be permission issues using include to load svg files inside Twig.

I googled how svg files should be preloaded in html and found this: https://stackoverflow.com/questions/62377727/how-to-preload-an-svg-image...

So based on that, I chanced the

{# --- Include svg sprite --- #}
<div style="display: none">{% include social_buttons_sprite %}</div>

into

{# --- Include svg sprite --- #}
<div style="display: none"><link rel="preload" href="{{ social_buttons_sprite }}" as="image" type="image/svg+xml" crossorigin="anonymous" /></div>

Now everything seems to work fine, no errors and icons do show up. I am not sure if preloading the svg still is "correct" (I've never used link tag anywhere but inside head tag), but I think the original way was just incorrect. I guess just adding basic img tag would work as well as the div is hidden anyways.