Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
pstarr
4,835 PointsSVG Interactive Infographic in Drupal?
I've created an SVG infographic (in Illustrator then exported as SVG) with a little bit of CSS/JS animation. I can't seem to figure out how to host this infographic on Drupal and Wordpress (two different sites). Should I host it through a third party or is there a way to embed/add/upload it directly? I'm so lost. Thanks!
5 Answers
Kevin Lozandier
Courses Plus Student 53,747 PointsWordpress and Drupal both have conventions on how to dynamically change the content inside templates or page_types.
Wordpress for example has single.php, home.php, category.php, & other templates/page_types define as part of its https://codex.wordpress.org/Template_Hierarchy.
From what it sounds, you need to look up such things for both Wordpress and Drupal and appropriately embed or reference the SVG properly.
From there, you must code in the header of either one's header template file the .js and .css files for their effects be correctly attached to the SVG when you navigate your site to the point the appropriate template reveals the SVG with its instantiation (when it makes sense for it to be created and shown to the user).
Depending on how dynamic your SVG(s) must be, you may need to use a plug-in like Advanced Custom Fields or programmatically do it using Wordpress's API to do it using PHP. I highly recommend the former if you need to go this route, and Treehouse has several classes that cover this sort of style.
Is this better help?
Kevin Lozandier
Courses Plus Student 53,747 PointsHi, Paepin Goff:
You should be able to embed it in your html and attach the appropriate js and css files to make it work just like it does on your local server.
You can use a CDN to upload the SVG in one place to then be fetched by either site, but that may be an overoptimization to do at this point.
I would make sure it works just by embeding or linking to your SVG via the src attribute of an image tag to a valid location. Then you can consider a further an optimization like that based on your performance budget.
Does that make sense so far?
pstarr
4,835 PointsHi, Kevin! Thanks for your response. I'm still a little confused, though---sorry!
It seems like the process of running it locally (through Terminal local hosting) is different than uploading to Drupal/Wordpress. I know it sounds silly, but I have no idea how to get those files to communicate on a page through one of those platforms.
I currently have the SVG file and HTML files separate in the same folder. (This is how I'm previewing it locally.) If I embed the SVG into the HTML where do I put the HTML doc on Drupal/Wordpress? Surely I can't just copy and past HTML into a page, right? I'm thinking the files have to both be uploaded to the server somehow---is that correct?
Thanks so much for your help!!
pstarr
4,835 PointsAh, yes! This is amazing! I hadn't thought about approaching it from the page_types/templates angle which seems to be the only way to do it. I was having trouble finding answers on my own because I didn't exactly know how to ask my question. This clears it up for me. Thanks for giving the information I needed to work it out---I can't tell you how thankful I am for your help. You rock =]
Kevin Lozandier
Courses Plus Student 53,747 PointsNo problem, good luck with successfully implementing your SVG infographic on your site.
Feel free to keep me and the other moderators informed of your efforts doing so...