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
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) }}