Overriding the thumbnail size for SVG images in admin side list

gaekwad · Today 13:21:07

Technicals: Textpattern 4.9.1, all images managed by admin side are SVG with a native size of 24×24.

The thumbnail being used in the list is about 240×240, which adds a lot of space around the other table row contents and there’s lots of scrolling down the page. Like this:

Is there a way to override the image thumbnail size in the images list? I understand there’s no thumbnail functionality in the SVG image panel itself, that makes sense.

Edit: I can disable the thumbnail column easily enough, but a quick reference thumbnail in a more size-appropriate way would be useful.

Advice and suggestions warmly welcomed. Thank you.

Last edited by gaekwad (Today 13:28:57)

Bloke · Today 14:32:17

Hmmm yeah. Not sure how best to handle that, short of a separate image size value solely for SVGs.

There’s an argument that SVGs are for small graphics and icons, which probably does cover the majority of use cases. But I’m not sure I’d like to blindly assume that’s the case and treat them differently by default.

For example, some SVGs are fiendishly complex, where people use them to show off skills and stuff:

ibb.co/0jjpSHd7

So, in summary, not sure. Does anyone have any cool ideas how we could sanely manage this? I guess a tiny weeny plugin that detects the file type and applies a fixed width would work. There’s a callback specifically for that situation.

gaekwad · Today 14:46:17

Bloke wrote #342680:

Not sure how best to handle that, short of a separate image size value solely for SVGs.

Thanks, Bloke – I appreciate your take on this. I’ll have a think on this – I can hide the thumbnail column easily enough for now.

jakob · Today 16:21:35

Two ideas:

1. If you assign your social-media icons to their own image category in textpattern, then you could add a custom.css to your admin theme and use CSS’s :has to make the thumbnail image for all images in that category display smaller. For example, say your category is called “icon”, you could do this:

.txp-list tr:has(.txp-list-col-category span[title="icon"]) .content-image {
    width: 48px;
    height: 48px;
}

(looks pretty horrible, I know) Check the admin source to get the right title attribute. It will match the image category name.

2. Another option would be to use a different approach for these small and relatively common icons, and reserve the images panel for svg graphics that are used as article content.

You can group common svg icons in an svg symbolset and then reference the icons within it as and when you need them. The browser will cache the symbolset on first load, so really it’s only a question of not going overboard with hundreds of icons (like fontawesome does).

A symbolset looks like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="display:none;">
    <symbol viewBox="0 0 24 24" id="arrow-up">
        <path d="M13.0001 7.82843V20H11.0001V7.82843L5.63614 13.1924L4.22192 11.7782L12.0001 4L19.7783 11.7782L18.3641 13.1924L13.0001 7.82843Z"></path>
    </symbol>
    <symbol viewBox="0 0 24 24" id="arrow-down">
        <path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"></path>
    </symbol>
    <symbol viewBox="0 0 24 24" id="arrow-left">
        <path d="M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82 10.9999Z"></path>
    </symbol>
    …
</svg>

You could save that in your assets folder as site-icons.svg and use it like this in your code:

<!-- #arrow-up refers to the id in the symbolset -->
<svg class="icon" aria-hidden="true">
    <use href="/path/to/your/assets/site-icons.svg#arrow-up"></use>
</svg>

You can make this little codesnippet into a <txp::icon icon="arrow-up" /> shortcode for quicker use and expand on it if you need special situations (e.g. alignment classes or icon size overrides) or want it to announce its purpose to screen readers.

If you misuse the sort order column of Textpattern’s links, you can put the id value of the icon in there (or use my jcr_link_custom plugin) and output your social media links directly from the links panel.

Some icon producers will automatically make symbolsets for you, but they’re easy enough to make by hand too.

Bloke · Today 16:34:18

That’s a neat idea about the category and CSS. How about, if the category is set, I add that as a classname to the thumbnail column cell? And any unassigned category gets, I dunno, txp_no_category? Would that make the selector any saner?

Any other thoughts on this approach? Would it be better to apply the class to the row <tr> instead?

jakob · Today 16:49:59

That would make it easier, yes. In general, the admin side could have a few more specific class hooks, and I’m sure Philippe and Gary have more detailed opinions about that.

Bloke · Today 17:03:44

Cool. If we can improve the somewhat sporadic and opinionated or not-so-helpful class names that have accumulated over time, now’s an ideal opportunity to rationalise them, make them more consistent, and more useful.

If someone wants to start a thread or open an issue to keep it on our radar, we can look at it as we iterate the markup for Txp 5.0.0.

gaekwad · Today 17:18:28

jakob wrote #342684:

Two ideas:

Thank you, jakob – your reply was really helpful – much appreciated!

Textpattern CMS

Textpattern CMS support forum

#1 Today 13:21:07