0

When working with SVGs in the control panel, thumbnails are broken because the system (understandably) can't generate thumbnails for SVGs.

In practice this is mostly fine because the SVGs still work properly elsewhere, but it's annoying to look at a broken thumbnails and to not be able to preview the image you selected.

My thought would be to use htaccess to redirect any request that looks like this:

/assets_content/_thumbs/logo.svg

to this:

/assets_content/logo.svg

What would that redirect look like?

It would require a little extra CSS to make sure the SVGs don't bust out of their containers, but that should be pretty straightforward.

Edit:

For the record, here's the first draft of the CSS I'm adding for SVG thumbnails. It tries to manage the width and adds a checkerboard background (so you can see all-white images):

.publish_field .filename img[src$=".svg"] {
   width: 100px;
   max-width: 100%;
   padding: 12px;
   background-color: rgba(0,0,0,.05);
   background-image: linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.05) 75%, rgba(0,0,0,.05)),
   linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.05) 75%, rgba(0,0,0,.05));
   background-size: 40px 40px;
   background-position: 0 0, 20px 20px;
}
4

A RewriteRule with a regex should do the trick.

RewriteRule ^/assets_content/_thumbs/?\.svg$ /assets_content/$1.svg [NC,L]
2
  • 1
    Awesome, thanks. I had to swap out the ? for (.*), but it's working great.
    – Tim
    Dec 17 '15 at 3:22
  • I also had to remove the ^ to get it to work.
    – Bob H
    Apr 28 '16 at 12:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.