Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Re: How do I suppress a "missing form" error?
Hehe, then my sites seem already running on txp 5.
Actually, <txp:image_info /> is probably not the best place for it, but <txp:evaluate /> might implement some raw xml import/process functionality, since it already uses a dom parser. Even in 4.9, maybe?
Offline
Re: How do I suppress a "missing form" error?
etc wrote #340418:
Actually,
<txp:image_info />is probably not the best place for it, but<txp:evaluate />might implement some raw xml import/process functionality, since it already uses a dom parser. Even in 4.9, maybe?
That’s a great idea. Love it. And not just applicable to images.
If it can be squeezed in now then it rounds off the SVG support nicely and paves the way for other amazing front-end processing tricks.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Re: How do I suppress a "missing form" error?
Woah, this thread came a long way since I last checked in. Great feedback and ideas. Philippe, that makes absolute sense what you say. My case is a logo with different coloured parts that change with different backgrounds. I thought i was “being clever” by assigning the path groups inside the svg a css variable as the colour (with fallback) and then setting that variable via css depending on context. But I wonder if it’s backfiring by making the page source larger and not so easily cacheable. What is your educated opiniion on these options:
- The ‘clever’ way with the svg inserted into the source two (sometimes three) times with css variables doing the colour switching.
- Saving three preset colour variants of the logo and simply inserting the svgs as images. Presumably, the browser doesn’t need to reload what has already been loaded on another page?
- Variant 1 but using etc_cache to store the inserted svgs. Perhaps that retrofits caching to the insert-in-source variant?
One other idea (that I need to check). You can insert svg collections as symbolsets and then use the svg symbols in your pages. I can’t remember precisely, but I have an inkling that you can control some (all?) of the contents via css. The symbolset file is loaded once as an external resource, so is potentially cached by the browser.
etc wrote #340399:
Exactly. So what would be a natural syntax:
form="my_form?", maybe?
Of the two, |* or ? I think I prefer the pipe-star.
TXP Builders – finely-crafted code, design and txp
Offline
Re: How do I suppress a "missing form" error?
jakob wrote #340424:
[…]
- The ‘clever’ way with the svg inserted into the source two (sometimes three) times with css variables doing the colour switching.
- Saving three preset colour variants of the logo and simply inserting the svgs as images. Presumably, the browser doesn’t need to reload what has already been loaded on another page?
- Variant 1 but using etc_cache to store the inserted svgs. Perhaps that retrofits caching to the insert-in-source variant?
One other idea (that I need to check). You can insert svg collections as symbolsets and then
usethe svg symbols in your pages. I can’t remember precisely, but I have an inkling that you can control some (all?) of the contents via css. The symbolset file is loaded once as an external resource, so is potentially cached by the browser.
That last option (external SVG with <use /> suffers from the same problem as the <img src=""> approach in that you can’t go into the shadowdom – all you can style is the <svg/> itself. This article (dev.to/javar/external-svgs-that-you-can-style-2a37) suggest a possible but limited workaround with fill="currentColor" I haven’t tested.
Depending on the size of the SVG option 2 (use multiple versions loaded as img) is probably the most performant but a little less flexible. Inserting the whole SVG block (minified?) in the html is more flexible. Caching is a bit more of an issue, but gzip works very well on SVG blocks. And as you say, etc_cache might help.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: How do I suppress a "missing form" error?
I guess we mean the client-side cache here, so etc_cache wouldn’t help much. But you can borrow the idea of HTMX or its lightweight alternative HTMZ
- store SVG as ‘external’ file
- include this file via a hidden
iframe - move the iframe content to the main DOM on load
Here is a prototype:
<style>
svg path {fill: red;}
</style>
<script>
function htmz(frame) {
frame.replaceWith(...frame.contentDocument.children);
}
</script>
<iframe hidden src="path/to/image.svg" onload="htmz(this)"></iframe>Not fully tested, but should be straightforward and cacheable.
Offline
Re: How do I suppress a "missing form" error?
In 166 bytes of code?! What’s not to love about htmz?! That could be very handy for including, say, a cutdown Images panel for article image selection, among other uses.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Re: How do I suppress a "missing form" error?
Each iframe cpu/memory overhead is like opening another window, so few is fine, but many can be problematic, especially in mobile browsers.
Offline
Re: How do I suppress a "missing form" error?
Absolutely. Everything in moderation.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Re: How do I suppress a "missing form" error?
Yep. But even with one frame, this trick does not work as smoothly as img or direct svg inclusion. Even when cached, the image blinks on page reload.
Offline
Re: How do I suppress a "missing form" error?
I’ve always ended up with svg (as terse as I can make it) in the html — every other approach has had one pitfall or another.
You could try uploading your svgs as individual ‘characters’ in a custom font using icomoon. Tiny font file, cached.
Offline
Re: How do I suppress a "missing form" error?
etc wrote #340429:
I guess we mean the client-side cache here, so
etc_cachewouldn’t help much. But you can borrow the idea of HTMX or its lightweight alternative HTMZ
- store SVG as ‘external’ file
- include this file via a hidden
iframe- move the iframe content to the main DOM on load
iframe being usually loaded as a low(-er)-priority resource, I am not sure this improves the situation all that much (load content of frame, … , wait till Dom is fully loaded, run script to clone and style). If the SVG must be displayed near the top of the page that could cause problems.
Depending on the workflows Julian actually needs, it might be cheaper and faster to just swallow the cost of the SVG block inside the HTML. Bit more bits to download, but the HTML is the first to be parsed and rendered.
Also – how big is the SVG block vs total weight of the page?
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: How do I suppress a "missing form" error?
jakob wrote #340424:
The ‘clever’ way with the svg inserted into the source two (sometimes three) times with css variables doing the colour switching.
Thinking out loud, would this be any easier if our SVG were somehow parse()able? Like, I dunno allowing <txp:...> tags or some sort of {replacement} inside the SVG body and then passing the replacement values in via <txp:image> attributes or something?
Not saying this is achievable or possible in a sane way, just asking the question if that sort of approach would solve your initial problem of trying to vary the colours inside the images on the fly.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Offline
Re: How do I suppress a "missing form" error?
etc wrote #340449:
True, it only works well when accompanied with some ‘reveal’ effect. Various alternatives (
embed,scriptetc) suffer from the same problem.
For secondary content, or some element that displays further down the page, it could be a neat trick though.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
phiw13 on Codeberg
Offline
Re: How do I suppress a "missing form" error?
In Chromium-based browsers, JS fetch seems to work remarkably well (even without priority: "high" parameter) comparatively to Firefox. Priority seems to be the bottleneck here, dom transforms take just few milliseconds.
phiw13 wrote #340450:
For secondary content, or some element that displays further down the page, it could be a neat trick though.
It’s also nice for updating page parts on user interaction (clicks etc), though I’m not sure the overhead is worth saving few lines of JS code.
Offline