Images not showing at size-medium with twenty fourteen

  • kirai · Member ·

    I’ve installed the default twenty fourteen and just added this css code at the end of style.css to make my blogposts wider (No other changes where made to the css)

    .site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	margin: 0 auto;
    /* max-width: 474px; */
	max-width: 70%;
}

/* Don't pull featured images off into a left margin that's no longer there. */
.full-width .site-content blockquote.alignleft,
.full-width .site-content img.size-full.alignleft,
.full-width .site-content img.size-large.alignleft,
.full-width .site-content img.size-medium.alignleft,
.full-width .site-content .wp-caption.alignleft {
    /* margin-left: -168px; */
    margin-left: 0px;
}

    Everthing looks wider and nicer but the images are still showing at 474px size no matter if I have the browser in a 1600px wide screen or not.

    Example http://www.kirainet.com/no-explicando-el-ryoanji-龍安寺/

    The code in my blogpost for the images is:

    <a href="http://www.kirainet.com/wp-content/uploads/2017/07/ryoanji8.jpg"><img src="http://www.kirainet.com/wp-content/uploads/2017/07/ryoanji8-730x487.jpg" alt="" width="730" height="487" class="aligncenter size-medium wp-image-15573" /></a>

    But the generated html when the page is rendered becomes this giving preference to the 474px:

    <img src="https://i2.wp.com/www.kirainet.com/wp-content/uploads/2017/07/ryoanji8.jpg?resize=474%2C316" alt="" class="aligncenter size-medium wp-image-15573" srcset="https://i2.wp.com/www.kirainet.com/wp-content/uploads/2017/07/ryoanji8.jpg?resize=730%2C487 730w, https://i2.wp.com/www.kirainet.com/wp-content/uploads/2017/07/ryoanji8.jpg?resize=768%2C513 768w, https://i2.wp.com/www.kirainet.com/wp-content/uploads/2017/07/ryoanji8.jpg?resize=1024%2C684 1024w, https://i2.wp.com/www.kirainet.com/wp-content/uploads/2017/07/ryoanji8.jpg?w=1600 1600w, https://i2.wp.com/www.kirainet.com/wp-content/uploads/2017/07/ryoanji8.jpg?w=948 948w, https://i2.wp.com/www.kirainet.com/wp-content/uploads/2017/07/ryoanji8.jpg?w=1422 1422w" sizes="(max-width: 474px) 100vw, 474px" width="474" height="316">

    How can I make worpdress generate the size-medium image that I want?

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Hi @kirai, it looks like you are using WordPress but you are not hosted here at WordPress.com. For self-hosted WordPress sites such as yours, I would suggest asking for help from the theme and/or plugin author directly or ask in the volunteer-based WordPress.org forums.

    The differences between WordPress.com and WordPress.org.

    I did take a quick look at your site, and if you add CSS to the original stylesheet, it will be overwritten on theme updates. It is best to add your CSS to override the original at Customize > Additional CSS. That way it will not get overwritten on updates.

    Below the CSS entry area at Additional CSS, you will find a Media Width field. You need to put in the width in pixels to match your content area widtth, or in this case, 730px to match the width you wish your images to be.

  • thesacredpath · Member ·

    There is a dedicated Twenty Fourteen support forum at WordPress.org where you can post your questions.

  • The topic ‘Images not showing at size-medium with twenty fourteen’ is closed to new replies.