Last active
July 1, 2018 23:39
-
-
Save vbaimas/2d749888885fcc2d5954829fdd09cd12 to your computer and use it in GitHub Desktop.
Create a full width attachment image in WordPress using Custom Post Types and Advanced Custom Fields
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
add_action( 'after_setup_theme', 'setup' ); | |
function setup() { | |
add_theme_support( 'post-thumbnails' ); // This feature enables post-thumbnail support for a theme | |
add_image_size( 'single-workspace', 9999, 840, false ); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section class="workspace-header"> | |
<?php | |
$image = get_field( 'featured_image'); | |
$size = 'single-workspace'; | |
$img = wp_get_attachment_image_src( $image, $size ); | |
echo '<div class="panel"'; | |
{ | |
echo '<figure style="background-image: url(' . $img[0] . ')"></figure>'; | |
} | |
echo '' . PHP_EOL; | |
?> | |
<div class="row align-center"> | |
<span class="single-breadcrumbs workstation"> | |
<a href="<?php echo get_home_url(); ?>"> Home</a> / <a href="<?php echo get_page_link(107); ?>">Workstations</a> / <?php echo single_post_title(); ?> | |
</span> | |
</div> | |
<div class="row align-center"> | |
<div class="workspace-block"> | |
<h1 class="title"><span class="highlight"><?php the_title();?></span></h1><br> | |
<h2 class="title--sub font-primary"><span class="highlight--sub"><?php the_field('subtitle_workspace');?></span></h2> | |
</div> | |
</div> | |
</section> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.panel{ | |
width:100%; height:100vh; | |
max-height: 840px; | |
background-position:center center; | |
background-repeat:no-repeat; | |
-webkit-background-size:cover; | |
-moz-background-size:cover; | |
-o-background-size:cover; | |
background-size:cover; | |
z-index:-1; | |
display: block; | |
} | |
.workspace-block{z-index:400;margin-top:185px;} | |
.workspace-block h1 { | |
font-size:3.813rem; | |
font-weight: 700; | |
position: relative; | |
color:#212322; | |
display: inline; | |
background-color:#19ffff; | |
padding:1px 11px 1px 11px; | |
} | |
.workspace-block h2{ | |
font-size:1.688rem; | |
font-weight: 400; | |
color:#212322; | |
font-family: 'Lato', sans-serif; | |
text-transform: uppercase; | |
display: inline-block; | |
background-color:#19ffff; | |
padding:4px 8px 4px 8px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment