0

I have many containers over the said image itself such as col-md-10 which defines a max-width of 80% or so, this is how I generate my post:

<article id="single-post-<?php the_ID(); ?>" <?php post_class('single-post'); ?>>
    <?php
    $post_share = new Post_Share( array( 'facebook', 'twitter', 'gplus', 'pinterest' ), $post, $style = 'share-style-2' );
    echo $post_share->generate_share_links();
    ?>
    <header class="single-post-header">
        <div class="single-post-meta">
            <?php echo _s_show_post_info( array( 'author','time', 'category') ); ?>
        </div><!-- .post-meta -->

        <?php
        the_title( '<h1 class="single-post-title">','</h1>' );
        if ( has_category() ) : ?>
            <?php

            $categories = (array) wp_get_post_terms( get_the_ID(), 'category' );

            if ( !is_wp_error( $categories ) && !empty( $categories) ) { ?>
                <div class="single-post-secondary-meta">
                    <span class="single-post-category-span">posted in
                        <a class="single-post-category" href="<?php echo get_term_link( $categories[0] )?>"><?php echo $categories[0] -> name ?>
                        </a>
                    </span>
                </div><!-- .post-meta-2 -->
            <?php } ?>
        <?php endif; ?>
    </header><!-- .post-header -->  

    <?php if ( has_post_thumbnail() ) : ?>
        <div class="single-post-thumbnail">
            <a class="single-post-thumbnail-link" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                <?php the_post_thumbnail(); ?>
            </a>
        </div><!-- .post-thimbnail -->
    <?php 
    endif; ?>

    <div class="single-post-content">
        <?php
            //echo wp_trim_words( get_the_content(), 40, '...' );
            the_content();
        ?>
    </div><!-- .post-content -->
</article><!-- #post-<?php the_ID(); ?> -->
<?php 
get_template_part('template-parts/individual_post-related-posts');
?>

Specifically:

the_content();

Unfortunately, inserting an image results in this:

enter image description here

Setting .post-content { width: 100%; } fixes it, but given there are a lot of plugins out there and rules that can be over-written, this feels like a hack.

What am I missing, why is this happening?

0

The width property of the parent DIV element does not apply to it's children. An image within the .col-md-10 can overflow it's parent, and will be visible if the parent doesn't have the overflow:hidden property.

To fix this, you can set try and make the images responsive. Here's how to:

.single-post img {
    max-width: 100%;
    height: auto;
    display:block;
}

This will make sure your images don't go wider than their parent element.

Bootstrap also provides its own class for responsive images. The class name is .img-responsive, and you can pass it to your functions as an argument while outputting post thumbnails, for example:

the_post_thumbnail( 'thumbnail', [ 'class' => 'img-responsive' ] );
|improve this answer|||||
  • Jack, thanks for the input, but the the_post_thumbnail() refers to the post's main thumbnail / featured image, I was speaking of an image within the content! :) – Jonathan Guerin Jan 5 '18 at 21:05
0

Add this function to remove width and height attribute from wordpress wysiwyg when insert image to the editior.

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
  $html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
  return $html;
}
|improve this answer|||||
0

There is some CSS associated with the code outputted via the the wordpress WYSIWYG. I always include this code in my WordPress styles and allows this to be fixed and also means image alignment/captions etc work.

You can find the code and read more about it here: https://codex.wordpress.org/CSS#WordPress_Generated_Classes)

Here's the code for the skim readers out there

    /* =WordPress Core
    -------------------------------------------------------------- */
    .alignnone {
        margin: 5px 20px 20px 0;
    }

    .aligncenter,
    div.aligncenter {
        display: block;
        margin: 5px auto 5px auto;
    }

    .alignright {
        float:right;
        margin: 5px 0 20px 20px;
    }

    .alignleft {
        float: left;
        margin: 5px 20px 20px 0;
    }

    a img.alignright {
        float: right;
        margin: 5px 0 20px 20px;
    }

    a img.alignnone {
        margin: 5px 20px 20px 0;
    }

    a img.alignleft {
        float: left;
        margin: 5px 20px 20px 0;
    }

    a img.aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .wp-caption {
        background: #fff;
        border: 1px solid #f0f0f0;
        max-width: 96%; /* Image does not overflow the content area */
        padding: 5px 3px 10px;
        text-align: center;
    }

    .wp-caption.alignnone {
        margin: 5px 20px 20px 0;
    }

    .wp-caption.alignleft {
        margin: 5px 20px 20px 0;
    }

    .wp-caption.alignright {
        margin: 5px 0 20px 20px;
    }

    .wp-caption img {
        border: 0 none;
        height: auto;
        margin: 0;
        max-width: 98.5%;
        padding: 0;
        width: auto;
    }

    .wp-caption p.wp-caption-text {
        font-size: 11px;
        line-height: 17px;
        margin: 0;
        padding: 0 4px 5px;
    }

    /* Text meant only for screen readers. */
    .screen-reader-text {
        border: 0;
        clip: rect(1px, 1px, 1px, 1px);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute !important;
        width: 1px;
        word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
    }

    .screen-reader-text:focus {
        background-color: #eee;
        clip: auto !important;
        clip-path: none;
        color: #444;
        display: block;
        font-size: 1em;
        height: auto;
        left: 5px;
        line-height: normal;
        padding: 15px 23px 14px;
        text-decoration: none;
        top: 5px;
        width: auto;
        z-index: 100000;
        /* Above WP toolbar. */
    }
|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.