beenull/marianne_wordpress_theme
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Implement image overflow

Browse source
This commit is contained in:
te2dy 2021-05-29 11:34:01 +02:00
parent 9fbd1e4496
commit 07f20f8677
5 changed files with 41 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
assets/js/images.js
View file

@ -35,7 +35,7 @@
var img = new Image();
img.src = $( $element ).attr( "src" );
img.onload = function () {
if ( $element.attributes['width'] && $element.attributes['width'].value ) {
if ( $element.attributes['width'].value ) {
imagewidth = parseInt( $element.attributes['width'].value, 10 );
} else {
imagewidth = this.width;
@ -47,12 +47,8 @@
imageheight = this.height;
}
console.log( imageoverflow_min );
if ( imagewidth > imageoverflow_min && ! $( $element ).parents( ".wp-block-gallery" ).length ) {
console.log( 'ok' );
if ( imagewidth >= imageheight
|| ( imagewidth < imageheight && false !== imageoverflowportrait )
) {
@ -76,28 +72,28 @@
maxwidth_value_calc = '100% + ' + imageoverflowwidth + 'px';
}
$($element).css({
$( $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 + ');');
$( $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({
$( $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);');
$( $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';
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';

3
functions.php
View file

@ -163,8 +163,9 @@ if ( ! function_exists( 'marianne_styles_scripts' ) ) {
$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' => 200,
'overflow_width' => marianne_get_theme_mod( 'marianne_content_img_overflow_margin' ),
);
wp_localize_script( 'marianne-image-overflow', 'marianne_img_options', $marianne_img_overflow_options );

15
inc/customizer.php
View file

@ -406,6 +406,20 @@ if ( ! function_exists( 'marianne_customize_register' ) ) {
'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',
@ -814,6 +828,7 @@ if ( ! function_exists( 'marianne_options_default' ) ) {
'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' => '',

9
inc/template-tags.php
View file

@ -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; ?>

9
template-parts/content-single.php
View file

@ -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>