Styling the blog index

[Byjuud]

Hi support folks,

first off: i’d like to thank you for doing a great job giving support on x theme.

My questions concern the blog index i made on:

Nieuws - Privacy op School

it looks decent, but i’d like to do a lot more with it.

1. i’d love to put a parallax on top like i have on all pages and posts, like this:
   http://wp.edboon.net/over-ons/
   is that possible? so far i find out how to put a static image there, but that is not in line with the total layout of the site.

2. i would like to add an image with every index entry, like i can see with the top post on
   http://demo.theme.co/renew-4/blog/
   how do i do that?

3. since i make the posts with cornerstone, i am told that i can only have an excerpt by adding it manually (because wordpress gets rid of all shortcodes…). The upside of that is that i can choose what part of the post will be in the excerpt, and not automatically the first 60 words or so. That also means there is no ‘Read more’ link. Can i get around that?

I have no clue as to how much of this falls in the scope of your support…
I was looking at a plugin (https://wordpress.org/plugins/easyindex/) easindex. Would that solve my queries?
I am trying to make the process of adding new entries as easy as possible, because someone who is not tech savvy might be adding new entries.

Thanks.

[paul.r]

Hi,

1. Create a Global Block with your parallax image.

Global Block | Themeco Docs

Then add the code below in your child theme’s functions.php file

function add_blog_parallax() {   
    if(is_home()) {
        echo do_shortcode('[cs_gb id=171]');     
    }
}
add_action( 'x_after_view_global__slider-below', 'add_blog_parallax', 10 );

Change [cs_gb id=171] with your global block shortcode, you can find it here

2. You need to add Featured Image to your posts

3. When using manu excerpt, you also need to manuall add your read more link.

eg.

<a href="http:yoursite.com">Read More</a>

Change http:yoursite.com with your post link.

Hope that helps

[Byjuud]

Great stuff. That all works except for the ‘Read more…’ part. I am inserting the excerpt in Cornerstone. When clicking on the cog wheel icon on the left i can put it here:

The link does not show however.

This is minor compared to the other 2. Thanks for solving those.

[Prasant]

Hello @Byjuud,

Thanks for updating the thread.

I inspected the blog page in dev tools and can confirm that read more link is not showing up. Have you tried adding the manual excerpt and read more link by editing the page in WordPress editor and then Excerpt section? Please try it out ad see how it goes.

Here is a screencast that you can refer. https://cloudup.com/cZOva8M90l5

If you still don’t see the read more link, please share login details in a secure note for us to take a closer look.

Thanks.

[Byjuud]

Fantastic. Thank you. It all works exactly like the screencast shows. This makes us very glad.

There’s one more thing i’d like to ask. Since it concerns the same topic, i’ll pose the question here.
The blog index http://wp.edboon.net/nieuws/ is really nice already, but i would like to have the featured image of each respective post above the headline. Is that possible?

Thanks for the support so far.

[paul.r]

Hi,

Yes, it’s possible.

Please add this in Theme Options > CSS

.blog .entry-featured {
    display: block;
}

Then create file content.php in wp-content\themes\x-child\framework\views\renew
and copy the code below into that file.

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Renew.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php if(is_home()): ?>
        <?php if ( has_post_thumbnail() ) : ?>
          <div class="entry-featured">
            <?php x_featured_image(); ?>
          </div>
        <?php endif; ?>
        <?php x_get_view( 'renew', '_content', 'post-header' ); ?>        
    <?php else: ?>
        <?php x_get_view( 'renew', '_content', 'post-header' ); ?>  
        <?php if ( has_post_thumbnail() ) : ?>
          <div class="entry-featured">
            <?php x_featured_image(); ?>
          </div>
        <?php endif; ?>        
     <?php endif; ?>
    <?php x_get_view( 'global', '_content' ); ?>
  </div>
</article>

Hope that helps

[Byjuud]

That surely helped. Thank you so much. You can see the result on http://wp.edboon.net/nieuws/ of course.
Fiddled a bit with the margins in css and got exactly what i asked for.

I am learning a lot with the help of your support. Keep it up.

[paul.r]

You’re welcome!