Using Perch layouts and SVG

Steps to build a template with an unordered list html tag and a unique css or each inline svg. By the end I’ll get a unique list of assets to apply custom css.

Plan

Build a template with a li tag and a unique css tag for each svg inline. In the end I'll get a unique unordered list of assets starting with the chinese horoscope.

Skills

  • How to upload a inline svg through Perch
  • How to assign each li tag a custom CSS

Steps

  • Add new template file

This method lets me upload each svg separately but keep them as a unit for use on multiple pages. I'm using Perch to manage the asset.

- I've saved the template file in a sub folder /content/blocks/vector_list.html
- I've organized for blocks to make it remind me that it will be reused. 
  • Add new layout file
  • Save svg files in layout folder and rename as php
  • Raw asset can be imported into other templates for custom markup

Links

Here are some links gathered during research to help develop the solution.

Tags:


← Previous Using Let’s Encrypt to secure my site My Dev Tools c. 2017 Next →