Skip to content

Commit

Permalink
#2576 Added in master
Browse files Browse the repository at this point in the history
  • Loading branch information
@MARQAS
MARQAS committed Feb 4, 2019
1 parent b4bbb3f commit 3c00f50
Showing 1 changed file with 74 additions and 20 deletions.
94 changes: 74 additions & 20 deletions includes/vendor/amp/includes/embeds/class-amp-gallery-embed.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ public function shortcode( $attr ) {
'id' => $post ? $post->ID : 0,
'include' => '',
'exclude' => '',
'size' => array( $this->args['width'], $this->args['height'] ),
//'size' => array( $this->args['width'], $this->args['height'] ),
//'size' => isset($attr['size'])? $attr['size']:'thumbnail',
'size' => 'large'
), $attr, 'gallery' );

$id = intval( $atts['id'] );
Expand Down Expand Up @@ -146,26 +148,23 @@ public function render( $args ) {
'image-with-caption-html'=>'',
'image-without-caption-html' =>'{{main_images}}',
'gallery_css' => '
.wrapper{display:inline-block;width:100%;clear:both;}
.wrapper amp-img{height:134px;width:200px;position: relative;float:left;margin: 0px 30px 30px 0px;}
.gal_w{display:inline-block;width:100%}
.gal_w amp-img{background:#f1f1f1;height:134px;width:150px;position: relative;float:left;margin:10px;}
.cls-btn{background:#0d0d0d;border:none;position: absolute;right: 10px;}
.cls-btn:after{content:"X";display:inline-block;color:#fff;font-size:20px;padding:20px;}
',
'scripts' => array()
),
);


$carousel_markup_all = apply_filters("ampforwp_manage_gallery_markup", $carousel_markup_all);
//Default markup
$markup = $carousel_markup_all[1];

if( isset($redux_builder_amp['ampforwp-gallery-design-type']) && isset($carousel_markup_all[$redux_builder_amp['ampforwp-gallery-design-type'] ] ) ){
$markup = $carousel_markup_all[$redux_builder_amp['ampforwp-gallery-design-type']];
}
/*Filter*/


$amp_images = array();
foreach ( $args['images'] as $key => $image ) {
$amp_img_arr = array(
Expand All @@ -192,35 +191,55 @@ public function render( $args ) {
$amp_img_arr
);

//Small Thumbnail Images
$thumb_url = ampforwp_aq_resize( $image['url'], 120, 60, true, false ); //resize & crop the image
if($thumb_url!=false){
$smallimage = $thumb_url[0];
$smallwidth = $thumb_url[1];
$smallheight = $thumb_url[2];
}else{
$smallimage = $image['url'];
$smallwidth = $image['width'];
$smallheight = $image['height'];
}

$amp_images_small[$key] = AMP_HTML_Utils::build_tag(
'amp-img',
array(
'src' => $smallimage,
'width' => $smallwidth,
'height' => $smallheight,
'layout' => 'fill',
'class' => 'amp-carousel-img',
)
);

//Image markups loading
$returnHtml = '';
//Check if the attachment has caption or not
if(isset($image['caption']) && $image['caption'] != '' && isset($markup['image-with-caption-html']) && $markup['image-with-caption-html'] != ''){
// To enable the carousel magic
//add_action('ampforwp_after_header','ampforwp_carousel_class_magic', 999, 1);
add_filter('ampforwp_modify_the_content','ampforwp_carousel_class_magic');
//add_action('below_the_header_design_1','ampforwp_carousel_class_magic', 999, 1);
$caption = $image['caption'];
// Append the caption with image
$returnHtml = isset($markup['image-with-caption-html'])? $markup['image-with-caption-html']:'';
$returnHtml = str_replace('{{main_images}}', $amp_images[$key] , $returnHtml);
$returnHtml = str_replace('{{main_images_caption}}', wp_kses_data( $caption ), $returnHtml);
// Replace the openbrack with [ and closebrack with ]
$returnHtml = str_replace('{{openbrack}}', '[', $returnHtml);
$returnHtml = str_replace('{{closebrack}}', ']', $returnHtml);
}
elseif( isset($markup['image-without-caption-html']) ){
// If there is no caption
$returnHtml = isset($markup['image-without-caption-html'])? $markup['image-without-caption-html'] :'';
$returnHtml = str_replace('{{main_images}}', $amp_images[$key] , $returnHtml);
}


$images[$key] = apply_filters('amp_gallery_images', $returnHtml, $image, $markup);
}// foreach Closed



//replacements
$r = rand(1,100);
$amp_carousel = AMP_HTML_Utils::build_tag(
$amp_carousel = AMP_HTML_Utils::build_tag(
'amp-carousel',
array(
'width' => $this->args['width'],
Expand All @@ -232,7 +251,7 @@ public function render( $args ) {
),
implode( PHP_EOL, $images ));

$amp_carousel_with_thumbnail_nav = apply_filters('amp_thumbnail_images', $amp_images, $r, $markup);
$amp_carousel_with_thumbnail_nav = apply_filters('amp_thumbnail_images', $amp_images_small, $r, $markup);
$amp_carousel_thumbnail ='';
if(!empty($amp_carousel_with_thumbnail_nav)){
$amp_carousel_thumbnail = AMP_HTML_Utils::build_tag(
Expand All @@ -248,7 +267,6 @@ public function render( $args ) {

}
$amp_carousel_thumbnail = apply_filters('amp_gallery_markup', $amp_carousel_thumbnail);

$returnCompleteHtml = $markup['main-html'];
//last changes
$returnCompleteHtml = str_replace('{{with_carousel}}', $amp_carousel, $returnCompleteHtml);
Expand All @@ -259,18 +277,15 @@ public function render( $args ) {
}
}// Class closed


// Add Caption in the Gallery Image
add_filter('amp_gallery_images','ampforwp_new_gallery_images', 10, 3);
function ampforwp_new_gallery_images($images_markup, $image, $markup_arr){
add_action('amp_post_template_css', 'ampforwp_additional_gallery_style');
add_filter('amp_post_template_data','ampforwp_carousel_bind_script');
add_action('amp_post_template_css', 'ampforwp_additional_style_carousel_caption');
return $images_markup;
}




if( ! function_exists( 'ampforwp_additional_gallery_style' ) ){
function ampforwp_additional_gallery_style(){
global $redux_builder_amp,$carousel_markup_all;
Expand Down Expand Up @@ -319,4 +334,43 @@ function ampforwp_new_thumbnail_images($amp_images, $uniqueid, $markup_arr){
$amp_thumb_image_buttons[$key] = $returnHtml;
}
return $amp_thumb_image_buttons;
}
}

if( ! function_exists( 'ampforwp_additional_style_carousel_caption' ) ){
function ampforwp_additional_style_carousel_caption(){ ?>
.collapsible-captions {--caption-height: 32px; --image-height: 100%; --caption-padding:1rem; --button-size: 28px; --caption-color: #f5f5f5;; --caption-bg-color: #111;}
.collapsible-captions * {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
box-sizing: border-box;
}
.collapsible-captions .amp-carousel-container {position: relative; width: 100%;}
.collapsible-captions amp-img img {object-fit: contain; }
.collapsible-captions figure { margin: 0; padding: 0; }
.collapsible-captions figcaption { position: absolute; bottom: 0;width: 100%;
max-height: var(--caption-height);margin-bottom:0;
line-height: var(--caption-height);
padding: 0 var(--button-size) 0 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: max-height 200ms cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
color: var(--caption-color);
background: rgba(0, 0, 0, 0.6);
}
.collapsible-captions figcaption.expanded {
line-height: inherit;
white-space: normal;
text-overflow: auto;
max-height: 100px;
overflow: auto;
}
.collapsible-captions figcaption:focus { outline: none; border: none; }
.collapsible-captions figcaption span { display: block; position: absolute;
top: calc((var(--caption-height) - var(--button-size)) / 2);
right: 2px; width: var(--button-size); height: var(--button-size);
line-height: var(--button-size); text-align: center; font-size: 12px; color: inherit;
cursor: pointer; }
figcaption{ margin-bottom: 20px; }
<?php }
}

0 comments on commit 3c00f50

Please sign in to comment.