Rip Out Header Image


Web Development

Updated Jul 27th, 2021

When the header image doesn’t serve a purpose, I don’t see it being there. Yes it can look cool, and yes you could have the page or post title overlay the image, but I think it looks boring and doesn’t serve a purpose. Here is the code i ripped out in case I need to replace.

From index.php:

<div class="large-hero">
<picture>
      <source sizes="1920" srcset="<?php echo get_theme_file_uri('images/hero--large.jpg 1920w');?>" media="(min-width: 1380px)">
      <source sizes="1380" srcset="<?php echo get_theme_file_uri('images/hero--medium.jpg 1380w');?>" media="(min-width: 1010px)">
      <source sizes="990" srcset="<?php echo get_theme_file_uri('images/hero--small.jpg 990w');?>" media="(min-width: 640px)">
      <img srcset="<?php echo get_theme_file_uri('images/hero--smaller.jpg 640w');?>" alt="Coastal view of ocean and the mountains" class="large-hero__image">
  </picture>

    <div class="large-hero__text-content">
      <h1 class="large-hero__title">Articles</h1>
    </div>
  
</div><!--Closes Large Hero Div-->

From page.php:

<div class="large-hero">
<picture>
      <source sizes="1920" srcset="<?php echo get_theme_file_uri('images/hero--large.jpg 1920w');?>" media="(min-width: 1380px)">
      <source sizes="1380" srcset="<?php echo get_theme_file_uri('images/hero--medium.jpg 1380w');?>" media="(min-width: 990px)">
      <source sizes="990" srcset="<?php echo get_theme_file_uri('images/hero--small.jpg 990w');?>" media="(min-width: 640px)">
      <img srcset="<?php echo get_theme_file_uri('images/hero--smaller.jpg 640w');?>" alt="Coastal view of ocean and the mountains" class="large-hero__image">
  </picture>

  <div class="large-hero__text-content">
      <h2 class="large-hero__title"><?php echo get_the_title(); ?></h2>
  </div>
  
</div><!--Closes Large Hero Div-->