Class “too-short” always applied

  • Hi,

    Working with the Dyad 2 downloaded from WP.com, I noticed that the blocks on the front page will always have the fade-to-white effect no matter the length of the excerpt.

    On previous versions this used to work better: the fade effect was only applied when the excerpt was longer than (80% of) the block height. Shorter content would not get this fade-out at the bottom.

    The issue can be seen on the demo page https://dyad2demo.wordpress.com/ as well. All posts there have this fade-out effect including the one called “A short post” half way down the page. This one should not have the fade-out effect applied.

    After a long search I have found the reason.

    The script function adjustPosts() in global.js, meant to apply the class “too-short” to the wrapper div, will ALWAYS apply this class, no matter the length of the content because the wrapper auto-adjusts itself to the exact height of that content. Which in turn will cause the following “if smaller than or equal to” be true on all occasions.

    
if ( $innerContainHeight <= $wholeContentHeight ) {
	$contain.parent().addClass('too-short');
}

    Simply change that to 

    
if ( $innerContainHeight < $wholeContentHeight ) {
	$contain.parent().addClass('too-short');
}

    and the issue is solved ??

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    @ravanh, many thanks for the report and many thanks for giving the solution. I’ve created a bug report on this issue and hopefully it will be fixed on the next release of Dyad 2. It will sort of depend on what the developers find when the dig into it to see why it was done that way instead of the way it was done on the original Dyad theme.

    • This reply was modified 6 years, 10 months ago by sacredpath.

    Thanks ??

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    You are welcome.

    I’ve found another issue:

    When Jetpack is activated, the theme uses dyad_2_has_post_thumbnail() which uses in turn a Jetpack function to find the featured post image. This is better than the WP’s own has_post_thumbnail() because if there is no featured image defined, it will search through the post content and find the first embedded image and use that one.

    Nice touch for a theme that depends on featured images so much ??

    But there is one little problem: the corresponding post class “has-post-thumbnail” is not set when an embedded image is found and used in place of the missing featured image. No problem for a single post page, but on the front page the missing class causes the post image to disappear.

    The front page content block behaves as if there is no featured image and will take full width for title and excerpt instead of aligning the text block to the left or to the right of the post image.

    In short: the image that is not set, but is still used (via the Jetpack function) as a features image on the front page, is not visible because of the missing corresponding post class “has-post-thumbnail”.

    My solution is editing the template files content-singe.php and content-blocks.php to pass “has-post-thumbnail” via $class to post_class() when dyad2_has_post_thumbnail() finds an embedded image to use as a featured image.

    template-parts/content-single.php
    From:

    
...
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<?php if ( dyad_2_has_post_thumbnail() && 'image' != get_post_format() ) : ?>
		<?php
		$thumb = dyad_2_get_attachment_image_src( $post->ID, get_post_thumbnail_id( $post->ID ), 'dyad-2-featured-image' );
		$thumb2 = dyad_2_get_attachment_image_src( $post->ID, get_post_thumbnail_id( $post->ID ), 'dyad-2-featured-image-horz' );
		?>
...

    to:

    
...
$class = dyad_2_has_post_thumbnail() ? 'has-post-thumbnail' : '';
?>

<article id="post-<?php the_ID(); ?>" <?php post_class( $class ); ?>>
	<?php if ( !empty($class) && 'image' != get_post_format() ) : ?>
...

    And similarly in template-parts/content-single.php

    
...
$class = dyad_2_has_post_thumbnail() ? 'has-post-thumbnail' : '';
?>

<article id="post-<?php the_ID(); ?>" <?php post_class( $class ); ?>>
...

    Hope that can be picked up too ??

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hmmm, on my test site, with the latest version of Dyad 2 and Jetpack, I set a post with an image inside of the content and no featured image set, and the image is showing up on the main blog page as the featured image.

    Can you make sure you have the latest version of Dyad 2 and Jetpack installed and let me know?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Class “too-short” always applied’ is closed to new replies.