Implement image overflow

assets/js/images.js

@@ -0,0 +1,151 @@
+/**
+ * images.js
+ *
+ * EXPLICATIONS
+ *
+ * @since Marianne 1.?
+ */
+
+
+( function( $ ) {
+	/**
+	 * Image Overflow
+	 *
+	 * @see Theme Customizer
+	 */
+
+	var imageoverflowoption = marianne_img_options.setting,
+		imageoverflowportrait = false,
+		imageoverflowwidth = parseInt( marianne_img_options.overflow_width, 10 ),
+		pagewidth = parseInt( marianne_img_options.content_width, 10 ),
+		imageoverflow_max = pagewidth + ( imageoverflowwidth * 2 ),
+		imageoverflow_min = pagewidth,
+		imagewidth,
+		imageheight,
+		sidebar = 'none',
+		margin = 'double',
+		margin_value,
+		maxwidth_value_calc;
+
+	if ( '1' === marianne_img_options.include_portrait ) {
+		imageoverflowportrait = true;
+	}
+
+	function imageoverflow( $element, $sidebar ) {
+		var img = new Image();
+		img.src = $( $element ).attr( "src" );
+		img.onload = function () {
+			if ( $element.attributes['width'].value ) {
+				imagewidth = parseInt( $element.attributes['width'].value, 10 );
+			} else {
+				imagewidth = this.width;
+			}
+
+			if ( $element.attributes['height'] && $element.attributes['height'].value !== 'undefined' ) {
+				imageheight = parseInt( $element.attributes['height'].value, 10 );
+			} else {
+				imageheight = this.height;
+			}
+
+			if ( imagewidth > imageoverflow_min && ! $( $element ).parents( ".wp-block-gallery" ).length ) {
+
+				if ( imagewidth >= imageheight
+					|| ( imagewidth < imageheight && false !== imageoverflowportrait )
+				) {
+
+					// If the image width is superior to the maximum overflow width.
+					if ( imagewidth >= imageoverflow_max ) {
+
+						if ( $( $element ).attr( "style" ) ) {
+							$( $element ).removeAttr( "style" );
+						}
+
+						if ( ! window.matchMedia( "(max-width: " + imageoverflow_max + "px)" ).matches ) {
+							if ( 'double' === margin ) {
+								margin_value = '0 -' + imageoverflowwidth + 'px';
+								maxwidth_value_calc = '100% + ' + imageoverflowwidth * 2 + 'px';
+							} else if ( 'simple-right' === margin ) {
+								margin_value = '0 -' + imageoverflowwidth + 'px 0 0';
+								maxwidth_value_calc = '100% + ' + imageoverflowwidth + 'px';
+							} else {
+								margin_value = '0 0 0 -' + imageoverflowwidth + 'px';
+								maxwidth_value_calc = '100% + ' + imageoverflowwidth + 'px';
+							}
+
+							$( $element ).css( {
+								'margin': margin_value,
+								'max-width': 'calc(' + maxwidth_value_calc + ')'
+							});
+							$( $element ).attr('style', $( $element ).attr('style') + ' max-width: -moz-calc(' + maxwidth_value_calc + ');' + ' max-width: -webkit-calc(' + maxwidth_value_calc + ');');
+
+						// If the image width is superior to the page width but inferior to the maximum overflow width.
+						} else {
+							margin_value = '0 calc(50% - 50vw)';
+
+							$( $element ).css({
+								'max-width': '100vw',
+								'margin': margin_value
+							});
+							$( $element ).attr('style', $( $element ).attr('style') + ' margin: 0 -moz-calc(50% - 50vw);' + ' margin: 0 -webkit-calc(' + Math.floor( $( '.site' ).width() / 2) + 'px - ' + Math.floor($('body').width() / 2) + 'px);');
+						}
+
+					} else {
+						if ( 'double' === margin ) {
+							margin_value = '0 -' + ( ( imagewidth - pagewidth ) / 2 ) + 'px';
+						} else if ( 'simple-right' === margin ) {
+							margin_value = '0 -' + ( ( imagewidth - pagewidth) / 2 ) + 'px 0 0';
+
+						} else {
+							margin_value = '0 0 0 -' + ((imagewidth - pagewidth) / 2) + 'px';
+						}
+
+						$($element).css('margin', margin_value);
+						$($element).css('max-width', 'calc(100% + ' + (imagewidth - pagewidth) + 'px)');
+						$($element).attr('style', $($element).attr('style') + ' max-width: -moz-calc(100% + ' + (imagewidth - pagewidth) + 'px);' + ' max-width: -webkit-calc(100% + ' + (imagewidth - pagewidth) + 'px);');
+					}
+				}
+			}
+		};
+	}
+
+	if ( $( "body" ).hasClass( "two-columns" ) ) {
+		if ( $( "body" ).hasClass( "sidebar-left" ) ) {
+			sidebar = "left";
+		} else {
+			sidebar = "right";
+		}
+	}
+	if ( "left" === sidebar ) {
+		margin = "simple-right";
+	} else if ( 'right' === sidebar ) {
+		margin = "simple-left";
+	}
+
+	if ( "all" === imageoverflowoption ) {
+		$( ".entry-thumbnail img" ).each( function() {
+			imageoverflow( this, margin );
+		});
+		$( ".entry-content img").each( function() {
+			imageoverflow( this, margin );
+		});
+	} else if ( "featured" === imageoverflowoption ) {
+		$( ".entry-thumbnail img" ).each( function() {
+			imageoverflow( this, margin );
+		});
+	}
+
+	$( window ).resize( function() {
+		if ( "all" === imageoverflowoption ) {
+			$( ".entry-thumbnail img" ).each( function() {
+				imageoverflow( this, margin );
+			});
+			$( ".entry-content img" ).each( function() {
+				imageoverflow( this, margin );
+			});
+		} else if ( "thumbnail" === imageoverflowoption ) {
+			$( ".entry-thumbnail img" ).each( function() {
+				imageoverflow( this, margin );
+			});
+		}
+	});
+} )( jQuery );

functions.php

@@ -152,6 +152,26 @@ if ( ! function_exists( 'marianne_styles_scripts' ) ) {
 		 */
 		wp_enqueue_script( 'marianne-navigation', get_template_directory_uri() . "/assets/js/navigation$min.js", array( 'jquery' ), $theme_version, true );
 
+		/**
+		 * The image overflow script.
+		 *
+		 * @since Marianne 1.?
+		 */
+		if ( marianne_get_theme_mod( 'marianne_content_img_overflow' ) ) {
+			wp_register_script( 'marianne-image-overflow', get_template_directory_uri() . "/assets/js/images$min.js", array( 'jquery' ), $theme_version, true );
+
+			$marianne_img_overflow_options = array(
+				'setting'          => marianne_get_theme_mod( 'marianne_content_img_overflow' ),
+				'include_portrait' => marianne_get_theme_mod( 'marianne_content_img_overflow_portrait' ),
+				//'content_width'    => marianne_get_theme_mod( 'marianne_global_page_width' ),
+				'content_width'    => marianne_get_theme_mod( 'marianne_global_page_width' ),
+				'overflow_width'   => marianne_get_theme_mod( 'marianne_content_img_overflow_margin' ),
+			);
+
+			wp_localize_script( 'marianne-image-overflow', 'marianne_img_options', $marianne_img_overflow_options );
+			wp_enqueue_script( 'marianne-image-overflow' );
+		}
+
 		// Threaded comment reply styles.
 		if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 			wp_enqueue_script( 'comment-reply' );

inc/customizer.php

@@ -384,6 +384,42 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
 			'live'        => true,
 		);
 
+		$marianne_customizer_options[] = array(
+			'section'     => 'marianne_content',
+			'id'          => 'img_overflow',
+			'title'       => __( 'Image overflow', 'marianne' ),
+			'description' => __( 'Make the images overflow from the content.', 'marianne' ),
+			'type'        => 'select',
+			'value'       => array(
+				'disabled' => __( 'Disabled', 'marianne' ),
+				'featured' => __( 'Apply to featured images only', 'marianne' ),
+				'all'      => __( 'Apply to all content images', 'marianne' ),
+			),
+			'live'        => false,
+		);
+
+		$marianne_customizer_options[] = array(
+			'section'     => 'marianne_content',
+			'id'          => 'img_overflow_portrait',
+			'title'       => __( 'Enable image overflow for portrait images.', 'marianne' ),
+			'type'        => 'checkbox',
+			'live'        => false,
+		);
+
+		$marianne_customizer_options[] = array(
+			'section'     => 'marianne_content',
+			'id'          => 'img_overflow_margin',
+			'title'       => __( 'Image overflow margin', 'marianne' ),
+			'description' => __( 'Set the overflow width in pixels. Default: 100.', 'marianne' ),
+			'input_attrs' => array(
+				'max'  => 300,
+				'min'  => 50,
+				'step' => 25,
+			),
+			'type'        => 'marianne_slider',
+			'live'        => false,
+		);
+
 		// Post List Settings.
 		$marianne_customizer_options[] = array(
 			'section'     => 'marianne_loop',
@@ -788,8 +824,11 @@ if ( ! function_exists( 'marianne_options_default' ) ) {
 			'marianne_header_menu_search_text' => '',
 
 			// Content Formatting.
-			'marianne_content_text_align' => 'left',
-			'marianne_content_hyphens'    => false,
+			'marianne_content_text_align'            => 'left',
+			'marianne_content_hyphens'               => false,
+			'marianne_content_img_overflow'          => 'disabled',
+			'marianne_content_img_overflow_portrait' => false,
+			'marianne_content_img_overflow_margin'   => 100,
 
 			// Post List Settings.
 			'marianne_loop_comment_link_text' => '',

inc/template-tags.php

@@ -332,13 +332,18 @@ if ( ! function_exists( 'marianne_the_post_thumbnail' ) ) {
 	 */
 	function marianne_the_post_thumbnail( $class = '', $args = array() ) {
 		if ( has_post_thumbnail() ) {
+			if ( ! in_array( 'overflow', $args, true ) ) {
+				$size = 'marianne-thumbnails';
+			} else {
+				$size = 'marianne-thumbnails-overflow';
+			}
 			?>
 				<figure<?php marianne_add_class( $class ); ?>>
 					<?php if ( ! in_array( 'link', $args, true ) ) : ?>
-						<?php the_post_thumbnail( 'marianne-thumbnails' ); ?>
+						<?php the_post_thumbnail( $size ); ?>
 					<?php else : ?>
 						<a href="<?php echo esc_url( get_the_permalink() ); ?>">
-							<?php the_post_thumbnail( 'marianne-thumbnails' ); ?>
+							<?php the_post_thumbnail( $size ); ?>
 						</a>
 					<?php endif; ?>
 

template-parts/content-single.php

@@ -29,9 +29,16 @@
 
 		if ( true === marianne_get_theme_mod( 'marianne_global_images_expand' ) ) {
 			$marianne_thumbnail_class .= ' entry-thumbnail-wide';
+
 		}
 
-		marianne_the_post_thumbnail( $marianne_thumbnail_class, array( 'caption' ) );
+		$marianne_thumbnail_options = array( 'caption' );
+
+		if ( 'featured' === marianne_get_theme_mod( 'marianne_content_img_overflow' ) || 'all' === marianne_get_theme_mod( 'marianne_content_img_overflow' ) ) {
+			$marianne_thumbnail_options[] = 'overflow';
+		}
+
+		marianne_the_post_thumbnail( $marianne_thumbnail_class, $marianne_thumbnail_options );
 		?>
 	</header>