Problem aligning and sizing images in header in Pro

[quantazelle]

I’m trying to modify the KesclinMcKesclin header template but the images are not aligning like I’d like.

The photograph is not aligning to the bottom of the container and moves around when the window size changes, no matter how much I mess with the options:

Here are the container settings:

Secondly, when I replaced the logo it gets smaller as the window gets smaller. This is what it’s supposed to look like:

Here’s what it looks like when I put my own logo in and resize it:

Thanks in advance… cool tool here, just can’t figure out the settings.

[paul.r]

Hi,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

• Link to your site
• WordPress Admin username / password

All the best!

[quantazelle]

This is a localhost install on my own machine…any other way of sending you what you need?

Here are the image settings from the original template (KreskinMcKreskin):

“UNUSUALLY”: Bar 2 Container 1 > image
IMAGE = EYE==checked; w 616 h 130;
SETUP = Type==standard; width==auto; maxwidth==none;

“KESCLIN”: Bar 1 > container 1 > image
IMAGE = EYE==checked; w 209 h 23;
SETUP = Type==standard; width==auto; maxWidth==40;

[lely]

Hi There,

The issue you might having is related to FLEX LAYOUT.
The space below the image on that specific header is because of padding set on the column. Set it to zero if you want the image to touch the bottom of column. See this:
https://screencast-o-matic.com/watch/cFffiIDHEa
Then regarding it’s horizontal position, look for the following flex layout settings

Set Horizontal settings accordingly.

If this doesn’t help, we need to access your setup. Please upload your site on a staging site so we can check directly. Thank you.

[quantazelle]

OK… I see what you are saying. I’ll make a dev account so you can see what I’m working with.

[rad]

Sure, please let us know once it’s available. Thanks!

[quantazelle]

login details

[quantazelle]

So, I’m still having issues with the photo alignment. It’s moving up when the screen is resized. I tried setting the setting to zero in the screencast you shared here: https://screencast-o-matic.com/watch/cFffiIDHEa

A few more things that came up yesterday when I was finishing the site:

2. I can’t get the “News” section (gray background) to be full-width

3. Where do I change the settings so the headlines in the “News” section (latests posts) display in full? What about displaying an excerpt or description for each entry, and adding text for “read more”? And changing the default image size?

4. I added portfolio items (photos) but the shortcode isn’t working.

If you could save a screenshot of how you fixed any of these it would help me fix it on my own next time and not have to bother you again.

[paul.r]

Hi,

1. You need to select a No Container Template to achieve that.

2a) You can add this in Theme Options > CSS

.x-recent-posts .h-recent-posts, .x-recent-posts .x-recent-posts-date {
    text-overflow: initial;
    white-space: normal;
}

2b) To add excerpt, you can add this in your child theme’s functions.php

// Displaying Excerpt in Recent Posts
// =============================================================================

function x_shortcode_recent_posts_v2( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    'show_excerpt' => 'true',
    'no_sticky'    => '',
    'no_image'     => '',
    'fade'         => ''
  ), $atts, 'x_recent_posts' ) );

  $allowed_post_types = apply_filters( 'cs_recent_posts_post_types', array( 'post' => 'post' ) );
  $type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : 'post';

  $id            = ( $id           != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class        != ''     ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
  $style         = ( $style        != ''     ) ? 'style="' . $style . '"' : '';
  $count         = ( $count        != ''     ) ? $count : 3;
  $category      = ( $category     != ''     ) ? $category : '';
  $category_type = ( $type         == 'post' ) ? 'category_name' : 'portfolio-category';
  $offset        = ( $offset       != ''     ) ? $offset : 0;
  $orientation   = ( $orientation  != ''     ) ? ' ' . $orientation : ' horizontal';
  $show_excerpt  = ( $show_excerpt == 'true' );
  $no_sticky     = ( $no_sticky    == 'true' );
  $no_image      = ( $no_image     == 'true' ) ? $no_image : '';
  $fade          = ( $fade         == 'true' ) ? $fade : 'false';

  $js_params = array(
    'fade' => ( $fade == 'true' )
  );

  $data = cs_generate_data_attributes( 'recent_posts', $js_params );

  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";

    $q = new WP_Query( array(
      'orderby'             => 'date',
      'post_type'           => "{$type}",
      'posts_per_page'      => "{$count}",
      'offset'              => "{$offset}",
      "{$category_type}"    => "{$category}",
      'ignore_sticky_posts' => $no_sticky
    ) );

    if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();

      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image              = wp_get_attachment_image_src( get_post_thumbnail_id(), 'entry-cropped' );
        $bg_image           = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
        $image_output       = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
        $image_output_class = 'with-image';
      }

      $excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( 'echo=0' ) ) ) . '">'
                 . '<article id="post-' . get_the_ID() . '" class="' . implode( ' ', get_post_class() ) . '">'
                   . '<div class="entry-wrap">'
                     . $image_output
                     . '<div class="x-recent-posts-content">'
                       . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                        . $excerpt
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    endwhile; endif; wp_reset_postdata();

  $output .= '</div>';

  return $output;

}

add_filter('wp_head', 'custom_recent_posts');

function custom_recent_posts() {
  remove_shortcode( 'x_recent_posts' );
  remove_shortcode( 'recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2' );
  add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2' );
}

3. There is no portfolio shortcode, you can use the recentp post.

[recent_posts count="4" type="portfolio"]

http://demo.theme.co/integrity-1/shortcodes/recent-posts/

Hope that helps.

[quantazelle]

OK, I’ve added 2a) and 2b) to their respective locations, but the images aren’t sized correctly and there’s no excerpt showing:
http://www.quantazelle.com/news/

here is the shortcode I used on the page:

[recent_posts type=“post” enable_excerpt=“true” count=“6” orientation=“horizontal”]

A few more things after that…

1. Is there a way to add tags to each post? What about a “Read More” link after the excerpt?

2. How could I get the latest post to display first on its own line, larger? Sort of like how the recent posts documentation shows? http://demo.theme.co/ethos-1/shortcodes/recent-posts/

The login info is the same as my previous post if you need it.

Thanks, I appreciate you spending the time getting this to work for me.

[paul.r]

Hi,

It seems you have changed your login url.

1. No need to add enable_excerpt="true" and recent post count has a limit of 4

[recent_posts type="post" count="4" orientation="horizontal"]

2. On the code provided above, find this line

 . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                        . $excerpt

and change it to

 . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                        . $excerpt." Read more..."

3. You can set count to 1 to make it larger

4. I can see you are building your blog page manually which is not ideal for wordpress site.

I suggest you set your news page as posts page and wordpress will automatically populate it with your posts like in our demo

5 Reasons You Need The X Theme

Hope that helps

[quantazelle]

3. You can set count to 1 to make it larger

Ah! Great idea… I did that and then added the rest to display underneath it offset by one:

[recent_posts type="post" count="1" orientation="horizontal"]
[recent_posts type="post" count="4" orientation="horizontal" offset="1"]

However I’m still not seeing the excerpt or “Read more” link show up. Here’s the code I added in pro-child functions.php

// Displaying Excerpt in Recent Posts
// =============================================================================

function x_shortcode_recent_posts_v2( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    'show_excerpt' => 'true',
    'no_sticky'    => '',
    'no_image'     => '',
    'fade'         => ''
  ), $atts, 'x_recent_posts' ) );

  $allowed_post_types = apply_filters( 'cs_recent_posts_post_types', array( 'post' => 'post' ) );
  $type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : 'post';

  $id            = ( $id           != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class        != ''     ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
  $style         = ( $style        != ''     ) ? 'style="' . $style . '"' : '';
  $count         = ( $count        != ''     ) ? $count : 3;
  $category      = ( $category     != ''     ) ? $category : '';
  $category_type = ( $type         == 'post' ) ? 'category_name' : 'portfolio-category';
  $offset        = ( $offset       != ''     ) ? $offset : 0;
  $orientation   = ( $orientation  != ''     ) ? ' ' . $orientation : ' horizontal';
  $show_excerpt  = ( $show_excerpt == 'true' );
  $no_sticky     = ( $no_sticky    == 'true' );
  $no_image      = ( $no_image     == 'true' ) ? $no_image : '';
  $fade          = ( $fade         == 'true' ) ? $fade : 'false';

  $js_params = array(
    'fade' => ( $fade == 'true' )
  );

  $data = cs_generate_data_attributes( 'recent_posts', $js_params );

  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";

    $q = new WP_Query( array(
      'orderby'             => 'date',
      'post_type'           => "{$type}",
      'posts_per_page'      => "{$count}",
      'offset'              => "{$offset}",
      "{$category_type}"    => "{$category}",
      'ignore_sticky_posts' => $no_sticky
    ) );

    if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();

    // Display the post
      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image              = wp_get_attachment_image_src( get_post_thumbnail_id(), 'entry-cropped' );
        $bg_image           = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
        $image_output       = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
        $image_output_class = 'with-image';
      }
      $excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( 'echo=0' ) ) ) . '">'
                 . '<article id="post-' . get_the_ID() . '" class="' . implode( ' ', get_post_class() ) . '">'
                   . '<div class="entry-wrap">'
                     . $image_output
                     . '<div class="x-recent-posts-content">'
                       . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'

                       // Show excerpt
                        . $excerpt

                        // Read More link
                        ." Read more..."

                        // Display tags
                        . '<span class="x-recent-posts-date">' . the_tags() . '</span>'
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    endwhile; endif; wp_reset_postdata();

  $output .= '</div>';

  return $output;

}

add_filter('wp_head', 'custom_recent_posts');

function custom_recent_posts() {
  remove_shortcode( 'x_recent_posts' );
  remove_shortcode( 'recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2' );
  add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2' );
}

So, if I wanted to take the excerpt out again, would I have to change the code or can I do it from the shortcode?

And if I wanted everything to be centered instead of left-aligned, where do I make that change?

Thanks! I appreciate your help.

[quantazelle]

Hi, Lely,

I got this to work. The screencast was very helpful

Now how do I make the logo smaller without manually resizing the image? Say, about half the height it’s now displaying? I tried playing with the dimensions but it doesn’t work and messes with the resizing again.

Thanks.

[rad]

Hi there,

You can add max-width: 308px; to your image’s Inline CSS option. Assuming that the image I’m seeing is 616px on my view.

Thanks!

[quantazelle]

You can add max-width: 308px; to your image’s Inline CSS option. Assuming that the image I’m seeing is 616px on my view.

Yes, it’s the QUANTAZELLE one, and it’s really that big IRL. However, if I change Max-width, which is currently 40 it doesn’t do anything to the current size:

[friech]

Hi There,

On your screenshot, see the Retina & Dimension, you’ll see that the width is 277 (that is in px) which is too far away from the max-width 40vw so it would not matter.

The max-width that you can apply to that (if you really want to limit the width of the logo) is below 277 and with a px unit.

Hope this shed some lights,

As this thread is getting longer and it’s getting drift off with different topics it becomes really hard to support. We kindly ask that you create a new thread for each of your issues so the discussion does not mix up.

Thank you,