bpb54321

/**
 * Echo a picture element in WordPress.
 *
 * @param Array of Numbers $ids An array of $ids for attachments, each attachment being a different art-directed crop of the same "image entity".  For example, for the image "My Dog", you could have id's for "My Dog Portrait" and "My Dog Landscape".
 * @param String $default_image_size The WordPress image size name for the image that you'd like to use as the <picture> element's default image src, in <img src="">, which older browsers see if they don't support the <picture> element.
 * @param Number $default_image_id The id of the image crop to use as the default image crop.
 * @param Array of Strings $full_image_names An array of strings of WordPress image size names that correspond to the "full" or "largest" dimensions of each crop.
 * @param Array of Strings $media_queries An array of media queries corresponding to the different image id's.  Media queries must use the (max-width: breakpoint) format, and be in order from lowest to highest.  The last array elemen

bpb54321

#!/bin/sh

DEPLOY_BRANCH="${GIT_BRANCH##origin/}"

case $DEPLOY_BRANCH in

  master)
    # DEPLOY_PATH is relative to the home directory when you ssh in to the server
    DEPLOY_PATH='~/annualreport2016'
    ;;

bpb54321

<div class="hero js-scale-media-container">
  <img class="hero__preloader-image" src="fpo/images/TOKY_preloader.gif" alt="TOKY">
  <video class="hero__video js-scale-media" autoplay playsinline loop muted>
    <source src="fpo/video/toky_background_sd_640x360.mp4" type="video/mp4">
  </video>
  <div class="hero__overlay-block">
    <div class="hero__slash-label animate-slide-up-100px-from-below-fade-in">At Toky</div>
    <h1 class="hero__header-1 animate-slide-up-100px-from-below-fade-in-first-delay">We believe our world can be more thoughtful, more humane, and more beautiful.</h1>
    <a href="/what-we-do/" class="hero__link-button hero__link-button--clear-red animate-slide-up-100px-from-below-fade-in-second-delay">About TOKY</a>
  </div>

bpb54321

/**
 * Echo a picture element, with auto-cropping based on the image size names that you have created in functions.php.
 *
 * @param Number $id The id of the image (attachment) that you want to display.
 * @param ArrayObject $full_image_names An array of strings of WordPress image size names that correspond to the
 *                                      "full" or "largest" dimensions of each crop.
 * @param ArrayObject $media_queries An array of media queries describing under which conditions you want each image
 *                                   size to display.
 * @param ArrayObject $sizes An array of width media queries and image width descriptors describing the width of the
 *                           image on the page in each <source> media condition.

bpb54321

<?php
//region Hero Video Iframe
$iframe = get_field( 'hero_video' );

preg_match( '/src="(\S+)"/', $iframe, $matches );

// Get the first capture group, the stuff inside the 'src' attribute.
// The variable $matches is automatically initialized.
// $matches[0] = the match of the whole regular expression
// $matches[1] = the contents of the first capture group

bpb54321

<address itemscope itemtype="http://schema.org/PostalAddress">
          <a href="" target="_blank" rel="noreferrer" class="" >
            <span itemprop="streetAddress">20 Commerce St.</span><br><span itemprop="addressLocality">Springfield</span>, <span itemprop="addressRegion">NJ</span> <span itemprop="postalCode">07081</span>
          </a>
        </address>

bpb54321

/**
   * Formats a bare bones phone number with parentheses and dashes.
   * 
   * @param $phone A 10-digit string with no spaces, representing a number.
   *
   * @return string The formatted number.
   */
  function format_phone_number($phone) {
    $area_code = substr($phone, 0, 3);
    $first_three = substr($phone, 3, 3);

bpb54321

<img class="zoom-image__image" sizes="(max-width: 768px) calc(100vw - 40px), (max-width: 960px) 345px, (max-width: 1200px) 455px, 555px" srcset="https://unsplash.it/374/374 374w, https://unsplash.it/748/748 748w, https://unsplash.it/1122/1122 1122w, https://unsplash.it/728/728 728w, https://unsplash.it/1456/1456 1456w, https://unsplash.it/2184/2184 2184w, https://unsplash.it/345/345 345w, https://unsplash.it/690/690 690w, https://unsplash.it/1035/1035 1035w" src="https://unsplash.it/374/374" alt="Adrian Walker at STL Fashion Week 1">

bpb54321

<div class="hero-image hero-image--fixed-height-800">
		<picture>
		<source srcset="https://unsplash.it/414/800 414w, https://unsplash.it/828/1600 828w, https://unsplash.it/1242/2400 1242w" sizes="100vw" media="(max-width: 414px)">
		<source srcset="https://unsplash.it/768/800 768w, https://unsplash.it/1536/1600 1536w, https://unsplash.it/2304/2400 2304w" sizes="100vw" media="(max-width: 768px)">
		<source srcset="https://unsplash.it/960/800 960w, https://unsplash.it/1920/1600 1920w, https://unsplash.it/2880/2400 2880w" sizes="100vw">
		<img class="hero-image__image" src="https://unsplash.it/414/800" alt="A black sloping roof on a building">
	</picture>
</div>

bpb54321

<div class="slideshow">
  <div class="slideshow__inner">
    <nav class="slideshow__navigation">
      <h2 class="visuallyhidden">Slideshow Navigation</h2>
      <ul class='slideshow__navigation-list'>
        <li class='slideshow__navigation-item'>
          <button title="Previous" class="slideshow__navigation-button slideshow__navigation-button--previous" aria-label="Previous Slide">
            <svg class="slideshow__previous-arrow">
              <use xlink:href="#arrow-circle-previous"/>
            </svg>