Page 1 of 1

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

Posted: Thu Jul 27, 2017 1:25 pm
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

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

Posted: Thu Apr 23, 2020 4:02 pm
by Jake
Thank GOODNESS I posted this. It would've taken forever to figure it out again!

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

Posted: Tue Feb 09, 2021 10:57 am
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' );
    }
}

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

Posted: Wed Jan 05, 2022 2:41 pm
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 );

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

Posted: Wed Jan 05, 2022 2:42 pm
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();

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

Posted: Tue Mar 08, 2022 9:30 am
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">

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

Posted: Tue Mar 08, 2022 9:33 am
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>
					

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

Posted: Tue Nov 29, 2022 2:15 pm
by Jake
A new thing I just added to the theme's functions.php file to format posts to Mastodon the way I like them

Code: Select all

add_filter( 'share_on_mastodon_status', function( $status, $post ) {

	$toot_size = (int) 500;

	//$message_template = "[title]\n\n[excerpt]...\n\nRead more: [permalink]\n\n[tags]";
	$message_template = "[excerpt]...\n\nRead more: [permalink]\n\n[tags]";

	//Replace title
	//$post_title = html_entity_decode(get_the_title($post), ENT_COMPAT, 'UTF-8');
	//$message_template = str_replace("[title]", $post_title, $message_template);

	//Replace permalink
	$post_permalink = get_permalink( $post );
	$message_template = str_replace("[permalink]", $post_permalink, $message_template);

	//Replace tags
	$post_tags_content = '';

	$post_tags = get_the_tags($id);
	if ($post_tags) {
		foreach ($post_tags as $tag) {
			$post_tags_content = $post_tags_content . '#' . preg_replace('/\s+/', '', html_entity_decode($tag->name, ENT_COMPAT, 'UTF-8')) . ' ';
		}
		$post_tags_content = trim($post_tags_content) . '#music';
	}
	$message_template = str_replace("[tags]", $post_tags_content, $message_template);

	//Replace excerpt
	//Replace with the excerpt of the post
	$post_optional_excerpt = $post->post_excerpt;
	if (strlen($post_optional_excerpt) > 0) {
		$post_content_long = $post_optional_excerpt;
	} else {
		$post_content_long = $post->post_content;
	}

	$post_content_long = strip_shortcodes($post_content_long);
	$post_content_long = html_entity_decode($post_content_long, ENT_COMPAT, 'UTF-8');
	$post_content_long = wp_strip_all_tags($post_content_long);

	$excerpt_len = $toot_size - strlen($message_template) + 27 - 5; // + 9 - 5;

	mb_internal_encoding("UTF-8");

	$post_excerpt = mb_substr($post_content_long, 0, $excerpt_len);

	$message_template = str_replace("[excerpt]", $post_excerpt, $message_template);

	
    $status = trim( $message_template );
    return $status;
}, 10, 2 );

//add_filter( 'share_on_mastodon_toot_args', function( $args ) {
//  $args['spoiler_text'] = 'New on Glorious Noise...';
//  return $args;
//} );

add_filter( 'share_on_mastodon_toot_args', function( $args, $post = null ) {
  $args['spoiler_text'] = 'New on Glorious Noise...';

  if ( $post ) {
    $args['spoiler_text'] = html_entity_decode(get_the_title( $post ));
  }

  return $args;
}, 10, 2 );


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

Posted: Fri May 12, 2023 12:40 pm
by Jake
Additional CSS to prevent big ass space under youtube videos:

Code: Select all

p:has(iframe) {
  margin-bottom: 0px;
}

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

Posted: Fri Jun 16, 2023 10:47 am
by Jake
Also, to make images and videos and stuff fill the whole content area, tweak theme's fuctions.php and change the $content_width variable from 474 to 700.

Code: Select all

/**
 * Set up the content width value based on the theme's design.
 *
 * @see twentyfourteen_content_width()
 *
 * @since Twenty Fourteen 1.0
 */
if ( ! isset( $content_width ) ) {
	//$content_width = 474;
	$content_width = 700;
}