Full Screen Blog Post Images

Hi there,

first of all, thank you very much for your great theme. My concern is the following:

When you enter my site ma-san.de, you find these full screen images which I really love. When you scroll down you will see the different blog posts.

Now, when you click on an individual blog post, I would like to see the header image to be full screen as well (just the same when you enter the website).

Is this possible?

Regards
Martin

Dear Martin,

In order to achieve that objective, could you please try to do the following?

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

;(function($) {

   'use strict'

   if( $('.header-image').length > 0 ){

    var wHeight = $(window).height();
    $('.header-image').height(wHeight);
    
   }
   
})(jQuery);   

  1. Update

Regards,
Kharis

Hi Kharis,

thank you very much for your help. Actually, the image is full screen, so that’s ok. But, it’s the wroong image. What I mean is…

if you check out the following link, as an example, …

http://www.ma-san.de/2016/11/19/timothy-ferris-die-4-stunden-woche-buchrezension-teil-i/

…you will see a laptop and a pineapple as the header image of the blog post. I would like to get exactly this image full screen, which is individual for every blog post.

To give another example, I would like it to be exactly like this…

http://www.earthcity.de/meldeadresse/

The articles brief description should be there and also a button saying “start reading” or an arrow or something like that.

Regards
Martin

Hello there,

Please replace the jQuery code I suggested with this one:


;(function($) {

   'use strict'

   if( $('.single-post .header-image').length > 0 ){

    var wHeight = $(window).height();
    var entryHeader = $('.entry-header').html();
    var arrowDown = '<a class="fa fa-angle-down" href="#primary"></a>';

    $('.header-image').height(wHeight);
    $('.header-image').append('<div class="entry-header"><div class="hentry">'+entryHeader+arrowDown+'</div></div>');
    
   }
   
})(jQuery); 

Then apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css.

.header-image .entry-header {
  position: relative;
  z-index: 9;
  text-align: center;
  height: 100%;
  display: table;
}

.header-image .entry-header .hentry {
  display: table-cell;
  vertical-align: middle;
}

.header-image .entry-header .hentry .entry-header { 
  display: block;
}

.header-image .entry-header .title-post,
.header-image .hentry .meta-post, 
.header-image .hentry .meta-post a {
  color: #fff;
}

.header-image .entry-header .title-post {
  font-size: 40px;
}

.header-image .entry-header a.fa-angle-down {
  color: #fff;
  font-size: 40px;
  position: absolute;
  bottom: 7%;
}

.single-post .hentry .entry-header,
.single-post .entry-thumb { 
  display: none;
}

To specify header image individually, you can use the Unique Headers plugin.

Regards,
Kharis