Customizing Vimeography Pro #3 – Custom Gallery

Vimeography Custom Gallery Output

/**
 * CUSTOM GALLERY
 * Produce customized gallery based on Vimeography Pro Theme
 * with key variables set by Advanced Custom Fields
 * requires gallery ID from Vimeography Settings
 * uses ckm_svg_switcher 
 *  also uses custom admin pages, custom CSS - not shown
 */
add_shortcode( 'custom_gallery', 'custom_gallery_handler' ) ;

function custom_gallery_handler( $atts ) {
	
	$a = shortcode_atts( array( 
		'gallery_id' => 18 
	), $atts ) ;
	
	$gallery_id = $a['gallery_id'] ;
	
	$fields = get_field( 'custom_galleries', 'option' ) ; 
	
	foreach( $fields as $row ) {
		
		if ( $gallery_id == $row['gallery_id'] ) {  

			$type			= $row['type'] ;
			$icon 			= $row['icon'] ;  
			$linkto 		= $row['link_to'] ;
			$gallery_title 	= $row['title'] ; 
			$color 			= $row['color'] ;
			$show_title		= $row['show_title'] ;
			break;
			
		}
		
	} 
	
	$type_class = '' ;
	
	if ( 1 == $type ) { 
			$type_class = ' custom-gallery-row' ; 
	} 
	if ( 2 == $type ) { 
			$type_class = ' custom-gallery-archive' ; 
	}

	$img = ckm_svg_switcher( $icon ) ;
	
	ob_start() ;
	
	?>
	<!-- CUSTOM GALLERY -->
	<div id="custom-gallery-<?php echo $gallery_id ; ?>" class="custom-gallery custom-gallery-<?php echo $gallery_id . $type_class ; ?>" >
		<?php if ( $img ) { ?>
		<div class="custom-gallery-image-wrap" style="color: <?php echo $color ; ?>">
			<?php echo $img ; ?>
		</div>
		<?php } ?>
		<?php if ( $linkto  && 1 == $show_title ) { ?>
		
			<h3>
				<a style="color: <?php echo $color ; ?>" href="<?php echo $linkto ; ?>"><?php echo $gallery_title ; ?></a>
			</h3>
			
		<?php } 
		
		if ( ! $linkto  && 1 == $show_title ) { ?>
			
			<h3 style="color: <?php echo $color ; ?>">
				<?php echo $gallery_title ; ?>
			</h3>
			
		<?php }
		
		if ( 1 == $type ) { 
			echo do_shortcode( ' [vimeography id="' . $gallery_id . '" limit="0" per_page="4"] '	) ; 
		} 
		if ( 2 == $type ) {
			echo do_shortcode( ' [vimeography id="' . $gallery_id . '" limit="0" per_page="100"] '	) ; 
		}
		if ( 0 == $type ) {
			echo do_shortcode( ' [vimeography id="' . $gallery_id . '"] '	) ; 
		}
		?>		
	</div><!--/ CUSTOM GALLERY -->
	
	<?php
	
	return ob_get_clean() ;
	
}
/* Add Custom Gallery Body Class 
 * Not recommended unless necessary - "has_shortcode" is high overhead function
 */
function custom_gallery_class( $classes ) {

    global $post;

    if( isset( $post->post_content ) && has_shortcode( $post->post_content, 'custom_gallery' ) ) {
		
		$classes[] = 'custom-gallery' ;
		
    }
	
    return $classes ;
}
add_filter( 'body_class', 'custom_gallery_class' );
/* Add Inline Color Styles */
add_action( 'wp_enqueue_scripts', 'add_custom_gallery_svg_styles',100 ) ;

function add_custom_gallery_svg_styles() {
	
	$custom_gallery_style = '' ;
	
	$fields = get_field( 'custom_galleries', 'option' ) ;
	
	foreach( $fields as $row ) {
		
			$custom_gallery_style .= 
			'
			.custom-gallery-' . $row['gallery_id'] . ' svg path 
			{ 
				fill: ' . $row['color'] . '
			} 	
			.custom-gallery-' . $row['gallery_id'] . ' .vimeography-thumbnail
			{ 
				background: ' . $row['color'] . ' !important;
			}  
			'; 
	}
	
	$teacher_video_fields = get_field( 'teacher_boxes', 'option' ) ;
	
	foreach ( $teacher_video_fields as $row ) {
		
			$custom_gallery_style .= 
			'
			.video-teacher-' . $row['name'] . ' .vimeography-thumbnail 
			{
				background: ' . $row['color'] . ' !important;
			}
			';
				
	}
		
	wp_register_style( 'custom-gallery-styles', false );
	wp_enqueue_style( 'custom-gallery-styles' );
	wp_add_inline_style( 'custom-gallery-styles', $custom_gallery_style ) ;
	
}
/**
* SVG IMAGE SWITCHER
* Return Image Url
* Get File Contents if SVG
* based on https://gist.github.com/derekshirk/f2c1bb844a5bc98a038cc40fdb5f559a
*/
function ckm_svg_switcher( $icon ) {
	 
	if ( ! empty( $icon ) ) {
		
		$ext = pathinfo( $icon['url'], PATHINFO_EXTENSION );
		
		if ( $ext == 'svg' ) {
			
			$img = file_get_contents( $icon['url'] ) ;
			
		} else {
			
			$url = $icon['url'];
			$title = $icon['title'];
			$alt = $icon['alt'];
			
			// Thumbnail size attributes.
			$size = 'gallery-icon';
			$thumb = $icon['sizes'][ $size ];
			$width = $icon['sizes'][ $size . '-width' ];
			$height = $icon['sizes'][ $size . '-height' ];

			$img = '<img class="custom-gallery-icon" src="' . esc_url( $thumb ) . '" alt="' . esc_attr( $alt ) .'" />' ;
			
		}
		
	}
	 
	return $img ; 

}
add_image_size( 'gallery-icon', 60, 60, true ) ;

/**

Custom Gallery ACF Set-Up
ACF Custom Field Set-Up
Custom Gallery Setttings
ACF Custom Gallery Settings
Custom Gallery Output

Leave a Reply