How to move post title and meta to

Hello again my favorite Themeco Team

After a long while I’m back with 2 simple (I hope) questions:

  1. How can I move post title and meta to be ON TOP of featured image? I need it to be exactly in the middle of it, so it looks like featured image acts like a gigantic background to the title and meta. Only for single post pages.

  2. How can I change “VIEW POST” on hover text overlay on featured images in blog/archive pages to “POST TITLE [nextline] READ MORE”?

SUPPLEMENTARY INFORMATION:

  • I’m using Ethos stack.
  • I don’t have server yet so I’ll be gratefull for universal solution.
  • I’m posting for the first time after two forum changes that happened over last year, so please bear with me if I posted in wrong place, as I don’t know my way around the new place yet.

Thanks in advance
Lucas

Hello Lucas,

Thanks for writing in!

1.) To moved the single post titles on top of the featured image, you will need two things:
a.) please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL Javascript

(function($){
  $('.single-post .entry-header').insertBefore( $('.single-post .entry-featured .entry-thumb') );
})(jQuery);

b.) please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL CSS

.single-post .entry-featured .entry-header {
    position: absolute;
    top: 50%;
    left: 5%;
    width: 90%;
    z-index: 100;
}

.single-post .entry-featured .entry-title,
.single-post .entry-featured .p-meta,
.single-post .entry-featured .p-meta a {
    color: #fff;
}

.single-post .entry-featured .p-meta a:hover {
    color: #888;
}

2.) What you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Change View Post to Read More
// =============================================================================
add_filter('gettext', 'translate_text' );
function translate_text($translated) { 
  $translated = str_ireplace('View Post', 'Read more', $translated);
  return $translated; 
}
// =============================================================================

Hope this helps. Please let us know how it goes.

Hello again Rue Nel

  1. Is working perfectly. But is there a way to store this JS function in actual file somewhere in child theme instead of using customizer? I’m trying to keep all the custom stuff in files that I switch at will. It’s really helpfull at testing “how things look” to just swap few files back and forth instead of rewriting parts of what is stored in customizer.

  2. I wanted to have actual post title there followed by “Read More”. Your filter just changes “View Post” to “Read More”. So in the end it should look like:
    “Read More of Title of My Post”
    or
    “Title of My Post - Read More”.

Thanks in advance
Lucas

Hi Lucas,

  1. You can add it in your child theme’s functinos.php file using the code below.
function custom_js_code() { ?>
 <script>
(function($){
  $('.single-post .entry-header').insertBefore( $('.single-post .entry-featured .entry-thumb') );
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'custom_js_code', 100 );
  1. Remove the code previously provided and add this in yout child theme’s functions.php file.
function x_ethos_featured_index() {

    $entry_id                    = get_the_ID();
    $index_featured_layout       = get_post_meta( $entry_id, '_x_ethos_index_featured_post_layout', true );
    $index_featured_size         = get_post_meta( $entry_id, '_x_ethos_index_featured_post_size', true );
    $index_featured_layout_class = ( $index_featured_layout == 'on' ) ? ' featured' : '';
    $index_featured_size_class   = ( $index_featured_layout == 'on' ) ? ' ' . strtolower( $index_featured_size ) : '';
    $is_index_featured_layout    = $index_featured_layout == 'on' && ! is_single();

    ?>

      <a href="<?php the_permalink(); ?>" class="entry-thumb<?php echo $index_featured_layout_class; echo $index_featured_size_class; ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
        <?php if ( $is_index_featured_layout ) : ?>
          <span class="featured-meta"><?php echo x_ethos_post_categories(); ?> / <?php echo get_the_date( 'F j, Y' ); ?></span>
          <h2 class="h-featured"><span><?php x_the_alternate_title(); ?></span></h2>
          <span class="featured-view"><?php _e( 'Read More of '.get_the_title(), '__x__' ); ?></span>
        <?php else : ?>
          <span class="view"><?php _e( 'Read More of '.get_the_title(), '__x__' ); ?></span>
        <?php endif; ?>
      </a>

    <?php

  }

Hope that helps.

Thank You very much Paul.
Your answer to both 1) and 2) was perfect and helped me a lot.

I have only one last issue (simple styling one - at least I hope so): how can I make the title in both my Question 1) and Question 2) to display exactly in the vertical center of the featured image? Thing is, titles are sometimes longer than just one line, and only the first line ends up being in the middle. I’d like the title to center itself vertically regardless of number of lines it takes.

It is mostly a problem when scaling page, because the smaller image is the more title falls outside the image (below it) while upper half of image is still not covered in text.

Hello There,

Thanks for updating this thread. Do you want something like this?

If that is the case, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-post .entry-featured {
    position: relative;
}

.single-post .entry-header {
    background-color: rgba(0,0,0,0.35);
    padding: 30px;
    position: absolute;
    top: 30%; 
    left: 0;
    width: 100%;
    z-index: 10;
}

Hope this helps.

It’s not that at all. This is how it looks for big-screen and small screen respectively, using Your code (mine was quite similar before, I just had top: 40%):

In both cases text isn’t centered, being a bit too high in big screen and much too low in small screen - of course it’s also off in all the sizes in-between. I want the text to be perfectly centered at all times, so I can’t use top : 30% because depending on screen text might take between 10% and 90% percent of featured image’s height, thus falling outside image itself, not to mention title takes several lines sometimes, and other times just 2 (title and subtitle).

Hi there,

It’s the reason why it’s not made that way since it may not work especially they don’t respond naturally. That styling is best implemented in sliders since it’s not that simple. Plus, with the ever-changing content, there is no permanent fix for that, you will see content with few texts, or with long texts with many lines and so on.

You should make it normal for small devices, by excluding them from the above CSS.

Example,

@media ( min-width: 980px ) {

.single-post .entry-featured {
    position: relative;
}

.single-post .entry-header {
    background-color: rgba(0,0,0,0.35);
    padding: 30px;
    position: absolute;
    top: 30%; 
    left: 0;
    width: 100%;
    z-index: 10;
}

}

The overlay text will then appear below the image for smaller devices.

Thanks.

I managed to do it after all, using fancy CSS trick:

top: 50%; // This is parent middle
transform: translateY(-50%); // And this alings self-middle

It’s centered perfectly now, and stay this way at all times, no matter how many lines title takes or how big screen/resolution is.

Do You mind telling me why You were insisting such centering is impossible to do and/or shouldn’t be done? After long search I also found some other ways to do it, including flexbox solution that seem to work just as well…

Did I misunderstood something?

Hi there,

I’m not saying it’s not possible. Plus, your solution may only work on that setup, which is why I said there is no permanent solution. The customization depends on your current setup.

Glad it’s okay now.

Thanks!