• Resolved simmyvos

    (@simmyvos)


    Hi Ben

    Thanks for the great theme!

    I am having some trouble with my featured images, which I’ve been trying to fix for the last two evenings but with no luck.

    When I add a featured image to my post it is not showing on my home page, to make sure that the image does not duplicate on my post i have used the following custom css:

    .entry .featured-image {
    display: none;
    }

    However the image is not showing on my homepage.

    Is there a way to fix this?

    Thank you!

    Simone
    http://www.simplysimone.me

Viewing 15 replies - 1 through 15 (of 23 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hey Simone,

    It looks like the Featured Image isn’t being included in the HTML. In your child theme, have you made any edits to the “content.php” or “content-archive.php” files that may have affected the Featured Image?

    If not, it could be the result of a conflict with a plugin. You can bulk deactivate them all to quickly check if this is the source of the error.

    Thread Starter simmyvos

    (@simmyvos)

    Hi Ben

    Thanks for the response. I tried deactivating all plugins but the problem persists. I have I don’t recall making changes to my content-archive file, but it looks as though I have made changes to the content.php file.

    This is what my content.php file for my child theme is showing at the moment:

    <?php

    $date_display = get_theme_mod( ‘ct_ignite_post_meta_date_settings’ );
    $author_display = get_theme_mod( ‘ct_ignite_post_meta_author_settings’ );

    if( is_single() ) { ?>
    <div <?php post_class(); ?>>
    <div class=’entry-header’>
    <h1 class=’entry-title’><?php the_title(); ?></h1>
    </div>
    <?php
    // as long as one isn’t equal to ‘hide’, display entry-meta-top
    if( $date_display != ‘hide’ || $author_display != ‘hide’ ) : ?>
    <div class=”entry-meta-top”>
    <?php
    // Don’t display if hidden by Post Meta section
    if( $date_display != ‘hide’ ) {
    echo __( ‘Published’, ‘ignite’ ) . ” ” . date_i18n( get_option( ‘date_format’ ), strtotime( get_the_date(‘r’) ) );
    }
    // output author name/link if not set to “Hide” in Post Meta section
    if( $author_display != ‘hide’ ) {

    // if the date is hidden, capitalize “By”
    if( $date_display == ‘hide’ ) {
    echo ” ” . ucfirst( _x( ‘by’, ‘Published by whom?’, ‘ignite’ ) ) . ” “;
    the_author_posts_link();
    } else {
    echo ” ” . _x( ‘by’, ‘Published by whom?’, ‘ignite’ ) . ” “;
    the_author_posts_link();
    }
    }
    ?>
    </div>
    <?php endif; ?>
    <?php ct_ignite_featured_image(); ?>
    <div class=”entry-content”>
    <article>
    <?php the_content(); ?>
    <?php wp_link_pages(array(‘before’ => ‘<p class=”singular-pagination”>’ . __(‘Pages:’,’ignite’), ‘after’ => ‘</p>’, ) ); ?>
    </article>
    </div>
    <div class=’entry-meta-bottom’>
    <?php
    if( get_theme_mod(‘ct_ignite_post_meta_further_reading_settings’) != ‘hide’ ) {
    get_template_part(‘content/further-reading’);
    }
    ?>
    <?php
    if(get_theme_mod(‘ct_ignite_author_meta_settings’) != ‘hide’){ ?>
    <div class=”author-meta”>
    <?php ct_ignite_profile_image_output(); ?>
    <div class=”name-container”>
    <h4>
    <?php
    if(get_the_author_meta(‘user_url’)){
    echo “” . get_the_author() . ““;
    } else {
    the_author();
    }
    ?>
    </h4>
    </div>
    <p><?php echo get_the_author_meta(‘description’); ?></p>
    </div>
    <?php } ?>
    <?php
    if(get_theme_mod(‘ct_ignite_post_meta_categories_settings’) != ‘hide’){ ?>
    <div class=”entry-categories”><?php get_template_part(‘content/category-links’); ?></div><?php
    }
    if(get_theme_mod(‘ct_ignite_post_meta_tags_settings’) != ‘hide’){ ?>
    <div class=”entry-tags”><?php get_template_part(‘content/tag-links’); ?></div><?php
    }
    ?>
    </div>
    </div>
    <?php
    } else { ?>
    <div <?php post_class(); ?>>
    <div class=’excerpt-header’>
    <h1 class=’excerpt-title’>
    “><?php the_title(); ?>
    </h1>
    </div>
    <?php
    // as long as one isn’t equal to ‘hide’, display entry-meta-top
    if( $date_display != ‘hide’ || $author_display != ‘hide’ ) : ?>
    <div class=”entry-meta-top”>
    <?php
    // Don’t display if hidden by Post Meta section
    if( $date_display != ‘hide’ ) {
    echo __( ‘Published’, ‘ignite’ ) . ” ” . date_i18n( get_option( ‘date_format’ ), strtotime( get_the_date(‘r’) ) );
    }
    // output author name/link if not set to “Hide” in Post Meta section
    if( $author_display != ‘hide’ ) {

    // if the date is hidden, capitalize “By”
    if( $date_display == ‘hide’ ) {
    echo ” ” . ucfirst( _x( ‘by’, ‘Published by whom?’, ‘ignite’ ) ) . ” “;
    the_author_posts_link();
    } else {
    echo ” ” . _x( ‘by’, ‘Published by whom?’, ‘ignite’ ) . ” “;
    the_author_posts_link();
    }
    }
    ?>
    </div>
    <?php ct_ignite_featured_image(); ?>
    <?php endif; ?>
    <div class=’excerpt-content’>
    <article>
    <?php ct_ignite_excerpt(); ?>
    </article>
    </div>
    <?php
    if(get_theme_mod(‘ct_ignite_post_meta_categories_settings’) != ‘hide’){ ?>
    <div class=”entry-categories”><?php get_template_part(‘content/category-links’); ?></div><?php
    }
    if(get_theme_mod(‘ct_ignite_post_meta_tags_settings’) != ‘hide’){ ?>
    <div class=”entry-tags”><?php get_template_part(‘content/tag-links’); ?></div><?php
    }
    if(get_theme_mod(‘ct_ignite_post_meta_comments_settings’) == ‘show’){ ?>
    <div class=”excerpt-comments”><?php get_template_part(‘content/comment-count’); ?></div><?php
    }
    ?>
    </div>
    <?php
    }

    I am pretty clueless when it comes to coding, so I’m not sure what all of that means? I think I got it online somewhere when I was setting up my child theme.

    Theme Author Ben Sibley

    (@bensibley)

    Okay thank you for sharing that. There’s a few things we can try without writing/editing any code.

    First, try switching back from your child theme to the default Ignite theme. If the Featured Images return we can be sure this is related to the child theme. You can switch right back after checking out the site.

    If the Featured Images do return when Ignite is active, we’ll want to update the child theme. You can download a fresh copy of Ignite here and get a default content-archive.php file from it. Then you can upload the new content-archive.php file via FTP to the following location to replace it:

    wordpress/wp-content/themes/ignite-child/

    Restoring the content-archive.php file to the default version should fix the display issue with the Featured Images.

    Thread Starter simmyvos

    (@simmyvos)

    Hi Ben

    Thanks for the response, I have switched to the parent theme and the featured image displayed on the post and the home page so I have downloaded the ignite file from the link you provided but there was no content-archive file in the folder.

    The only “content” files in the new ignite folder are the following:
    content
    content-404
    content-attachment
    content-page
    content-search

    Can I use one of these?

    Theme Author Ben Sibley

    (@bensibley)

    Oh I’m sorry about that. Instead then try removing the content-archive.php file from the Ignite child theme. If you have any of the other “content” files in the child theme, replace them with a default copy from the Ignite you downloaded.

    Removing the “content-archive.php” file will make the child theme revert to the files in Ignite which should then fix the Featured Image display issue.

    Thread Starter simmyvos

    (@simmyvos)

    Hi Ben

    I couldn’t find the content-archive file, there was only the content file in the child theme folder.

    So I deleted and replaced it with the content file from the new ignite theme which I downloaded, but still no luck.

    Is there anywhere else I could find the file to be replaced in my WebspaceExplorer?

    Theme Author Ben Sibley

    (@bensibley)

    Okay thanks for trying that. Could you download and share a copy of the child theme here?

    If I can get a copy of it, I’ll test it out and try a whole bunch of solutions and then share an updated copy here for you.

    You should be able download the “ignite-child” folder/directory with your FTP client. For sharing it here, any file sharing service like Google Drive or Dropbox will work great.

    Thread Starter simmyvos

    (@simmyvos)

    Ben, you are so helpful, thank you!
    Here is the link to my child theme in dropbox
    https://www.dropbox.com/s/lbpjpron5lxubpc/Ignite-Child.zip?dl=0

    Theme Author Ben Sibley

    (@bensibley)

    Sure thing, thanks for the link!

    I found the source of the issue, and was able to fix it. You can download an updated copy of the child theme here.

    What’s happening is that in the child theme, the contents of Ignite’s style.css are pasted in there which is causing styling conflicts with newer versions of Ignite. Normally, you don’t want to do this since this line at the beginning of the child theme’s style.css file imports the styles for you:

    @import url("../ignite/style.min.css");

    I was going to remove the identical CSS in the child theme’s style.css file, but certain parts have been modified to customize the site. I know this will be a time-consuming project, but I would recommend taking out all of the CSS in the child theme’s style.css file that is identical to the CSS in Ignite’s CSS file since it will be loaded already. This will prevent errors with styles overriding each other, and make customizing the site easier in the future.

    Thread Starter simmyvos

    (@simmyvos)

    Ben, you are a lifesaver!!! Seriously the best!!
    I will tackle this mini project tonight and let you know if I manage to fix it!
    Thank you!

    Theme Author Ben Sibley

    (@bensibley)

    No problem 🙂

    It took a few tries, but I’m glad this solution has finally worked. If anything else comes up just let me know and I’ll be happy to help out.

    Thread Starter simmyvos

    (@simmyvos)

    Hi Ben

    I had a go at this using the style.css file from the new child theme but the featured image still isn’t reflecting.

    I noticed that the line at the beginning of the child theme’s style.css file that imports the styles says style.min.css:

    @import url(“../ignite/style.min.css”);

    Should I be comparing this style.min.css to the child themes css rather than just the style.css theme?

    Theme Author Ben Sibley

    (@bensibley)

    Do the posts still have Featured Images assigned to them?

    There must be something else affecting them since they’re not being output in the HTML now. Previously, they were being output and there was a space where the weren’t showing. This was a CSS styling conflict and the child theme fixed this, but now the Featured Images aren’t being added to the page.

    Do they still show in the Featured Image box in the post editor? Is there a plugin that you think might be preventing their output?

    Thread Starter simmyvos

    (@simmyvos)

    Hi Ben

    I had disabled the featured images so that the site doesn’t look strange while I’m trying to sort this error, but i re-enable them when I check if the changes have worked or not.

    Theme Author Ben Sibley

    (@bensibley)

    Okay I see. I’m not sure why the child theme didn’t work then, but lets take a different approach.

    Please try adding the following CSS to the Custom CSS section in the Customizer:

    .featured-image {
      position: relative;
      height: 0;
      padding-bottom: 56.5%;
      left: -9.5%;
      width: 119%;
      margin: -1.5em 0 1.5em 0;
      overflow: hidden;
    }
    .featured-image > a {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      font-size: 0;
    }
    .featured-image > img,
    .featured-image > a > img {
      position: absolute;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
    .featured-image > img.no-object-fit,
    .featured-image > a > img.no-object-fit {
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      max-height: 100%;
      height: auto;
      width: auto;
      top: 50%;
      right: 50%;
      left: auto;
      -webkit-transform: translateX(50%) translateY(-50%);
      -ms-transform: translateX(50%) translateY(-50%);
      transform: translateX(50%) translateY(-50%);
    }
Viewing 15 replies - 1 through 15 (of 23 total)
  • The topic ‘Featured image issues’ is closed to new replies.