New embed responsiveness strategy.
This commit is contained in:
mateuswetah
parent
dc51c55ae5
commit
e0d4fcbed2
|
|
@ -687,17 +687,37 @@ a.pswp__share--download:hover {
|
||||||
.tainacan-media-component__swiper-main .swiper-slide-content {
|
.tainacan-media-component__swiper-main .swiper-slide-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: block;
|
||||||
align-items: center;
|
text-align: center; }
|
||||||
justify-content: center;
|
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-content-embed {
|
||||||
flex-direction: column; }
|
|
||||||
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-embed-container {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto; }
|
height: auto; }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-content-embed.tainacan-has-aspect-ratio {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 2) / 1);
|
||||||
|
/* Default to 2:1 aspect ratio. */
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto; }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-content-embed.tainacan-embed-aspect-21-9 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 21) / 9); }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-content-embed.tainacan-embed-aspect-18-9 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 18) / 9); }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-content-embed.tainacan-embed-aspect-16-9 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 16) / 9); }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-content-embed.tainacan-embed-aspect-4-3 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 4) / 3); }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-content-embed.tainacan-embed-aspect-1-1 {
|
||||||
|
max-width: var(--tainacan-media-main-carousel-height, 60vh); }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-content-embed.tainacan-embed-aspect-3-4 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 3) / 4); }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-content-embed.tainacan-embed-aspect-9-16 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 9) / 16); }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-content-embed.tainacan-embed-aspect-1-2 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 1) / 2); }
|
||||||
.tainacan-media-component__swiper-main .swiper-slide-content iframe {
|
.tainacan-media-component__swiper-main .swiper-slide-content iframe {
|
||||||
max-height: var(--tainacan-media-main-carousel-height, 60vh);
|
max-height: var(--tainacan-media-main-carousel-height, 60vh);
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
border: none;
|
border: none;
|
||||||
display: block;
|
display: block;
|
||||||
background-image: url("../images/preloader.gif");
|
background-image: url("../images/preloader.gif");
|
||||||
|
|
@ -724,6 +744,9 @@ a.pswp__share--download:hover {
|
||||||
.tainacan-media-component__swiper-main .swiper-slide-content img {
|
.tainacan-media-component__swiper-main .swiper-slide-content img {
|
||||||
width: auto;
|
width: auto;
|
||||||
max-height: var(--tainacan-media-main-carousel-height, 60vh); }
|
max-height: var(--tainacan-media-main-carousel-height, 60vh); }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content .twitter-tweet {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto; }
|
||||||
|
|
||||||
.tainacan-media-component__swiper-thumbs {
|
.tainacan-media-component__swiper-thumbs {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -833,27 +856,53 @@ a.pswp__share--download:hover {
|
||||||
justify-content: center; }
|
justify-content: center; }
|
||||||
.tainacan-photoswipe-layer .pswp__container .attachment-without-image {
|
.tainacan-photoswipe-layer .pswp__container .attachment-without-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: calc(100% - 44px);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center; }
|
text-align: center;
|
||||||
.tainacan-photoswipe-layer .pswp__container .attachment-without-image.tainacan-embed-container:not(.tainacan-embed-without-iframe) {
|
|
||||||
padding: 0px; }
|
|
||||||
.tainacan-photoswipe-layer .pswp__container .attachment-without-image .tainacan-embed-container .twitter-tweet {
|
|
||||||
width: 100vw !important; }
|
|
||||||
.tainacan-photoswipe-layer .pswp__container iframe {
|
|
||||||
padding: 44px;
|
padding: 44px;
|
||||||
min-height: 90vh;
|
margin-top: 22px; }
|
||||||
max-height: 90vh;
|
.tainacan-photoswipe-layer .pswp__container .attachment-without-image > iframe:not(.wp-embedded-content) {
|
||||||
height: 100%;
|
width: 90vw;
|
||||||
width: 100%;
|
height: 90vh;
|
||||||
max-width: 100%;
|
border: none;
|
||||||
margin: 0 auto;
|
margin: 44px;
|
||||||
|
display: block;
|
||||||
|
background-image: url("../images/preloader.gif");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .pswp__zoom-wrap > iframe#iframePDF {
|
||||||
|
width: 90vw;
|
||||||
|
height: 90vh;
|
||||||
border: none;
|
border: none;
|
||||||
|
margin: 44px auto;
|
||||||
display: block;
|
display: block;
|
||||||
background-image: url("../images/preloader.gif");
|
background-image: url("../images/preloader.gif");
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center; }
|
background-position: center; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed {
|
||||||
|
width: 100%;
|
||||||
|
height: auto; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-has-aspect-ratio {
|
||||||
|
max-width: calc((90vh * 2) / 1);
|
||||||
|
/* Default to 2:1 aspect ratio. */
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-21-9 {
|
||||||
|
max-width: calc((90vh * 21) / 9); }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-18-9 {
|
||||||
|
max-width: calc((90vh * 18) / 9); }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-16-9 {
|
||||||
|
max-width: calc((90vh * 16) / 9); }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-4-3 {
|
||||||
|
max-width: calc((90vh * 4) / 3); }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-1-1 {
|
||||||
|
max-width: 90vh; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-9-16 {
|
||||||
|
max-width: calc((90vh * 9) / 16); }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .tainacan-content-embed.tainacan-embed-aspect-1-2 {
|
||||||
|
max-width: calc((90vh * 1) / 2); }
|
||||||
.tainacan-photoswipe-layer .pswp__container a:first-of-type,
|
.tainacan-photoswipe-layer .pswp__container a:first-of-type,
|
||||||
.tainacan-photoswipe-layer .pswp__container p:first-of-type,
|
.tainacan-photoswipe-layer .pswp__container p:first-of-type,
|
||||||
.tainacan-photoswipe-layer .pswp__container article:first-of-type {
|
.tainacan-photoswipe-layer .pswp__container article:first-of-type {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,54 +1,64 @@
|
||||||
body:not(.wp-embed-responsive) .tainacan-embed-container,
|
/* TAINACAN EMBEDS
|
||||||
body.wp-embed-responsive :not(.wp-block-embed__wrapper)>.tainacan-embed-container {
|
* This file copies most of Gutenberg's logic for responsive blocks,
|
||||||
position: relative;
|
* but uses different classes to avoid future conflicts.
|
||||||
overflow: hidden;
|
* Check their original css: /packages/block-library/src/embed/style.scss
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* The embed container is in a `figure` element, and many themes zero this out.
|
||||||
|
* This rule explicitly sets it, to ensure at least some bottom-margin in the flow.
|
||||||
|
*/
|
||||||
|
:not(.wp-block-embed__wrapper)>.tainacan-content-embed {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Don't allow iframe to overflow it's container. */
|
||||||
|
:not(.wp-block-embed__wrapper)>.tainacan-content-embed iframe {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
}
|
||||||
|
:not(.wp-block-embed__wrapper)>.tainacan-content-embed .tainacan-content-embed__wrapper {
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
body:not(.wp-embed-responsive) .tainacan-embed-container:not(.tainacan-embed-without-iframe),
|
/* Add responsiveness to embeds with aspect ratios. */
|
||||||
body.wp-embed-responsive :not(.wp-block-embed__wrapper)>.tainacan-embed-container:not(.tainacan-embed-without-iframe) {
|
:not(.wp-block-embed__wrapper)>.tainacan-has-aspect-ratio .tainacan-content-embed__wrapper::before {
|
||||||
padding-bottom: 56.25%;
|
content: "";
|
||||||
padding-top: 30px;
|
display: block;
|
||||||
width: 100%;
|
padding-top: 50%; /* Default to 2:1 aspect ratio. */
|
||||||
margin: auto;
|
|
||||||
}
|
}
|
||||||
body:not(.wp-embed-responsive) .tainacan-embed-container .twitter-tweet,
|
:not(.wp-block-embed__wrapper)>.tainacan-has-aspect-ratio iframe {
|
||||||
body.wp-embed-responsive :not(.wp-block-embed__wrapper)>.tainacan-embed-container .twitter-tweet {
|
position: absolute;
|
||||||
margin: 0 auto;
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
body:not(.wp-embed-responsive) .tainacan-embed-container iframe.wp-embedded-content,
|
:not(.wp-block-embed__wrapper)>.tainacan-embed-aspect-21-9 .tainacan-content-embed__wrapper::before {
|
||||||
body.wp-embed-responsive :not(.wp-block-embed__wrapper)>.tainacan-embed-container iframe.wp-embedded-content {
|
padding-top: 42.85%; /* 9 / 21 * 100 */
|
||||||
display: flex !important;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin: auto !important;
|
|
||||||
width: auto !important;
|
|
||||||
top: 50%;
|
|
||||||
bottom: 50%;
|
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 1024px) {
|
:not(.wp-block-embed__wrapper)>.tainacan-embed-aspect-18-9 .tainacan-content-embed__wrapper::before {
|
||||||
body:not(.wp-embed-responsive) .tainacan-embed-container iframe.wp-embedded-content,
|
padding-top: 50%; /* 9 / 18 * 100 */
|
||||||
body.wp-embed-responsive :not(.wp-block-embed__wrapper)>.tainacan-embed-container iframe.wp-embedded-content {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
body:not(.wp-embed-responsive) .tainacan-embed-container #tainacan-attachment-iframe ,
|
:not(.wp-block-embed__wrapper)>.tainacan-embed-aspect-16-9 .tainacan-content-embed__wrapper::before {
|
||||||
body.wp-embed-responsive :not(.wp-block-embed__wrapper)>.tainacan-embed-container #tainacan-attachment-iframe { /* PDF */
|
padding-top: 56.25%; /* 9 / 16 * 100 */
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
:not(.wp-block-embed__wrapper)>.tainacan-embed-aspect-4-3 .tainacan-content-embed__wrapper::before {
|
||||||
body:not(.wp-embed-responsive) .tainacan-embed-container iframe,
|
padding-top: 75%; /* 3 / 4 * 100 */
|
||||||
body:not(.wp-embed-responsive) .tainacan-embed-container object,
|
|
||||||
body:not(.wp-embed-responsive) .tainacan-embed-container embed,
|
|
||||||
body.wp-embed-responsive :not(.wp-block-embed__wrapper)>.tainacan-embed-container iframe,
|
|
||||||
body.wp-embed-responsive :not(.wp-block-embed__wrapper)>.tainacan-embed-container object,
|
|
||||||
body.wp-embed-responsive :not(.wp-block-embed__wrapper)>.tainacan-embed-container embed {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
:not(.wp-block-embed__wrapper)>.tainacan-embed-aspect-1-1 .tainacan-content-embed__wrapper::before {
|
||||||
|
padding-top: 100%; /* 1 / 1 * 100 */
|
||||||
|
}
|
||||||
|
:not(.wp-block-embed__wrapper)>.tainacan-embed-aspect-9-16 .tainacan-content-embed__wrapper::before {
|
||||||
|
padding-top: 177.77%; /* 16 / 9 * 100 */
|
||||||
|
}
|
||||||
|
:not(.wp-block-embed__wrapper)>.tainacan-embed-aspect-3-4 .tainacan-content-embed__wrapper::before {
|
||||||
|
padding-top: 133.33%; /* 4 / 3 * 100 */
|
||||||
|
}
|
||||||
|
:not(.wp-block-embed__wrapper)>.tainacan-embed-aspect-1-2 .tainacan-content-embed__wrapper::before {
|
||||||
|
padding-top: 200%; /* 2 / 1 * 100 */
|
||||||
|
}
|
||||||
|
|
@ -12,6 +12,19 @@ class Embed {
|
||||||
|
|
||||||
return self::$instance;
|
return self::$instance;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private static $aspect_ratios = array(
|
||||||
|
// Common video resolutions.
|
||||||
|
array("ratio" => '2.33', "className" => 'tainacan-embed-aspect-21-9'),
|
||||||
|
array("ratio" => '2.00', "className" => 'tainacan-embed-aspect-18-9'),
|
||||||
|
array("ratio" => '1.78', "className" => 'tainacan-embed-aspect-16-9'),
|
||||||
|
array("ratio" => '1.33', "className" => 'tainacan-embed-aspect-4-3'),
|
||||||
|
// Vertical video and instagram square video support.
|
||||||
|
array("ratio" => '1.00', "className" => 'tainacan-embed-aspect-1-1' ),
|
||||||
|
array("ratio" => '0.75', "className" => 'tainacan-embed-aspect-3-4'),
|
||||||
|
array("ratio" => '0.56', "className" => 'tainacan-embed-aspect-9-16'),
|
||||||
|
array("ratio" => '0.50', "className" => 'tainacan-embed-aspect-1-2' )
|
||||||
|
);
|
||||||
|
|
||||||
protected function __construct() {
|
protected function __construct() {
|
||||||
|
|
||||||
|
|
@ -24,7 +37,7 @@ class Embed {
|
||||||
/**
|
/**
|
||||||
* Add responsiveness to embeds
|
* Add responsiveness to embeds
|
||||||
*/
|
*/
|
||||||
add_filter('embed_oembed_html', [$this, 'responsive_embed'], 10, 3);
|
add_filter( 'embed_oembed_html', [$this, 'responsive_embed'], 10, 3);
|
||||||
add_action( 'admin_enqueue_scripts', array( &$this, 'add_css' ) );
|
add_action( 'admin_enqueue_scripts', array( &$this, 'add_css' ) );
|
||||||
add_action( 'wp_enqueue_scripts', array( &$this, 'add_css' ) );
|
add_action( 'wp_enqueue_scripts', array( &$this, 'add_css' ) );
|
||||||
|
|
||||||
|
|
@ -74,7 +87,7 @@ class Embed {
|
||||||
);
|
);
|
||||||
|
|
||||||
$args = array_merge($attr, $defaults);
|
$args = array_merge($attr, $defaults);
|
||||||
|
|
||||||
$dimensions = '';
|
$dimensions = '';
|
||||||
if ( ! empty( $args['width'] ) && ! empty( $args['height'] ) ) {
|
if ( ! empty( $args['width'] ) && ! empty( $args['height'] ) ) {
|
||||||
$dimensions .= sprintf( "width='%s' ", $args['width'] );
|
$dimensions .= sprintf( "width='%s' ", $args['width'] );
|
||||||
|
|
@ -109,7 +122,6 @@ class Embed {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Responsiveness
|
* Responsiveness
|
||||||
*/
|
*/
|
||||||
|
|
@ -117,6 +129,69 @@ class Embed {
|
||||||
global $TAINACAN_BASE_URL;
|
global $TAINACAN_BASE_URL;
|
||||||
wp_enqueue_style( 'tainacan-embeds', $TAINACAN_BASE_URL . '/assets/css/tainacan-embeds.css', [], TAINACAN_VERSION );
|
wp_enqueue_style( 'tainacan-embeds', $TAINACAN_BASE_URL . '/assets/css/tainacan-embeds.css', [], TAINACAN_VERSION );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get responsive class based on aspect ratio
|
||||||
|
* This code is heavily inspired by Gutenberg plugin's "getClassNames" function.
|
||||||
|
* Check their source code for more details: /packages/block-library/src/embed/util.js
|
||||||
|
*
|
||||||
|
* @param {string} html The preview HTML that possibly contains an iframe with width and height set.
|
||||||
|
* @param {string} existingClassNames Any existing class names.
|
||||||
|
* @return {string} Deduped class names.
|
||||||
|
*/
|
||||||
|
public function add_responsive_wrapper( $html, $existingClassNames = '' ) {
|
||||||
|
|
||||||
|
$height = false;
|
||||||
|
$width = false;
|
||||||
|
|
||||||
|
$dom = new \DOMDocument();
|
||||||
|
$dom->loadHTML($html);
|
||||||
|
|
||||||
|
// If we have a fixed aspect iframe, and it's a responsive embed content.
|
||||||
|
if ($dom) {
|
||||||
|
$externalContentElement = $dom->getElementsByTagName('iframe');
|
||||||
|
|
||||||
|
if (!$externalContentElement)
|
||||||
|
$externalContentElement = $dom->getElementsByTagName('embed');
|
||||||
|
|
||||||
|
if (!$externalContentElement)
|
||||||
|
$externalContentElement = $dom->getElementsByTagName('object');
|
||||||
|
|
||||||
|
if ($externalContentElement) {
|
||||||
|
foreach($externalContentElement as $element) {
|
||||||
|
foreach($element->attributes as $attribute) {
|
||||||
|
if ($attribute->nodeName == 'width')
|
||||||
|
$width = $attribute->nodeValue;
|
||||||
|
if ($attribute->nodeName == 'height')
|
||||||
|
$height = $attribute->nodeValue;
|
||||||
|
|
||||||
|
if ($attribute->nodeName == 'class' && $attribute->nodeValue == 'wp-embedded-content') {
|
||||||
|
$height = false;
|
||||||
|
$width = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( $height && $width ) {
|
||||||
|
$aspect_ratio = number_format(( $width / $height ), 2, '.', "");
|
||||||
|
|
||||||
|
// Given the actual aspect ratio, find the widest ratio to support it.
|
||||||
|
for ($ratioIndex = 0; $ratioIndex < count(self::$aspect_ratios); $ratioIndex++) {
|
||||||
|
|
||||||
|
$potentialRatio = self::$aspect_ratios[ $ratioIndex ];
|
||||||
|
if ( $aspect_ratio >= $potentialRatio['ratio'] ) {
|
||||||
|
$class = $potentialRatio['className'] . ' tainacan-content-embed tainacan-has-aspect-ratio';
|
||||||
|
return '<figure class="' . $class . '"><div class="tainacan-content-embed__wrapper">' . $html . '</div></figure>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return $html;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Adds a responsive embed wrapper around oEmbed content
|
* Adds a responsive embed wrapper around oEmbed content
|
||||||
* @param string $html The oEmbed markup
|
* @param string $html The oEmbed markup
|
||||||
|
|
@ -126,12 +201,9 @@ class Embed {
|
||||||
*/
|
*/
|
||||||
function responsive_embed($html, $url, $attr) {
|
function responsive_embed($html, $url, $attr) {
|
||||||
|
|
||||||
$class = 'tainacan-embed-container';
|
$element = $this->add_responsive_wrapper($html);
|
||||||
|
|
||||||
if ( !preg_match('/(?:<iframe[^>]*)(?:(?:\/>)|(?:>.*?<\/iframe>))/i', $html ) && !preg_match('/(?:<object[^>]*)(?:(?:\/>)|(?:>.*?<\/object>))/i', $html) && !preg_match('/(?:<embed[^>]*)(?:(?:\/>)|(?:>.*?<\/embed>))/i', $html ) )
|
return $element;
|
||||||
$class .= ' tainacan-embed-without-iframe';
|
|
||||||
|
|
||||||
return $html !== '' ? '<div class="' . $class . '">'.$html.'</div>' : '';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -112,26 +112,54 @@ $pswp__include-minimal-style: true !default;
|
||||||
.swiper-slide-content {
|
.swiper-slide-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: block;
|
||||||
align-items: center;
|
text-align: center;
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.tainacan-embed-container {
|
.tainacan-content-embed {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
|
&.tainacan-has-aspect-ratio {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 2) / 1); /* Default to 2:1 aspect ratio. */
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-21-9 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 21) / 9);
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-18-9 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 18) / 9);
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-16-9 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 16) / 9);
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-4-3 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 4) / 3);
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-1-1 {
|
||||||
|
max-width: var(--tainacan-media-main-carousel-height, 60vh);
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-3-4 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 3) / 4);
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-9-16 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 9) / 16);
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-1-2 {
|
||||||
|
max-width: calc((var(--tainacan-media-main-carousel-height, 60vh) * 1) / 2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
iframe {
|
iframe {
|
||||||
max-height: var(--tainacan-media-main-carousel-height, 60vh);
|
max-height: var(--tainacan-media-main-carousel-height, 60vh);
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
border: none;
|
border: none;
|
||||||
display: block;
|
display: block;
|
||||||
background-image: url('../images/preloader.gif');
|
background-image: url('../images/preloader.gif');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:first-of-type,
|
a:first-of-type,
|
||||||
p:first-of-type {
|
p:first-of-type {
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
|
|
@ -157,6 +185,10 @@ $pswp__include-minimal-style: true !default;
|
||||||
width: auto;
|
width: auto;
|
||||||
max-height: var(--tainacan-media-main-carousel-height, 60vh);
|
max-height: var(--tainacan-media-main-carousel-height, 60vh);
|
||||||
}
|
}
|
||||||
|
.twitter-tweet {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tainacan-media-component__swiper-thumbs {
|
.tainacan-media-component__swiper-thumbs {
|
||||||
|
|
@ -304,34 +336,68 @@ $pswp__include-minimal-style: true !default;
|
||||||
|
|
||||||
.attachment-without-image {
|
.attachment-without-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: calc(100% - 44px);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 44px;
|
||||||
|
margin-top: 22px;
|
||||||
|
|
||||||
&.tainacan-embed-container:not(.tainacan-embed-without-iframe) {
|
&>iframe:not(.wp-embedded-content) {
|
||||||
padding: 0px;
|
width: 90vw;
|
||||||
}
|
height: 90vh;
|
||||||
.tainacan-embed-container .twitter-tweet {
|
border: none;
|
||||||
width: 100vw !important;
|
margin: 44px;
|
||||||
|
display: block;
|
||||||
|
background-image: url('../images/preloader.gif');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// PDFs file that come from document instead of attachments
|
||||||
iframe {
|
.pswp__zoom-wrap>iframe#iframePDF {
|
||||||
padding: 44px;
|
width: 90vw;
|
||||||
min-height: 90vh;
|
height: 90vh;
|
||||||
max-height: 90vh;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
border: none;
|
border: none;
|
||||||
|
margin: 44px auto;
|
||||||
display: block;
|
display: block;
|
||||||
background-image: url('../images/preloader.gif');
|
background-image: url('../images/preloader.gif');
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tainacan-content-embed {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
&.tainacan-has-aspect-ratio {
|
||||||
|
max-width: calc((90vh * 2) / 1); /* Default to 2:1 aspect ratio. */
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-21-9 {
|
||||||
|
max-width: calc((90vh * 21) / 9);
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-18-9 {
|
||||||
|
max-width: calc((90vh * 18) / 9);
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-16-9 {
|
||||||
|
max-width: calc((90vh * 16) / 9);
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-4-3 {
|
||||||
|
max-width: calc((90vh * 4) / 3);
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-1-1 {
|
||||||
|
max-width: 90vh;
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-9-16 {
|
||||||
|
max-width: calc((90vh * 9) / 16);
|
||||||
|
}
|
||||||
|
&.tainacan-embed-aspect-1-2 {
|
||||||
|
max-width: calc((90vh * 1) / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
a:first-of-type,
|
a:first-of-type,
|
||||||
p:first-of-type ,
|
p:first-of-type ,
|
||||||
article:first-of-type {
|
article:first-of-type {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue