[mikechiaParticipant]

Hi there,

I’m trying to change the masonry layout on Ethos so that instead of looking like this (https://www.dropbox.com/s/n2ieu01msisx8gj/Screenshot%202015-09-09%2016.54.14.png?dl=0), I can get it looking like this: https://www.dropbox.com/s/160zzr77gbssf8r/Screenshot%202015-09-09%2016.54.32.png?dl=0

I’m not so worried about the CSS and styling, but I’m not sure how to configure the items displayed (meta, excerpt, title etc).

If you could help me adjust the title and image size to fit correctly too, that would be great,

Thanks,
Mike

[mikechiaParticipant]

I’ve managed to achieve the first part of this by adding the following code to functions.php:

if ( ! function_exists( 'x_ethos_entry_cover' ) ) :
  function x_ethos_entry_cover( $location ) {

    if ( $location == 'main-content' ) { ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
        </a>
        <p class="p-meta mbn">
          <span class="entry-cover-categories"><?php echo x_ethos_post_categories(); ?></span>
          <h2 class="h-entry-cover"><span><?php x_the_alternate_title(); ?></span></h2>
        </p>
        <?php x_get_view( 'global', '_content', 'the-excerpt' ); ?>
        <span class="entry-cover-date"><?php echo get_the_date( 'F j, Y' ); ?></span>
      </article>

    <?php } elseif ( $location == 'post-carousel' ) { ?>

      <?php GLOBAL $post_carousel_entry_id; ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span></h2>
          <div class="x-post-carousel-meta">
            <span class="entry-cover-author"><?php echo get_the_author(); ?></span>
            <span class="entry-cover-categories"><?php echo x_ethos_post_categories(); ?></span>
            <span class="entry-cover-date"><?php echo get_the_date( 'F j, Y' ); ?></span>
          </div>
        </a>
      </article>

    <?php }

  }
endif;

However, the result now looks like this: https://www.dropbox.com/s/ip1ov8b39oihr42/Screenshot%202015-09-09%2017.02.03.png?dl=0

I need to improve the CSS of the image so it fits correctly, and the title. Any ideas on this?

Thanks,
Mike

[mikechiaParticipant]

OK I’ve got a tad closer with the title. I’ve added the following CSS:

.h-entry-cover {
    position: relative;
    top: initial
    left: initial;
    right: initial;
    margin: 10px 0;
    padding: 0;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 1.5;
    text-transform: uppercase;
    color: black;
}

.h-entry-cover span {
    display: block;
    position: relative;
    z-index: 1;
    overflow: initial;
    white-space: initial;
}

The problem I have, is that this solution doesn’t link the title to the post, or the categories to their respective archive.

Any ideas?

Thanks,
Mike

[ThaiModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[mikechiaParticipant]

This reply has been marked as private.

[FriechModerator]

Hi Mike,

While that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here. Please update your code above to:

if ( ! function_exists( 'x_ethos_entry_cover' ) ) :
  function x_ethos_entry_cover( $location ) {

    if ( $location == 'main-content' ) { ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
        </a>
        <p class="p-meta mbn">
          <span class="entry-cover-categories"><?php echo x_ethos_post_categories(); ?></span>
          <h2 class="h-entry-cover"><span><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ); ?>"><?php x_the_alternate_title(); ?></a></span></h2>
        </p>
        <?php x_get_view( 'global', '_content', 'the-excerpt' ); ?>
        <span class="entry-cover-date"><?php echo get_the_date( 'F j, Y' ); ?></span>
      </article>

    <?php } elseif ( $location == 'post-carousel' ) { ?>

      <?php GLOBAL $post_carousel_entry_id; ?>

      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <a class="entry-cover" href="<?php the_permalink(); ?>" style="<?php echo x_ethos_entry_cover_background_image_style(); ?>">
          <h2 class="h-entry-cover"><span><?php ( $post_carousel_entry_id == get_the_ID() ) ? the_title() : x_the_alternate_title(); ?></span></h2>
          <div class="x-post-carousel-meta">
            <span class="entry-cover-author"><?php echo get_the_author(); ?></span>
            <span class="entry-cover-categories"><?php echo x_ethos_post_categories(); ?></span>
            <span class="entry-cover-date"><?php echo get_the_date( 'F j, Y' ); ?></span>
          </div>
        </a>
      </article>

    <?php }

  }
endif;

Hope it helps, Cheers!

[mikechiaParticipant]

Hi,

Thanks for your help!

This has worked great to get the post title linking correctly.

Any suggestions how I could get the categories linking correctly?

Many thanks,
Mike

[LelyModerator]

Hello Mike,

Your welcome!

Please check this documentation about linking the category:https://codex.wordpress.org/Function_Reference/get_category_link

Hope this helps.

[Author]

Posts