<div class="message-block">
<div class="wysiwyg-content__spacer">
<div class="message-block__inner">
<div class="message-block__image" style="background-image: url('/img/davidmeek.jpg')"></div>
<div class="message-block__message">
<p>Ipsen is a growth story. We are becoming a leading global biopharma company focused on innovation and specialty care.
<p> <br>
<span class="message-block__citation">David Meek, CEO of Ipsen</span>
</div>
</div>
</div>
</div>
/* @message-block */
.message-block {
@include poly-padding-x--large;
&__inner {
display: flex;
background-color: white;
@include themify($themes) {
border: 1px solid themed('borderColor');
}
@media (max-width: $medium-screen) {
flex-wrap: wrap;
}
}
&__image {
background-size: cover;
background-position: center center;
flex: 1;
flex-basis: 50%;
margin: -1px;
min-width: 256px;
&::before {
content:'';
float:left;
padding-top:100%;
}
}
&__message {
@include poly-padding--large;
flex: 1;
flex-basis: 50%;
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
overflow: visible;
@media (max-width: $medium-screen) {
padding-top: 4rem;
}
p:first-child {
position: relative;
&::before {
content: "\"";
font-size: 8em;
font-weight: bold;
font-family: $biryani;
font-style: italic;
line-height: 0;
position: absolute;
top: 0;
left: -$base-spacing;
@media (max-width: $medium-screen) {
top: 12px;
}
}
}
}
&__citation {
font-weight: bold;
}
}
<?php
// For some reason, I can't get the autoloader to load this file correctly, so
// I stuck it in content-cards.php and somehow it works now. Three hours wasted.
// $messageBlock = array (
// 'key' => 'message_block',
// 'label' => 'Message Block',
// 'name' => 'message-block',
// 'type' => 'repeater',
// 'sub_fields' => array (
// array (
// 'key' => 'message_block_image',
// 'label' => 'Image',
// 'name' => 'image',
// 'type' => 'image',
// 'return_type' => 'url'
// ),
// array (
// 'key' => 'message_block_content',
// 'label' => __('Content', 'ipsen-master'),
// 'name' => 'content',
// 'type' => 'wysiwyg',
// 'tabs' => 'visual',
// 'toolbar' => 'basic',
// 'media_upload' => 0,
// ),
// array (
// 'key' => 'message_block_citation',
// 'label' => __('Citation', 'ipsen-master'),
// 'instructions' => __('Who said this?', 'ipsen-master'),
// 'name' => 'citation',
// 'type' => 'text',
// ),
// ),
// 'row_min' => 0,
// 'row_limit' => '',
// 'layout' => 'row',
// );
// array_push($_SESSION["blocks"], $messageBlock);