<div class="wysiwyg-content has-lines">
<div class="wysiwyg-content__spacer">
<h2 class="wysiwyg-content__heading heading heading--medium">Hello world</h2>
<div class="wysiwyg-content__inner">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum
rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p><img class="size-full" src="/img/Ipsen-Pharma-Biotech-042016-144.jpg">
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus,
at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
</blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul><img class="size-full" src="/img/Ipsen-Pharma-Biotech-042016-144.jpg">
</div>
</div>
</div>
/* @wysiwyg-content */
.wysiwyg-content {
@include poly-padding-x--large;
position: relative;
.vertical-section-title {
position: absolute;
right: -3em;
top: 0;
}
&__heading {
margin-bottom: $small-spacing;
}
&__intro {
width: calc(640px + 2em);
max-width: 100%;
p {
background-color: white;
font-size: 14px;
}
}
&__spacer {
@include poly-padding-y--large;
width: 100%;
position: relative;
max-width: 1024px;
margin: 0 auto;
// background-color: silver;
// background-image:
// linear-gradient(
// to right,
// #cdecf4 1px,
// white 1px
// );
background-repeat: repeat-x;
background-size: 20%;
}
&__inner {
@include poly-padding--large;
background-color: $white;
box-sizing: border-box;
position: relative;
@include themify($themes) {
border: 1px solid themed('wysiwygBorder');
}
figure[style*='width:'] {
width: auto !important;
}
figure {
margin-left: auto !important;
margin-right: auto !important;
}
p {
&:last-child {
img.size-full {
margin-bottom: 0 !important;
}
}
@media (max-width: $medium-screen) {
iframe {
height: auto;
overflow: hidden;
}
}
}
img.size-full {
@include poly-margin-y;
}
img.alignleft {
float: left;
margin-right: 1.5rem;
}
img.alignright {
float: right;
margin-left: 1.5rem;
}
.fifty-fifty {
min-width: 320px;
@media (min-width: $medium-screen) {
min-width: 320px;
}
}
iframe {
margin: 0 auto;
display: block;
max-width: 100%;
}
}
h1, h2, h3, h4, h5, h6 {
}
.bullet-align {
ul {
list-style-type: none;
padding-inline-start: 0;
li {
padding-left: 35px;
position: relative;
}
li::before {
content: url('/wp-content/themes/ipsen-master/src/static/img/red-tick.png');
font-size: 14px;
position: absolute;
top: 0;
left: 0;
display: block;
}
}
}
.bullet-hyphen {
ul {
list-style-type: none;
padding-left: 10px;
}
li {
padding-left: 20px;
position: relative;
}
li::before {
content: "-";
font-size: 14px;
position: absolute;
top: 0;
left: 0;
display: block;
}
}
}
.content-column {
margin-top: 0 !important;
margin-bottom: 1em;
.ipsen-cares-logo {
width: 100%;
height: auto;
max-width: 420px;
}
@media (max-width: 600px) {
&.one_third {
> div {
padding: 0 !important;
}
}
}
}
// import $ from 'jQuery'
// $(document).ready(function () {
// $(".wysiwyg-content .size-full").css({
// 'width': ($(".wysiwyg-content__spacer").width() - 1 + 'px')
// });
// })
// $(window).resize(function() {
// $(".wysiwyg-content .size-full").css({
// 'width': ($(".wysiwyg-content__spacer").width() - 1 + 'px')
// });
// });
<?php
$wysiwygContent = array (
'key' => 'wysiwyg_content_block',
'label' => 'Editorial Content',
'name' => 'wysiwyg-content',
'type' => 'repeater',
'sub_fields' => array (
array(
'key' => 'hide_block',
'label' => 'Hide this block from anchor links',
'name' => 'hide_block',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
array (
'key' => 'wysiwyg_content_block__Title',
'label' => 'Section Title',
'name' => 'title', // the 'name' value for each field has to match the variable in the Twig file.
'type' => 'text',
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
array (
'key' => 'wysiwyg_content_block_center_title',
'label' => __('Center Title?', 'ipsen-master'),
'name' => 'center_title',
// 'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
array (
'key' => 'widescreen_content_block_label',
'label' => 'Section Label',
'name' => 'blocklabel',
'type' => 'text',
'instructions' => __('This label appears in in-page navigation and within the content of some blocks, overriding the title.', 'ipsen-master'),
),
array (
'key' => 'wysiwyg_content_block__Intro',
'label' => __('Content', 'ipsen-master'),
'name' => 'content',
// 'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'wysiwyg',
'tabs' => 'visual',
// 'toolbar' => 'basic',
'media_upload' => 1,
),
),
'row_min' => 0,
'row_limit' => '',
'layout' => 'row',
);
array_push($_SESSION["blocks"], $wysiwygContent);
$widescreen = array (
'key' => 'widescreen',
'label' => 'Widescreen Content',
'name' => 'widescreen',
'type' => 'repeater',
'sub_fields' => array (
array (
'key' => 'widescreen_content_block__Title',
'label' => 'Section Title',
'name' => 'title', // the 'name' value for each field has to match the variable in the Twig file.
'type' => 'text',
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
array (
'key' => 'widescreen_content_block_label_wide',
'label' => 'Section Label',
'name' => 'blocklabel',
'type' => 'text',
'instructions' => __('This label appears in in-page navigation and within the content of some blocks, overriding the title.', 'ipsen-master'),
),
array(
'key' => 'hide_block',
'label' => 'Hide this block from anchor links',
'name' => 'hide_block',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
array (
'key' => 'widescreen_content_block_orientation',
'label' => __('Image Orientation', 'ipsen-master'),
'name' => 'orientation',
// 'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'conditional_logic' => 0,
'message' => '',
'default_value' => 1,
'ui' => 1,
'ui_on_text' => 'Right',
'ui_off_text' => 'Left',
'wrapper' => array(
'width' => '50%',
'class' => '',
'id' => '',
),
),
array (
'key' => 'widescreen_content_block_image',
'label' => 'Image',
'name' => 'image',
'type' => 'image',
),
array(
'key' => 'mobile_preserve_image',
'label' => 'Preserve full image display on mobile',
'name' => 'mobile_preserve_image',
'type' => 'true_false',
'instructions' => '',
'required' => 0,
'wrapper' => array(
'width' => '',
'class' => '',
'id' => '',
),
'message' => '',
'default_value' => 0,
'ui' => 1,
'ui_on_text' => '',
'ui_off_text' => '',
),
array (
'key' => 'widescreen_content_block_content',
'label' => __('Content', 'ipsen-master'),
'name' => 'content',
// 'instructions' => __('This is optional', 'ipsen-master'),
'type' => 'wysiwyg',
'tabs' => 'all',
// 'toolbar' => 'basic',
'media_upload' => 1,
),
),
'row_min' => 0,
'row_limit' => '',
'layout' => 'row',
);
array_push($_SESSION["blocks"], $widescreen);