Documentation for managing and editing this site

Background Positioned Images

  • Eg. – Add a div structured as below:
    <div id="tomatoes"
    class="absImg headerImg"
    data-src="//buybc.gov.bc.ca/app/uploads/sites/386/2019/11/tomatoes.png"
    data-alt="Tomatoes" /></div>
  • ‘id’: can be any name so long as it is not duplicated by another on the page
  • ‘class’: must have absImg in order for the page to render it properly
  • ‘class’: must also include the optional headerImg if the image is meant to be part of the header area
  • ‘data-src’: the URL path to the image
  • ‘data-alt’: the description of the image for accessibility
  • Finally the image is positioned via its ID in the CSS styles using the following attributes: top: 0vh|px; left: 0vw|px; right: auto; bottom: auto; width: 0vw|px; z-index: 0; – for scaleable results always position from the top in ‘vh’ units and always set the bottom to ‘auto’.x Right or left can be used for lateral positioning with ‘vw’ units, the opposite always set to ‘auto’.
  • Fixed positioning is set with ‘px’ units.

Buttons (links)

  • Use the following format to add button links and replace the link path and button label (in green):
  • <a class=”btn btn-lg” href=”path“>Button label</a>
  • Add the "external" class to the others to force the link to open in a new tab or window

Images: in-page large & responsive

  • Use the following format to add images in a responsive container and replace the image path (in green):
  • <div class="img-rounded-container"><img class="img-responsive fluid" src="path-to-image.jpg" alt="Image description" /></div>
  • Important note: Images and videos (see below) are typically added without inset columns. Use the Bootstrap class xs-12-column within a separate row to gain the outset image/video effect.

Infographics: What’s from B.C. page

  • Infographics are vector SVG images inlined through CSS variables. Any changes will require modifying the image and Base64 encoding the SVG to be added as a background image into the CSS for its related column.
  • Accessible content is added and visibly hidden to enable screen readers to have access to the infographic information.

Landing pages with automatic aggregation

  • Landing pages must use the WordPress “Full Width” template assigned under Page Attributes
  • All aggregated links must be included in the Breadcrumb Menu
  • To omit a breadcrumb link from the Landing page link aggregation add the class "not-on-landing" to the CSS Classes (optional) field of the menu item (see: Recipe Archive in the Breadcrumb Menu)

Menus

Main Menu (blue drop down)

  • Managed through the Site Header Menu page
  • To avoid WordPress adding unexpected paragraphs and breaks the menu content is contained in the page’s Custom HTML Field

Footer Menu (inline page bottom)

  • Managed through the Global Content >  Site Footer Menu page
  • As with the Main Menu this menu content is contained in the page’s Custom HTML Field

Breadcrumb menu

  • This menu drives both the breadcrumb navigation as well as the aggregated links on section landing pages (see below)
  • It is specified as the “Primary Navigation” but is not driving the Main Menu (see above)

Page banners and coloured headers

  • To enable the section coloration and reserved height of a banner region at the top of a page, the page must be added to the Breadcrumb Menu for that section.

Past Events: aggregated content

  • Create past events by making a new post and add the ‘Past Event’ category to include it in the Past Events listing

Templates: Current Event

  • Create new Current Events by cloning the “Current Event Template” post. Unlike recipes, DO NOT add the ‘Past Event’ category as this will add it to the Past Event details page
  • Within the template are features that can be used to create swappable content in the page. These include navigation links and content areas that are linked and named identically. Ie: the link href will contain the hashed ID of the section (eg: href="#section1") while the ID of the section below will be the unwashed version (eg: id="section1")
  • Remove class="innerNav" from the utility link if it is not meant to switch to a local in-page section. Eg: the 2019 or 2018 links in the ECNF current event.
  • The Event Utilities at the top of the template include an optional banner image that can be swapped out with a link to a more specific banner image. The page will render the image in the correct position if left in the template configuration.
  • Current Events is a manual addition/change to both Header and Footer menu.
  • The new event may also be added as a Feature to “The Latest from Buy BC” homepage section by creating a new Feature content type.

Templates: Recipes and Archives

  • Create new recipes by cloning the “Recipe Template” post. Add the ‘Recipe’ category to include it in the Recipe Archives.
  • The Recipe post must include a Featured Image attachment or the Recipe Archives page layout will error.

Updating the Featured Recipe: touchpoints

  • Current recent recipe requires a manual addition/change to three menus: Site Header Menu page, Site Footer Menu page and Menu: Breadcrumb navigation
  • The Homepage “Home Section 5 – Featured Recipe” section will also need to be updated. This section has settings to enable constrained display of the featured recipe image without creating a separate image for this area:
    • When changing the featured image tag only update the “data-bg=” and “data-bg-pos” attributes. DO NOT edit the “src” attribute.
    • data-bg: the actual path to the image, this is usually in the src attribute but in this case the src is a transparent placeholder.
    • data-bg-pos: the positioning of the image as a background. Some images may be too tall for the reserved image area. In such cases this attribute can use one of the following settings to position the image vertically in this space: top, bottom or center eg: data-bg-pos=”bottom”. Alternatively for finer positioning you can use a percentage between 0% (top) and 100% (bottom) eg: data-bg-pos=”66%”.

    Recipe Archives

    • In order for the automated aggregation to break the Chef Name and Restaurant headlines on the archive listing the Restaurant name must begin with the tilde character ‘~’. When the page renders the tilde will be removed and a line break inserted. (The tilde is also removed from the headline on the actual recipe page as well.)

Venues

Map specific venue details

  • In order for the embedded map and Google Maps link to be properly generated the venues dataset will need three map specific items: latitude, longitude & google_place_id
  • To get the actual lat/long of a location, you will need to scrape information from Google Earth*:
    • Search for the location by name in Google Earth
    • Copy the current search results to the clipboard as KML (second icon under the search card results)
    • Paste the KML results into a text editor
    • Locate the “point” coordinates:
      <Point>
          <coordinates>-123.1165405,49.26307479999999,0</coordinates>
      </Point>
    • Capture the latitude eg: 49.26307479999999 and,
    • Capture the longitude eg: -123.1165405
  • To find the google_place_id value open the Google Place ID Finder and search by name/address and select the location found in the search suggestions. Then capture the Place ID in the resulting market popup eg: ChIJ-z29a91zhlQRgI2lflpubNM
  • *Note: using Google Earth to find lat/long will provide exact marker coordinates. Using Google Maps or other tools will likely introduce positioning errors as the lat/long information you can retrieve from these other systems are not the same as the point coordinates.

Youtube Videos

  • Use the following format to add video in a responsive container and replace the YouTube video id (in green):
  • <div class="video-container"><div class='embed-container'><iframe src='https://www.youtube.com/embed/HEGqJ0aExhA' frameborder='0' allowfullscreen></iframe></div></div>

Managing Products and Venues

  • Export or download a CSV version of the spreadsheet.
  • Convert the CSV to a JSON file: http://www.convertcsv.com/csv-to-json.htm
  • Validate the JSON file at https://codebeautify.org/jsonvalidator
  • Name the file with the latest date eg: buybc-venues-2019-12-08.json or buybc-products-2019-12-05.json
  • Upload the file to the Media Library.
  • Copy the full path and paste into the JS file path for the related Vue components variable eg:
    • var EDL_JSON_URL = “https://…/buybc-venues-2019-12-08.json”;
    • var PRODUCTS_JSON_URL = “https://…/buybc-products-2019-12-08.json”;
    • Make sure the path begins with https: and not http: