Some simple instructions in how to make this site SING

Parallax

<div class="jarallax" data-jarallax="" data-speed="0.2" style="background-image: url('[Image URL]');">
  <div class="parallaxContent header">
    <h2>[Page Title]</h2>
  </div>
</div>

Parallax with an Ad

<div class="videoHeader">
  <div class="jarallax" data-jarallax-video="https://player.vimeo.com/video/331131132?">
    <div class="parallaxContentVideo">
      <div class="parallaxContent">
        <h2 class="normalFont">ESCAPE WINTER!</h2>
        <p>FLY NONSTOP FROM LOS ANGELES (LAX) TO RAROTONGA, COOK ISLANDS</p>
        <div class="videoButtonFromContent">
          <div class="squareAll">
            <div class="line"></div>
            <div class="squareLeft"></div>
          </div>
          <div class="fromAmount">
            <p>from <span class="videoButtonPrice">US $695*</span></p>
          </div>
          <div class="squareAll">
            <div class="line"></div>
            <div class="squareRight"></div>
          </div>
        </div>
        <p>PER PERSON, ROUNDTRIP</p>
        <div class="button"><a href="https://www.airnewzealand.com/flights-to-cook-islands">View Offer</a></div>
      </div>
      <div class="upIcon"><img alt="down arrow" data-entity-type="file" data-entity-uuid="62aad65c-b7c0-4f05-8ce6-c7a24fd9bcb6" src="https://cookislands.travel/sites/default/files/inline-images/twoDownarrow.png" style="width: 100%; height:auto;">
      </div>
    </div>
  </div>
</div>

Left-Justified CTA

Put this in Parallax headers or Slideshows.

<div class="slide-card-wrapper">
  <div class="slide-card">
    <div class="pre-header">
      <div>Get off the beaten track...</div>
    </div>
    <div class="header">
      <h1>MAUKE EXCURSION</h1>
    </div>
    <div class="blurb">
      <div>$NZ699pp (twin share)</div>
    </div>
    <div class="cta">
      <a href="https://www.airraro.com/en/tours/2-nights-in-mauke" class="new-window" target="_blank" rel="noopener noreferrer">BOOK TODAY</a>
      <div class="terms">
        <div>Terms & Conditions Apply</div>
      </div>
    </div>
  </div>
</div>

Multiple CTAs

Image
Three Across

Put this in Parallax headers. Up to three...more gets cramped.

<div class="jarallax" data-jarallax="" data-speed="0.2" style="background-image: url('{{ 'public://2019-11/header_mauke.jpg' | image_style('full_win') }}');">
 <div class="slide-card-wrapper multiple">
  <div class="slide-card">
   <div class="pre-header">
    <div>Get off the beaten track...</div>
   </div>
   <div class="header">
    <h1>MAUKE EXCURSION</h1>
   </div>
   <div class="blurb">
    <div>$NZ699pp (twin share)</div>
   </div>
   <div class="cta">
    <a href="https://www.airraro.com/en/tours/2-nights-in-mauke" class="new-window" target="_blank" rel="noopener noreferrer">BOOK TODAY</a>
    <div class="terms">
     <div>Terms & Conditions Apply</div>
    </div>
   </div>
  </div>
  <div class="slide-card">
   <div class="pre-header">
    <div>Get off the beaten track...</div>
   </div>
   <div class="header">
    <h1>MAUKE EXCURSION</h1>
   </div>
   <div class="blurb">
    <div>$NZ699pp (twin share)</div>
   </div>
   <div class="cta">
    <a href="https://www.airraro.com/en/tours/2-nights-in-mauke" class="new-window" target="_blank" rel="noopener noreferrer">BOOK TODAY</a>
    <div class="terms">
     <div>Terms & Conditions Apply</div>
    </div>
   </div>
  </div>
  <div class="slide-card">
   <div class="pre-header">
    <div>Get off the beaten track...</div>
   </div>
   <div class="header">
    <h1>MAUKE EXCURSION</h1>
   </div>
   <div class="blurb">
    <div>$NZ699pp (twin share)</div>
   </div>
   <div class="cta">
    <a href="https://www.airraro.com/en/tours/2-nights-in-mauke" class="new-window" target="_blank" rel="noopener noreferrer">BOOK TODAY</a>
    <div class="terms">
     <div>Terms & Conditions Apply</div>
    </div>
   </div>
  </div>
 </div>
</div>

Fixed Pane (with the floral background)

<div class="fixedPane">
  <p>[Text]</p>
</div>

Long Text Pane

Version 1

<div class="longTextPane">
  <p><strong>[Section Header]</strong>
  [Regular Text]</p>
</div>

Version 2

<div class="longTextPane">
  <p><strong>[Section Header]</strong></p>
  <blockquote>
    <p>[Indented Text]</p>
  </blockquote>
  <p>[Regular Text]</p>
</div>

Slideshow

<div class="slideShowPane" data-slidesPerView="2">
  <img src="{{ 'public://kitesurfing-3.jpg' | image_style('max_1300x1300' }}" alt="[text]" />
  <img src="{{ 'public://kitesurfing-5.jpg' | image_style('max_1300x1300' }}" alt="[text]" />
  <img src="{{ 'public://kitesurfing-6.jpg' | image_style('max_1300x1300' }}" alt="[text]" />
  <img src="{{ 'public://kitesurfing-1.jpg' | image_style('max_1300x1300' }}" alt="[text]" />
  <img src="{{ 'public://kitesurfing-2.jpg' | image_style('max_1300x1300' }}" alt="[text]" />
  <img src="{{ 'public://kitesurfing-4.jpg' | image_style('max_1300x1300' }}" alt="[text]" />
</div>

Staggered Cards

<div class="staggeredCards">
 <a class="small" href="[Link]">
  <img src="[Image]" alt="[Alt]" class="noFit" />
  <div class="cardTitle">
   [Card Title]
  </div>
  <div class="cardDescription">
   [Card Description]
  </div>
 </a>
 <a class="medium" href="[Link]">
  <img src="[Image]" alt="[Alt]" class="cover" />
  <div class="cardCaption">
   [Card Caption]
  </div>
 </a>
</div>

Add the noFit class to the <img> tag if the image is filling the block when it shouldn't.

Staggered Columns

Note the order and position of the associated images.

<div class="staggeredColumns">
 <div>[<img alt="[1 Image Alt]" src="[1 Image URL]">]</div>
 <div class="description">
  <h2>[1 Title]</h2>
  <p>[1 Details]</p>
  <p><a href="[1 URL]" class="button">View More</a></p>
  <p></p>
 </div>
 <div class="description">
  <h2>[2 Title]</h2>
  <p>[2 Details]</p>
  <p><a href="[2 URL]" class="button">View More</a></p>
  <p></p>
 </div>
 <div><img alt="[2 Image Alt]" src="[2 Image Alt]"></div>
 <div>[<img alt="[3 Image Alt]" src="[3 Image URL]">]</div>
 <div class="description">
  <h2>[3 Title]</h2>
  <p>[3 Details]</p>
  <p><a href="[3 URL]" class="button">View More</a></p>
  <p></p>
 </div>
 <div class="description">
  <div class="description">
  <h2>[4 Title]</h2>
  <p>[4 Details]</p>
  <p><a href="[4 URL]" class="button">View More</a></p>
  <p></p>
 </div>
 <div><img alt="[4 Image Alt]" src="[4 Image Alt]"></div>
</div>

The activities listing

{{ drupal_view('suppliers', 'block_1', 'all', 46, 'all') }}

Parameter 1: The view name. Leave as "suppliers"
Parameter 2: The view page name. Leave as "block_1"
Parameter 3: The island term ID (tid). Check with the Taxonomy listing as a reference. 'all' shows all items.
Parameter 4: The supplier type. Check with the Taxonomy listing as a reference. 'all' shows all items.
Parameter 5: The featured taxonomy. Check with the Taxonomy listing as a reference. 'all' shows all items.

Here's a LONG listing of all the available IDs for use above:

ID Name
56 24 Hour Reception
57 24 Hour Security
169 24 hours breakdown service
102 Accessible Rooms Available on Request
45 Accommodation
53 Accommodation Features
59 Activities Centre
46 Activity Provider
322 Adults Only
170 After hours service
394 Air Conditioning
48 Airline
66 Airport Transfers
37 Aitutaki
204 Arts & Culture
41 Atiu
67 Babysitting Services
68 Baggage Storage
298 Bar
375 Bar
71 BBQ Facilities
73 Beach Towels
74 Beachfront
171 Bicycle Hire
75 Bicycles
367 Board games/puzzles
76 Book Library
323 Budget Backpackers
78 Bus Stop (On-Site/Nearby)
79 Business Centre
365 Cabana
293 Café
172 Car Rental
203 Carvings
294 Casual Dining
377 Casual Dinning
295 Catering
486 Catering
82 Child Care
391 Clothing
85 Complimentary Daily Breakfast
381 Complimentary Lunch
626 Complimentary Unlimited WIFI
91 Conference Facilities
389 Convenince Store
173 Convertible
615 Cruise
95 Cultural Activities
96 Cultural Dance Show
223 Cultural Tours
412 Cycling
97 Daily Activities
99 Day Spa
368 Designated smoking area
100 Direct Beach Access
101 Disability Access
218 Diving
104 e-Bikes
286 Electric vehicles
195 Event Management
253 Event Venue
329 Family Friendly
393 Fan/Ceiling Fan
296 Fine Dining
376 Fine Dinning
220 Fishing
487 Florals & Decor
386 Flotation Devices
392 Food
47 Food & Beverage
374 Fresh Fish Dishes
635 Fully Self Contained Kitchen
636 Fully self-contained home
114 Games Room
115 Gift Shop
371 Gluten Free Options
49 Ground Transport
117 Gym
196 Hair & Beauty
485 Hair & Makeup
118 Hair & Makeup styling
174 Helmets
120 Hen's & Stag nights
411 Hiking
321 Holiday Homes & Apartments
122 Honesty Bar
491 Honeymoon Accommodation
328 Hotels and Resorts
617 In-room Safe
125 Insect Screens
205 Island Night
488 Jewellery
269 Kayaks
133 Kids Club
134 Kids Pool
380 Lagoon Cruise
219 Lagoon Cruises
222 Land
278 Laundry Facilities
384 Life Jackets
372 Local Cuisine Options
43 Mangaia
30 Manihiki
38 Manuae
414 Markets
42 Mauke
175 Medium cars
39 Mitiaro
34 Nassau
297 Nightclub
252 Nightlife / Island Nights
138 Non smoking rooms
28 Northern Group
225 Off-Roading/4WD
186 On-Site Parking
139 On-Site Restaurant
256 Other Islands
388 Other Supplier Types
184 Outer Islands
387 PADI Certified
36 Palmerston
29 Penrhyn
484 Photographers
197 Photography
146 Private Courtyard
631 Private Island Tours
366 Private Transfers
176 Private Transfers
254 Publication
32 Pukapuka
378 Quick Bites
31 Rakahanga
44 Rarotonga
385 Reef Shoes
224 Regenerative Travel
54 Restaurants/Eateries
149 Room Service
150 Safe at Reception
177 Scooters
383 Scuba Diving
319 Sea Scooters
373 Seafood
370 Self-catering
153 Shared Lounge/TV
198 Shopping
202 Shopping
382 Shuttle Pick-Up
178 Small cars
369 Smoke alarms
217 Snorkeling
189 Snorkelling Equipment
35 Southern Group
251 Spa
155 Spa & Beauty Therapy
632 Spectacular Views
270 Stand Up Paddle Boards
630 Stargazing Experiences
194 Sun Loungers
221 SUP
390 Super Market
33 Suwarrow
157 Swim-up Pool Bar
158 Swimming Pool
40 Takutea
160 Teen Zone
179 Temporary license
163 Tennis Court
279 Tour and Activity Centre
164 Tour Desk & Booking Service
379 Tours/Activities
55 Transport/Vehicle Rental
199 Travel Agents
180 Vans
300 Vegan Options
299 Vegetarian Options
206 Village Tour
327 Villas
216 Water
280 Water Sports
165 Wedding and Events Packages
483 Wedding Celebrants
490 Wedding Packages
489 Wedding Venues
281 Weddings available
187 Wheelchair Access
210 Wholesaler
166 WIFI access (Hotspot or Pay-as-you-go)

Currency Conversion

Need to punch in a dollar amount? The following will automatically convert the currency:

[country_pricing:convert:USD:123.45]

Above, "USD" can be swapped with the currency of your choice. Please ensure the "123.56" part ONLY contains numbers and dots ".", commas and symbols will break it.

Simple Grid

This is LEGACY and should be used sparingly

<div class="simpleGrid">
  <a class="gridItem" href="https://www.airnewzealand.com/flights-to-cook-islands" target="_blank">
    <img src="{{ 'public://2019-12/ECONOMY%20IMAGE.jpg' | image_style('max_1300x1300' }}" alt="Economy Cabin" />
    <div>
      <p><strong>ECONOMY CABIN:</strong></p>
      <p>FROM: $844* ROUND-TRIP</p>
      <p>FLY NONSTOP FROM LOS ANGELES (LAX)</p>
      <p>TO RAROTONGA, COOK ISLANDS</p>
    </div>
  </a>
</div>

Modal Video

Surround the thing you want to link with the following:

<div class="medium modal-video youtube" data-video-id="gQ2kOOVQLmU"></div>

Supplier Order

Use the "Weight" field to change the order of the suppliers on the Offers page.

Scheduling Offers

You can now schedule offers! Choose "Archived" for "Unpublish State" and "Published" for "Published State".

Adding Images inline with styles (GREAT for slideshows!)

So you want to add an image with a specific image style (meaning it's dynamically sized)? Check this out! Your availble options are:

  • full_win - This should be used for images that need to be crisp at full window size.
  • max_1300x1300 - This should be used for cards, etc.
  • ...let Adam know if you need a different image size--but these should suffice!

The image path should look like this: public://2020-03/Screen Shot 2020-03-04 at 14.57.54.png

<img src="{{ 'public://image-path-here' | image_style('style_name') }}" alt="" />

Inline Images!

<img src="{{ 'public://image-path-here' | image_style('style_name') }}" alt="Something" class="wrap-left" />
<img src="{{ 'public://image-path-here' | image_style('style_name') }}" alt="Something" class="wrap-right" />
<img src="{{ 'public://image-path-here' | image_style('style_name') }}" alt="Something" class="wrap-left margin-top" />
<img src="{{ 'public://image-path-here' | image_style('style_name') }}" alt="Something" class="wrap-right margin-bottom" />
<img src="{{ 'public://image-path-here' | image_style('style_name') }}" alt="Something" class="wrap-left margin-top margin-bottom" />

Adding Dynamic PDF Links

Sometimes PDFs are added in multiple places, making it tough to update. This tag will help.

<a href="{{ drupal_entity('media', media-id, 'url') }}">The link text or image here</a>

Adding the Content of a Field in Another Node

When you have content that gets repeated on multiple pages, sometimes it's best to have a node with that content, then use a Twig tag to place it everywhere. It translates, too!

{{ drupal_field('body', 'node', node-id) }}

Icons

We use Font Awesome Pro for all of our icons.

The Angled Box (Ok, it's not angled anymore, but we still use the code to create the header for consistency)

{{ angled_box('Headline', 'Subheadline', 'Textarea', 200, 110) }}

Headline
Subheadline

Tools