1 <?php

     2 /**

     3  * Displays content for front page

     4  *

     5  * @package WordPress

     6  * @subpackage Twenty_Seventeen

     7  * @since 1.0

     8  * @version 1.0

     9  */

    10 

    11 ?>

    12 <article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >

    13 

    14 	<?php if ( has_post_thumbnail() ) :

    15 		$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );

    16 

    17 		// Calculate aspect ratio: h / w * 100%.

    18 		$ratio = $thumbnail[2] / $thumbnail[1] * 100;

    19 		?>

    20 

    21 		<div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">

    22 			<div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>

    23 		</div><!-- .panel-image -->

    24 

    25 	<?php endif; ?>

    26 

    27 	<div class="panel-content">

    28 		<div class="wrap">

    29 			<header class="entry-header">

    30 				<?php the_title( '<h2 class="entry-title">', '</h2>' ); ?>

    31 

    32 				<?php twentyseventeen_edit_link( get_the_ID() ); ?>

    33 

    34 			</header><!-- .entry-header -->

    35 

    36 			<div class="entry-content">

    37 				<?php

    38 					/* translators: %s: Name of current post */

    39 					the_content( sprintf(

    40 						__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentyseventeen' ),

    41 						get_the_title()

    42 					) );

    43 				?>

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

    45 

    46 		</div><!-- .wrap -->

    47 	</div><!-- .panel-content -->

    48 

    49 </article><!-- #post-## -->