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

Immagine
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('/sites/default/files/styles/full_win/public/2019-11/header_mauke.jpg?itok=DsKUyT2p');">
 <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="/sites/default/files/styles/max_1300x1300/public/kitesurfing-3.jpg?itok=btRc9NiA" alt="Kitesurfing" />
  <img src="/sites/default/files/styles/max_1300x1300/public/kitesurfing-5.jpg?itok=SwMmr_zW" alt="Kitesurfing" />
  <img src="/sites/default/files/styles/max_1300x1300/public/kitesurfing-6.jpg?itok=_U5fgwoW" alt="Kitesurfing" />
  <img src="/sites/default/files/styles/max_1300x1300/public/kitesurfing-1.jpg?itok=veLWIU4m" alt="Kitesurfing" />
  <img src="/sites/default/files/styles/max_1300x1300/public/kitesurfing-2.jpg?itok=DiU-zmxu" alt="Kitesurfing" />
  <img src="/sites/default/files/styles/max_1300x1300/public/kitesurfing-4.jpg?itok=cQVGjW6K" alt="Kitesurfing" />
</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
58 Absolute Beachfront
45 Accommodation
53 Accommodation
59 Activities Centre
46 Activity Provider
60 Adults Only
170 After hours service
61 Air Conditioning
62 Air Conditioning (with surcharge)
48 Airline
63 Airport drop off
64 Airport pick up
65 Airport Shuttle
66 Airport Transfers
37 Aitutaki
204 Arts & Culture
41 Atiu
277 Babysitting ($)
67 Babysitting Services
68 Baggage Storage
185 Balcony
167 Bar
69 Bath
70 Bathrobes
71 BBQ Facilities
72 BBQ On The Deck
267 Beach on-site
73 Beach Towels
74 Beachfront
171 Bicycle Hire
75 Bicycles
76 Book Library
77 Breakfast Starter on Arrival
246 Budget Backpackers
78 Bus Stop
79 Business Centre
172 Car Rental
203 Carvings
168 Catering
80 Ceiling Fans
81 Celebrant
82 Child Care
83 Comlimentary use of gas BBQ
84 Complimentary airport transfers
85 Complimentary Breakfast / Tea/ Coffee
86 Complimentary daily tropical island breakfast
87 Complimentary use of laundry
88 Complimentary use of snorkelling equipment
89 Complimentary WiFi Access 500MB (one device)
90 Concierge Services
91 Conference Facilities
173 Convertible
92 Cook-top
93 Cooking Facilities
94 Creche
95 Cultural Activities
96 Cultural Dance Show
223 Cultural Tours
97 Daily Activities
98 Daily Room Service
99 Day Spa
100 Direct Beach Access
101 Disability Access
102 Disability Rooms Available on Request
103 Dishwasher
218 Diving
104 e-Bikes
224 Eco-Tours
105 Electric Hotplates
195 Event Management
253 Event Venue
247 Family Friendly
106 Fan
107 Filtered and UV-Treated water
220 Fishing
108 Flatscreen TV
109 Flatscreen TV with cable channels
110 Flatscreen TV with Movies
47 Food & Beverage
111 Fresh Water Infinity Pool
112 Full kitchen facilities
113 Full Laundry
114 Games Room
115 Gift Shop
49 Ground Transport
116 Guest BBQ Facilities
117 Gym
196 Hair & Beauty
118 Hair & Makeup styling
119 Hair Dryer
174 Helmets
120 Hen's & Stag nights
248 Holiday Homes
121 Homestay
122 Honesty Bar
249 Hotels and Resorts
123 IDD Phone
124 In Room Safe
268 Infinity pool
125 Insect Screens
126 Interconnecting Rooms Available on Request
127 Internet Access to Buy
128 Introduction to Scuba Diving (in resort pool)
129 iPod Dock & Bluetooth Player
130 Iron/Ironing Board
205 Island Night
131 Island tours
190 Kayak/Canoe
269 Kayaks
132 Kettle
133 Kids Club
134 Kids Pool
135 Kitchenette
219 Lagoon Cruises
222 Land
278 Laundry Facilities
273 Laundry service ($)
43 Mangaia
30 Manihiki
38 Manuae
42 Mauke
175 Medium cars
136 Microwave
137 Mini Bar
39 Mitiaro
34 Nassau
252 Nightlife
138 Non smoking rooms
28 Northern Group
225 Off-Roading/4 Wheel Drive
186 On-Site Parking
139 On-Site Restaurant
140 Onsite Massage & Beauty Services
256 Other Islands
141 Outdoor furniture/wide decks
142 Outdoor Shower
184 Outer Islands
191 Oven
143 Paddle boards
36 Palmerston
144 Pedestal Fan
29 Penrhyn
197 Photography
282 Pool (including children's pool)
145 Poolside Restaurant & Cocktail Bar
146 Private courtyard
176 Private Transfers
254 Publication
32 Pukapuka
31 Rakahanga
44 Rarotonga
147 Reception Services
188 Refrigerator
148 Restaurant
54 Restaurant/Bar ($)
198 Retailers
149 Room Service
150 Safe at reception
151 Satellite TV
177 Scooters
152 Self Service Laundry Facilities
153 Shared Lounge/TV
202 Shopping Type
154 Sky TV
178 Small cars
217 Snorkeling
189 Snorkelling Equipment
35 Southern Group
251 Spa
155 Spa & Beauty Therapy
270 Stand up paddle boards
156 Star Rating
193 Stove
194 Sun Loungers
221 SUP and Sea Scooters
33 Suwarrow
271 Swim all tides
157 Swim-up Pool Bar
158 Swimming Pool
40 Takutea
159 Tea/Coffee Facilities
160 Teen Zone
161 Telephone
162 Television
179 Temporary license
163 Tennis Court
192 Toaster
279 Tour and Activity centre
164 Tour Desk & Booking Service
55 Transport/Rental vehicle
199 Travel Agents
180 Vans
206 Village Tour
250 Villas
216 Water
280 Water sports
165 Wedding and Events Packages
200 Wedding Planners & Venues
281 Weddings available
187 Wheelchair Access
210 Wholesaler
272 Wifi ($)
166 WIFI access

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="/sites/default/files/styles/max_1300x1300/public/2019-12/ECONOMY%20IMAGE.jpg?itok=nZj1ctVp" 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="" />

Icons

We use Font Awesome Pro for all of our icons.