Skip to content
Learn Netverks
0

interactive SVG on drupal

asked 8 hours ago by @qa-g8oul7urmyqfryou0hvh 0 rep · 59 views

javascript html css drupal

I created a rather simple interactive illustration with html (an <svg> with four <button>, all inside a <figure>) with a bit of css and js so that when the user clicks the buttons only specific pieces of the svg are displayed, or change color, size, position etc. It works exactly as intended when on a standalone webpage. But now I need to add it to an article that's published on a webzine built with Drupal - and I have no clue on how to do that.

The webmaster tells me he can't simply copy/paste my code on his site; that he can only work with made-for-drupal content and modules and whatnots - which I don't know at all.

Is there a drupal expert around here that could hint towards a workaround? What would be the best strategy when you want to insert custom code on a Drupal website? In order to publish nicer content beyond mere text + images - like interactive features, scroll or button-driven animation etc. ?

Thanks for your advice!

Comments on this question (0)

Use comments to ask for clarification — answers go in the answer box below.

Log in to comment on this question.

4 answers

4

I think this is a problem your webmaster should be able to help you solve. What else is a webmaster for? Any webpage should be able to accept normal HTML.

Riley West · 0 rep · 8 hours ago

1

TL;DR: for external publications (e.g on a webzine) stick to common snippet solutions such as github pages, codepens, jsfiddles, stackblitz, codeSandbox etc.

The external webzine's webmaster has indeed a very valid point: the main problem here is the fact that SVG is a quite unique hybrid between self-contained image asset and »DOM-include«.

Most CMS such as Drupal, Joomla, Wordpress etc. by default block direct HTML/SVG injections for good reasons.

The obvious villain would be injected JavaScripts but even if we strip these we may still be running into troubles concerning non-scoped CSS bleeding into the main DOM stylesheets that may easily »deface« or just ruin your website's appearance.

Casey Price · 0 rep · 8 hours ago

0

I understand the security concern, as well as the risk of ruining the interface. But shouldn't it be simply a matter of validation before publication? of setting up the right process for this kind of custom feature? I mean: the code for my interactive illustration is quite short and very basic, with no framework, no libraries or apis: just a few lines of plain html/css/js. It shouldn't be that hard to review it and check wether it poses security/UI risks or not, and to correct it if needed.

I'm very surprised by the limits of those big CMS. Especially for webzine-like sites: if they can't deliver the full front-end experience, with interactions and animations, then they're nothing more than a very complicated way of posting PDFs..........

Alex Price · 0 rep · 8 hours ago

0

Couldn't agree more... Let's say the guy hasn't been very cooperative. My idea is only hassle for him. Hence my naive quest for an easy solution that I could have pointed him to...

Jamie West · 0 rep · 8 hours ago

Your answer