How to prevent Wordpress Twenty Fourteen from chopping featured images on mobile

A discussion area for issues about Glorious Noise: bug reports, feature requests, etc.

Moderators: D. Phillips, Jake

Post Reply
Jake
GLONO Team Member
Posts: 7772
Joined: Sun Sep 09, 2001 8:00 pm
Location: Michigan

How to prevent Wordpress Twenty Fourteen from chopping featured images on mobile

Post by Jake »

How to prevent Wordpress Twenty Fourteen from chopping featured images on mobile

This has been bugging me for three years and I think I finally figured it out. Sharing here so 1) I don't forget in case it gets messed up by an update, and 2) in case anyone else is struggling.

The issue is that when you have a site that uses Wordpress Twenty Fourteen theme on your phone, for some reason the featured image gets its top lopped off. I believe this might have something to do with the header bar floating. And I think I might have even tinkered with the header bar so maybe this is unique to me after all. Not sure. But it sucks. Because when I look at a single post page on my site, you can't see the top of the image. So if you've got a picture of somebody, their head gets chopped off. It looks stupid and it drives me crazy.

Here's how to fix it. (Disclaimer: back up everything before you mess with anything.)

Go to Appearance > Editor

In the right nav under Templates, click and open template-tags.php (inc/template-tags.php)

Scroll down to the function twentyfourteen_post_thumbnail()

Above the following line of code:

Code: Select all

	<div class="post-thumbnail">
Insert the following block of code:

Code: Select all

    <!-- JAKE MOD TO GET THE FEATURED IMAGE TO NOT CHOP OFF TOP ON MOBILE -->
    <div id="jake-image-break"><br /><br /></div>
    <!-- END JAKE MOD -->
Click Update File

This will get your posts looking good on your phone. But wait! Now you've got extra white space when you look on your desktop. Boo! It looks terrible, right? Let fix it!

Go to Appearance > Edit CSS

Open Additional CSS and add the following:

Code: Select all

@media screen and (min-width: 783px) {
	div#jake-image-break {
		display: none;
	}
}
Click Save & Publish

Boom, done. Looks good, right?

#howto #wordpress #twentyfourteen
Jake
GLONO Team Member
Posts: 7772
Joined: Sun Sep 09, 2001 8:00 pm
Location: Michigan

Re: How to prevent Wordpress Twenty Fourteen from chopping featured images on mobile

Post by Jake »

Thank GOODNESS I posted this. It would've taken forever to figure it out again!
Jake
GLONO Team Member
Posts: 7772
Joined: Sun Sep 09, 2001 8:00 pm
Location: Michigan

Re: How to prevent Wordpress Twenty Fourteen from chopping featured images on mobile

Post by Jake »

Here's another mod I made. I added a date.php template for my date archives. And in order to get them to show all posts and in chronological order I had to add the following snippet to functions.php:

Code: Select all

/* JAKE MOD */
add_action('pre_get_posts', 'wpa_44980' );
function wpa_44980( $wp_query ) {

    if( is_date() ) {
        set_query_var('posts_per_page', '-1');
		set_query_var( 'order', 'ASC' );
    }
}
Jake
GLONO Team Member
Posts: 7772
Joined: Sun Sep 09, 2001 8:00 pm
Location: Michigan

Re: How to prevent Wordpress Twenty Fourteen from chopping featured images on mobile

Post by Jake »

And to add a default image, make sure you have the following in the /* JAKE MOD */ section of the functions.php page:

Code: Select all

function jeherve_custom_image( $media, $post_id, $args ) {
    if ( $media ) {
        return $media;
    } else {
        $permalink = get_permalink( $post_id );
        $url = apply_filters( 'jetpack_photon_url', 'https://gloriousnoise.com/images/glonoman350x200border.jpg' );
     
        return array( array(
            'type'  => 'image',
            'from'  => 'custom_fallback',
            'src'   => esc_url( $url ),
            'href'  => $permalink,
        ) );
    }
}
add_filter( 'jetpack_images_get_images', 'jeherve_custom_image', 10, 3 );
Jake
GLONO Team Member
Posts: 7772
Joined: Sun Sep 09, 2001 8:00 pm
Location: Michigan

Re: How to prevent Wordpress Twenty Fourteen from chopping featured images on mobile

Post by Jake »

And if you ever forget to back up that date.php file, here it is:

Code: Select all

<?php
/**
 * The template for displaying Archive pages
 *
 * Used to display archive-type pages if nothing more specific matches a query.
 * For example, puts together date-based pages if no date.php file exists. -- That's what I did! -Jake, 2/9/2021.
 *
 * If you'd like to further customize these archive views, you may create a
 * new template file for each specific one. For example, Twenty Fourteen
 * already has tag.php for Tag archives, category.php for Category archives,
 * and author.php for Author archives.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */



get_header(); ?>

<style>
	#infinite-handle {
		display:none;
	}
</style>

	<section id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<?php if ( have_posts() ) : ?>

			<header class="page-header" style="margin-bottom: 20px;">
				<h1 class="page-title" style="margin-top: 20px;">
					<?php
					if ( is_day() ) {
						/* translators: %s: Date. */
						printf( __( 'Daily Archives: %s', 'twentyfourteen' ), get_the_date() );
					} elseif ( is_month() ) {
						
						$d=date_create(get_the_date( _x( 'F Y', 'monthly archives date format', 'twentyfourteen' )));
						date_modify($d,"-1 month");
						?><a href="<?php echo date_format($d,"/Y/m/"); ?>">&laquo;</a>&nbsp;<?php
	
						/* translators: %s: Date. */
						printf( __( 'Monthly Archives: %s', 'twentyfourteen' ), get_the_date( _x( 'F Y', 'monthly archives date format', 'twentyfourteen' ) ) );

						$d=date_create(get_the_date( _x( 'F Y', 'monthly archives date format', 'twentyfourteen' )));
						date_modify($d,"+1 month");
						?>&nbsp;<a href="<?php echo date_format($d,"/Y/m/"); ?>">&raquo;</a><?php
							
						 
						
					} elseif ( is_year() ) {
						/* translators: %s: Date. */
						printf( __( 'Yearly Archives: %s', 'twentyfourteen' ), get_the_date( _x( 'Y', 'yearly archives date format', 'twentyfourteen' ) ) );
					} else {
						_e( 'Archives', 'twentyfourteen' );
					}
					?>
				</h1>
			</header><!-- .page-header -->

			<div class="entry-content">
					
				
				<?php		
				// Start the Loop.
				while ( have_posts() ) :
					the_post();

					/*
					 * Include the post format-specific template for the content. If you want
					 * to use this in a child theme, then include a file called content-___.php
					 * (where ___ is the post format) and that will be used instead.
					 */
					//get_template_part( 'content', get_post_format() );
				?>
				
				<article style="border-bottom: 1px solid rgba(0,0,0,.1); margin: 0; min-height: 40px; padding: 12px 0 9px; overflow: hidden;">
					<div style="float: left; margin: 0 10px 3px 0; width: 84px; max-height: 84px; overflow: hidden;">
						<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
							<?php if ( has_post_thumbnail() ) : ?>
							<?php the_post_thumbnail(); ?>
							<?php else : ?>
							<img style="border:1px solid silver" src="http://gloriousnoise.com/images/glonoman82x47bw.jpg" width="82px" height="47px"  />
							<?php endif; ?>
						</a>
					</div>

					<div style="clear: none; font-size: 15px; font-weight: 900; line-height: 1.2; margin-bottom: 6px; text-transform: none;"><a style="color:#2b2b2b;" href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a><br /><span style="color: #767676; font-size: 12px; font-weight: 400; line-height: 1.3333333333;"><?php echo get_the_date(); ?> | <?php the_author(); ?></span></div>				
				</article>


				
				<?php
					endwhile;
					// Previous/next page navigation.
					//twentyfourteen_paging_nav();

				else :
					// If no content, include the "No posts found" template.
					get_template_part( 'content', 'none' );

				endif;
				?>


			</div><!-- entry-content -->

		</div><!-- #content -->
	</section><!-- #primary -->

<?php
get_sidebar( 'content' );
get_sidebar();
get_footer();
Jake
GLONO Team Member
Posts: 7772
Joined: Sun Sep 09, 2001 8:00 pm
Location: Michigan

Re: How to prevent Wordpress Twenty Fourteen from chopping featured images on mobile

Post by Jake »

Oh yeah, I also replace the header.php so the logo is in the correct spot:

Code: Select all

<?php
/**
 * The Header for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Fourteen
 * @since Twenty Fourteen 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<link rel="profile" href="https://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js?ver=3.7.0"></script>
	<![endif]-->
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="hfeed site">

	<header id="masthead" class="site-header" role="banner">
		<div class="header-main">
			
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
			<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
		</a>
			
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

			<div class="search-toggle">
				<a href="#search-container" class="screen-reader-text" aria-expanded="false" aria-controls="search-container"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
			</div>

			<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
				<button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
				<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
				<?php
				wp_nav_menu(
					array(
						'theme_location' => 'primary',
						'menu_class'     => 'nav-menu',
						'menu_id'        => 'primary-menu',
					)
				);
				?>
			</nav>
		</div>

		<div id="search-container" class="search-box-wrapper hide">
			<div class="search-box">
				<?php get_search_form(); ?>
			</div>
		</div>
	</header><!-- #masthead -->

	<div id="main" class="site-main">
Jake
GLONO Team Member
Posts: 7772
Joined: Sun Sep 09, 2001 8:00 pm
Location: Michigan

Re: How to prevent Wordpress Twenty Fourteen from chopping featured images on mobile

Post by Jake »

One more thing! Gotta add the marquee tag in the footer.php!

Code: Select all

				<marquee><a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfourteen' ) ); ?>" class="imprint">
					<?php
					/* translators: %s: WordPress */
					printf( __( 'Proudly powered by %s', 'twentyfourteen' ), 'WordPress' );
					?>
					</a></marquee>
					
Post Reply