Documentation

# Updating Pie Chart Image

Instructions for updating the pie chart in the footer of the site & email.

# Requirements

The image must be provided in SVG format for optimal display and performance. To ensure the image is updated everywhere, as it may be linked externally, the existing image should be updated. Do not create a new image at a new image paths as that would require multiple updates. As of 2024-08 the webpages are the only ones that use the pie charts, it is not in use in email.

# Instructions

  1. Start the local version of the static site for testing by running lando start
  2. Open up a static site's main page http://savethechildren.lndo.site:8000/pages/ (opens new window)
  3. Locate the existing SVG image in /images/logos/pie-chart.svg
    (HTML component that embeds SVG directly into code on the static site and in reus_footer_global is /pages/components/_footer__pie-chart.php)
  4. Save the provided SVG on your hard drive as a separate file and pull it up side by side with the existing image.
  5. In the new image make sure that:
    • <?xml version="1.0" encoding="UTF-8"?> tag is removed, not necessary when embedded on page
    • The width and height attributes on the <svg> elements are set and match values in the viewBox attribute, ideally 190px wide and 180-190px high
    • The id is set to the same value as in the old image
    • The preserveAspectRatio attribute is included
    • Update all generics like cls-1 cls-2 cls-3 with custom values as they are set in the old iamge
  6. Run the updated new file through SVGO optimizer (opens new window), check that both width height and viewBox attributes are still set on <svg> tag
  7. Replace the original image /images/logos/pie-chart.svg with the new optimized image from step 6
  8. Update the text in /pages/components/_footer__finance_statement.php to match values in the chart.
  9. Test on the static site http://savethechildren.lndo.site:8000/pages/ (opens new window), make necesary adjustments as necessary
  10. Once the preview looks good:
    • View the reus_footer___pie_chart (opens new window) page on the static site. PHP code will embed the SVG image from it's location into this page.* Copy the source code of the page and page into Luminate reus_footer__pie_chart PageBuilder page
    • View the reus_footer___finance_statement (opens new window) page on the static site. PHP code will embed the SVG image from it's location into this page.
    • Copy the source code of the page and page into Luminate reus_footer__finance_statement PageBuilder page
  11. Test Luminate pages, make adjustments as necessary
  12. Commit the code

← Banner HTML explanation →