WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to Modify the Width of the WordPress [Twenty Thirteen Theme] Post Image? (17 posts)

  1. Khürt Williams
    Member
    Posted 11 months ago #

    I modified the post content width of the Twenty Thireen theme in the style sheet (style.css) to 960 on my blog.

    However, I can't seem to get the images to scale to fit the content area. All images on the site were 960px wide before switching to Twenty Thirteen.

    I've modified the themes functions file (functions.php) as follows

    /**
     * Adjusts content_width value for video post formats and attachment templates.
     *
     * @since Twenty Thirteen 1.0
     *
     * @return void
     */
    function twentythirteen_content_width() {
    	global $content_width;
    
    	if ( is_attachment() )
    		/** $content_width = 724; */
    		$content_width = 960;
    	elseif ( has_post_format( 'audio' ) )
    		$content_width = 484;
    }
    /**
     * Prints the attached image with a link to the next attached image.
     *
     * @since Twenty Thirteen 1.0
     *
     * @return void
     */
    function twentythirteen_the_attached_image() {
    	$post                = get_post();
    	/** $attachment_size     = apply_filters( 'twentythirteen_attachment_size', array( 724, 724 ) ); **/
    	$attachment_size     = apply_filters( 'twentythirteen_attachment_size', array( 960, 960) );
    	$next_attachment_url = wp_get_attachment_url();

    This doesn't seem to work. What am I doing wrong?

  2. esmi
    Forum Moderator
    Posted 11 months ago #

    Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

  3. Brandon
    Member
    Posted 11 months ago #

    I do not know much about any of this but here is what worked for me.

    I dropped the below code into the style.css of my child theme:

    /*Increase width - original max-width 604 px*/
    .entry-header,
    .entry-content,
    .entry-summary,
    .entry-meta {
    	margin: 0 auto;
    	max-width: 804px;
    	width: 100%;
    }

    Jetpack tiled gallery did not want to play nice so I dropped the below code into my functions.php of my child theme to force tiled galleries to scale up:

    /*set jet pack tiled gallery width*/
    if ( ! isset( $content_width ) )
        $content_width = 804;
  4. Khürt Williams
    Member
    Posted 11 months ago #

    @esmi Thank you. Good advice but it doesn't answer my question.

    @glassanemone I've done the following but the images aren't displayed in the correct size.

    .attachment .entry-meta {
    	clear: none;
    	color: inherit;
    	float: right;
    	max-width: 960px;
    	padding: 9px 0 0;
    	text-align: right;
    }
    
    .attachment .entry-attachment,
    .attachment p.attachment {
    	margin: 0 auto;
    	/** max-width: 724px;
    	max-width: 960px;
    	text-align: center;
    }
    
    .attachment .entry-description {
    	margin: 20px auto 0;
    	max-width: 960px;
    }
    
    .paging-navigation .nav-links {
    	margin: 0 auto;
    	max-width: 960px;
    	width: 100%;
    }
    
    .page-content {
    	margin: 0 auto;
    	max-width: 960px;
    	padding: 40px 0;
    	width: 100%;
    }
    
    .attachment .image-navigation {
    		/** max-width: 724px;
    		max-width: 960px;
    	}
  5. Brandon
    Member
    Posted 11 months ago #

    I’m sorry, like I said I really don’t know much about css/coding, so I can’t help you any further than what I’ve already posted. What I did seems to work for me but I have not extensively tested it.

    If you go to my site: http://brandonmarkwalder.com you can see that the width of the posts has been increased from 604px to 804px. The images in the two most recent posts are thumbnails set to 600x399 (so hard to tell if they scale correctly). But if you look at the page containing the full size images here: http://brandonmarkwalder.com/the-smaller-side-of-snacks-a-photo-series/ you can see the images scale to fill the full width of the page.

    I believe what I have done increases the post/page width and content/media width…but I could be wrong.

  6. creativenicci
    Member
    Posted 11 months ago #

    Hi Khurt,

    If I read your post correctly, just add this to your css file and you should be golden.

    img.size-full, img.size-large, img.wp-post-image {
    width: 100%;
    }

  7. Khürt Williams
    Member
    Posted 11 months ago #

    @glassanemone thanks for trying to help. I thought I understood what the CSS in the theme was doing but apparently not.

    I had no problems changing the width of the theme. The Photographing families post and the On vacation with the Fuji X-E1 post both have the width -- 960px -- that I am seeking.

    However, the images don't display at their correct width of 960px. My media settings are correct, the images are all sized to 960px before uploading etc.

    Here's what I have in my child-css for images.

    @media (max-width: 1599px) {
    	.site {
    		border: 0;
    	}
    
    	.attachment .image-navigation {
    		max-width: 960px;
    	}
    }

    But it doesn't work. This is so frustrating.

  8. Khürt Williams
    Member
    Posted 11 months ago #

    @creativenicci That code is already in the original Twenty Thirteen style sheet.

    img.size-full,
    img.size-large,
    img.wp-post-image {
    	height: auto;
    	max-width: 100%;
    }
  9. creativenicci
    Member
    Posted 11 months ago #

    The property already in the stylesheet is "max-width", you also need to add a property of "width" and set it to 100%.

    They seem similar but perform different functions.

  10. Khürt Williams
    Member
    Posted 11 months ago #

    Yay! Got it working. Turns out with a caching issue with my CDN. The cache wasn't updating correctly.

    Thanks for all your help.

  11. marvmckay66
    Member
    Posted 11 months ago #

    I created a child theme for my twenty thirteen install, and set a width of 1000px. When I looked at it yesterday on my iPad, it looked good and had the proper responsive behavior.

    However, today I changed the header image, using the measurements provided, and all of a sudden the width of my content on the iPad is about 750px, and is no longer responsive.

    I put back the original header image and overwrote the style.css with the original version, and it still doesn't revert back to being responsive. Not sure how I managed to kill off the responsive functionality - any ideas?

  12. Luacs381
    Member
    Posted 9 months ago #

    Hi @khurtwilliams - I'm very new to this, but what you appear to have done is exactly what I'm trying to do (changing the default width of the twenty thirteen theme). Chance you'd be able to outline exactly what worked in the above suggestions? (Possibly even including specifically which bits of code you ultimately inserted into which files?)

  13. esmi
    Forum Moderator
    Posted 9 months ago #

    As per the Forum Welcome, please post your own topic.

  14. andrey p
    Member
    Posted 9 months ago #

    Hey Luacs I know so many advices and no clear answers. Let's see to CHANGE HEADER size in this theme you follow 2 steps

    #1 Apperance - Editor - custom header.php
    One's you open Custom-header.php pretty much right of way you'll see this

    // Set height and width, with a maximum value for the width.
    'height' => 620,
    'width' => 1600,

    (as you can see I set mine to 620 pixels (all you have to do is change numbers from 230 to what ever you need.

    Now you are not done yet.

    #2 click on style.css and find this
    .site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    max-width: 1080px;
    min-height: 620px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
    }

    all I did is changed "min-height from 230 to 620px;

    First step is necessary to "set up guides" in header upload uthility and second edit (styles.css) is necessary to adjust header.

    Let me know if that helped.

  15. WPyogi
    Volunteer Moderator
    Posted 9 months ago #

    @andrey p - what happens to these changes when WP is updated?

    The default theme should NOT be modified - except in a child theme - http://codex.wordpress.org/Child_Themes

  16. Khürt Williams
    Member
    Posted 7 months ago #

    Never got it to work. I simply moved onto a theme that whose CSS was easier to change.

  17. ViscoDesign
    Member
    Posted 5 months ago #

    This may have helped you – it's from the Twenty thirteen functions.php file …

    /*
     * Set up the content width value based on the theme's design.
     *
     * @see twentythirteen_content_width() for template-specific adjustments.
     */
    if ( ! isset( $content_width ) )
    	$content_width = 604;

    Thanks to Binary Moon for the heads-up! Ben suggests it only effects images uploaded through the Uploader and embed shortcodes, but it's probably good practice to set it correctly for child theme templates anyway.
    Also, it's pluggable (as per the Codex suggestions when developing themes), so that means you can simply insert the same code in your own child theme functions.php, change the value, and it will override the default value.

Reply

You must log in to post.

About this Topic