75bad97b10
Redesigned the template selection screen to look like the WordPress theme selector. The main changes relate to: * style changes, to achieve the new look * jsx templates, to work with new css changes * template, removed the description field [MAILPOET-1306]
770 lines
27 KiB
PHP
770 lines
27 KiB
PHP
<?php
|
|
|
|
namespace MailPoet\Config\PopulatorData\Templates;
|
|
|
|
class TakeAHike {
|
|
|
|
private $template_image_url;
|
|
private $social_icon_url;
|
|
|
|
function __construct($assets_url) {
|
|
$this->template_image_url = 'https://ps.w.org/mailpoet/assets/newsletter-templates/take_a_hike';
|
|
$this->social_icon_url = $assets_url . '/img/newsletter_editor/social-icons';
|
|
}
|
|
|
|
function get() {
|
|
return array(
|
|
'name' => __("Take a Hike", 'mailpoet'),
|
|
'categories' => json_encode(array('standard', 'sample')),
|
|
'readonly' => 1,
|
|
'thumbnail' => $this->getThumbnail(),
|
|
'body' => json_encode($this->getBody()),
|
|
);
|
|
}
|
|
|
|
private function getBody() {
|
|
return array(
|
|
'content' => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'horizontal',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'image',
|
|
'link' => '',
|
|
'src' => $this->template_image_url . '/header.jpg',
|
|
'alt' => 'header',
|
|
'fullWidth' => true,
|
|
'width' => '1320px',
|
|
'height' => '483px',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'textAlign' => 'center',
|
|
),
|
|
),
|
|
),
|
|
1 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
'height' => '20px',
|
|
),
|
|
),
|
|
),
|
|
2 => array(
|
|
'type' => 'text',
|
|
'text' => '<p>Hi [subscriber:firstname | default:explorer]</p>
|
|
<p></p>
|
|
<p>Aliquam feugiat nisl eget eleifend congue. Nullam neque tellus, elementum vel elit dictum, tempus sagittis nunc. Phasellus quis commodo odio. Vestibulum vitae mi vel quam rhoncus egestas eget vitae eros. </p>',
|
|
),
|
|
3 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
'height' => '20px',
|
|
),
|
|
),
|
|
),
|
|
4 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => '#843c15',
|
|
'height' => '40px',
|
|
),
|
|
),
|
|
),
|
|
5 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
'height' => '20px',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
1 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'horizontal',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'text',
|
|
'text' => '<h1><strong>How to plan your hiking route</strong></h1>
|
|
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam dictum urna ac lacus dapibus rhoncus.</p>',
|
|
),
|
|
1 => array(
|
|
'type' => 'button',
|
|
'text' => 'Read More',
|
|
'url' => 'https://www.google.co.uk',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => '#64a1af',
|
|
'borderColor' => '#0074a2',
|
|
'borderWidth' => '0px',
|
|
'borderRadius' => '5px',
|
|
'borderStyle' => 'solid',
|
|
'width' => '150px',
|
|
'lineHeight' => '34px',
|
|
'fontColor' => '#ffffff',
|
|
'fontFamily' => 'Courier New',
|
|
'fontSize' => '18px',
|
|
'fontWeight' => 'bold',
|
|
'textAlign' => 'left',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
1 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'image',
|
|
'link' => '',
|
|
'src' => $this->template_image_url . '/map.jpg',
|
|
'alt' => 'map',
|
|
'fullWidth' => false,
|
|
'width' => '330px',
|
|
'height' => '227px',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'textAlign' => 'center',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
2 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'horizontal',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
'height' => '20px',
|
|
),
|
|
),
|
|
),
|
|
1 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => '#843c15',
|
|
'height' => '40px',
|
|
),
|
|
),
|
|
),
|
|
2 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
'height' => '20px',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
3 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'horizontal',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'image',
|
|
'link' => '',
|
|
'src' => $this->template_image_url . '/boots.jpg',
|
|
'alt' => 'boots',
|
|
'fullWidth' => false,
|
|
'width' => '600px',
|
|
'height' => '400px',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'textAlign' => 'center',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
1 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'text',
|
|
'text' => '<h2><strong>Tried & tested: Our favourite walking boots</strong></h2>
|
|
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>',
|
|
),
|
|
1 => array(
|
|
'type' => 'button',
|
|
'text' => 'See Reviews',
|
|
'url' => '',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => '#64a1af',
|
|
'borderColor' => '#0074a2',
|
|
'borderWidth' => '0px',
|
|
'borderRadius' => '5px',
|
|
'borderStyle' => 'solid',
|
|
'width' => '150px',
|
|
'lineHeight' => '34px',
|
|
'fontColor' => '#ffffff',
|
|
'fontFamily' => 'Courier New',
|
|
'fontSize' => '18px',
|
|
'fontWeight' => 'bold',
|
|
'textAlign' => 'left',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
4 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'horizontal',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
'height' => '20px',
|
|
),
|
|
),
|
|
),
|
|
1 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => '#843c15',
|
|
'height' => '40px',
|
|
),
|
|
),
|
|
),
|
|
2 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
'height' => '20px',
|
|
),
|
|
),
|
|
),
|
|
3 => array(
|
|
'type' => 'text',
|
|
'text' => '<h3 style="text-align: center;"><strong>Hikers Gallery</strong></h3>',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
5 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'horizontal',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'image',
|
|
'link' => '',
|
|
'src' => $this->template_image_url . '/gallery3.jpg',
|
|
'alt' => 'gallery3',
|
|
'fullWidth' => true,
|
|
'width' => '1000px',
|
|
'height' => '750px',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'textAlign' => 'center',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
1 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'image',
|
|
'link' => '',
|
|
'src' => $this->template_image_url . '/gallery1-300x225.jpg',
|
|
'alt' => 'gallery1',
|
|
'fullWidth' => true,
|
|
'width' => '300px',
|
|
'height' => '225px',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'textAlign' => 'center',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
2 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'image',
|
|
'link' => '',
|
|
'src' => $this->template_image_url . '/gallery2-1.jpg',
|
|
'alt' => 'gallery2',
|
|
'fullWidth' => true,
|
|
'width' => '1000px',
|
|
'height' => '750px',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'textAlign' => 'center',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
6 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'horizontal',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
'height' => '20px',
|
|
),
|
|
),
|
|
),
|
|
1 => array(
|
|
'type' => 'text',
|
|
'text' => '<p style="text-align: center;">Edit this to insert text</p>',
|
|
),
|
|
2 => array(
|
|
'type' => 'button',
|
|
'text' => 'View More Photos',
|
|
'url' => '',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => '#64a1af',
|
|
'borderColor' => '#0074a2',
|
|
'borderWidth' => '0px',
|
|
'borderRadius' => '5px',
|
|
'borderStyle' => 'solid',
|
|
'width' => '214px',
|
|
'lineHeight' => '34px',
|
|
'fontColor' => '#ffffff',
|
|
'fontFamily' => 'Courier New',
|
|
'fontSize' => '18px',
|
|
'fontWeight' => 'bold',
|
|
'textAlign' => 'center',
|
|
),
|
|
),
|
|
),
|
|
3 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => '#843c15',
|
|
'height' => '40px',
|
|
),
|
|
),
|
|
),
|
|
4 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
'height' => '20px',
|
|
),
|
|
),
|
|
),
|
|
5 => array(
|
|
'type' => 'text',
|
|
'text' => '<h3 style="text-align: center;"><strong>Hiking goes social...</strong></h3>',
|
|
),
|
|
6 => array(
|
|
'type' => 'social',
|
|
'iconSet' => 'circles',
|
|
'icons' => array(
|
|
0 => array(
|
|
'type' => 'socialIcon',
|
|
'iconType' => 'facebook',
|
|
'link' => 'http://www.facebook.com',
|
|
'image' => $this->social_icon_url . '/03-circles/Facebook.png',
|
|
'height' => '32px',
|
|
'width' => '32px',
|
|
'text' => 'Facebook',
|
|
),
|
|
1 => array(
|
|
'type' => 'socialIcon',
|
|
'iconType' => 'twitter',
|
|
'link' => 'http://www.twitter.com',
|
|
'image' => $this->social_icon_url . '/03-circles/Twitter.png',
|
|
'height' => '32px',
|
|
'width' => '32px',
|
|
'text' => 'Twitter',
|
|
),
|
|
2 => array(
|
|
'type' => 'socialIcon',
|
|
'iconType' => 'instagram',
|
|
'link' => 'http://instagram.com',
|
|
'image' => $this->social_icon_url . '/03-circles/Instagram.png',
|
|
'height' => '32px',
|
|
'width' => '32px',
|
|
'text' => 'Instagram',
|
|
),
|
|
3 => array(
|
|
'type' => 'socialIcon',
|
|
'iconType' => 'google-plus',
|
|
'link' => 'http://plus.google.com',
|
|
'image' => $this->social_icon_url . '/03-circles/Google-Plus.png',
|
|
'height' => '32px',
|
|
'width' => '32px',
|
|
'text' => 'Google Plus',
|
|
),
|
|
4 => array(
|
|
'type' => 'socialIcon',
|
|
'iconType' => 'youtube',
|
|
'link' => 'http://www.youtube.com',
|
|
'image' => $this->social_icon_url . '/03-circles/Youtube.png',
|
|
'height' => '32px',
|
|
'width' => '32px',
|
|
'text' => 'Youtube',
|
|
),
|
|
),
|
|
),
|
|
7 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
'height' => '20px',
|
|
),
|
|
),
|
|
),
|
|
8 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => '#843c15',
|
|
'height' => '40px',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
7 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'horizontal',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => '#64a1af',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
'height' => '20px',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
8 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'horizontal',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => '#64a1af',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'footer',
|
|
'text' => '<p><a href="[link:subscription_unsubscribe_url]">Unsubscribe</a> | <a href="[link:subscription_manage_url]">Manage subscription</a></p>',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
'text' => array(
|
|
'fontColor' => '#ffffff',
|
|
'fontFamily' => 'Arial',
|
|
'fontSize' => '13px',
|
|
'textAlign' => 'left',
|
|
),
|
|
'link' => array(
|
|
'fontColor' => '#ffffff',
|
|
'textDecoration' => 'underline',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
1 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'footer',
|
|
'text' => '<p>Add your postal address here!</p>',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
'text' => array(
|
|
'fontColor' => '#ffffff',
|
|
'fontFamily' => 'Arial',
|
|
'fontSize' => '13px',
|
|
'textAlign' => 'right',
|
|
),
|
|
'link' => array(
|
|
'fontColor' => '#ffffff',
|
|
'textDecoration' => 'underline',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
9 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'horizontal',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => '#64a1af',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'container',
|
|
'orientation' => 'vertical',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
),
|
|
),
|
|
'blocks' => array(
|
|
0 => array(
|
|
'type' => 'spacer',
|
|
'styles' => array(
|
|
'block' => array(
|
|
'backgroundColor' => 'transparent',
|
|
'height' => '20px',
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
'globalStyles' => array(
|
|
'text' => array(
|
|
'fontColor' => '#4f230c',
|
|
'fontFamily' => 'Arial',
|
|
'fontSize' => '16px',
|
|
),
|
|
'h1' => array(
|
|
'fontColor' => '#423c39',
|
|
'fontFamily' => 'Courier New',
|
|
'fontSize' => '24px',
|
|
),
|
|
'h2' => array(
|
|
'fontColor' => '#265f6d',
|
|
'fontFamily' => 'Courier New',
|
|
'fontSize' => '24px',
|
|
),
|
|
'h3' => array(
|
|
'fontColor' => '#423c39',
|
|
'fontFamily' => 'Courier New',
|
|
'fontSize' => '20px',
|
|
),
|
|
'link' => array(
|
|
'fontColor' => '#843c15',
|
|
'textDecoration' => 'underline',
|
|
),
|
|
'wrapper' => array(
|
|
'backgroundColor' => '#ffffff',
|
|
),
|
|
'body' => array(
|
|
'backgroundColor' => '#843c15',
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
private function getThumbnail() {
|
|
return $this->template_image_url . '/take-a-hike.jpg';
|
|
}
|
|
|
|
}
|