Support » Theme: Spun » Resize image in cirlce

  • Resolved steves_turn

    (@steves_turn)


    Just creating a new thread for this, even though it’s the same problem as this thread. I am wondering how do I resize the image in the bubble/circle to 360×360? With the 2.02 update there is some auto-resizing that doesn’t look good, so I was wondering if anyone knows how to make the image appear as /wp-content/uploads/2014/01/20140114-12345-360×360.jpg vs /wp-content/uploads/2014/01/20140114-12345.jpg? Hope that makes sense. Thanks!

Viewing 15 replies - 16 through 30 (of 88 total)
  • You want me to reupload the newest image again, that I just uploaded in the Test post, in Twenty Thirteen theme, then check if the image is resized?

    Moderator Andrew Nevins

    (@anevins)

    Yes. Please.

    OH weird, that messed up the image in Twenty Thirteen, it resized it to 604×270 (widthxheight).

    Moderator Andrew Nevins

    (@anevins)

    Twenty Thirteen has a rule to resize images to that size (604×270):

    /*
    	 * This theme uses a custom image size for featured images, displayed on
    	 * "standard" posts and pages.
    	 */
    	add_theme_support( 'post-thumbnails' );
    	set_post_thumbnail_size( 604, 270, true );

    So, only until you re-uploaded the image did this “set_post_thumbnail_size” function kick-in.

    Spun has the same kind of rule:

    /**
    	 * Enable support for Post Thumbnails
    	 */
    	add_theme_support( 'post-thumbnails' );
    	add_image_size( 'home-post', 360, 360, true );

    And what you did in your Child Theme functions.php file (recommended above) was do the same thing as the add_image_size function, but instead of passing “true” you passed “false”. You can explore why by looking at the $crop parameter explanation in the Codex guidelines, but that’s not important – I don’t think.

    Again, only until you re-uploaded an image in Spun did this add_image_size rule kick in.

    Okay I think that’s enough testing on Twenty Thirteen, you can switch back to Spun.

    It’s difficult to draw a conclusion as to what’s going on.

    Moderator Andrew Nevins

    (@anevins)

    In Spun version 1.07 the image size for the circles was not declared in the add_image_size function. Search for the add_image_size function here to explore: http://themes.svn.wordpress.org/spun/1.07/functions.php – You’ll see it’s used 1 time for the post image (for another page):

    add_image_size( 'single-post', 700, 467, true );

    Just above that line of code (We’re still looking at the Spun v.1.07 theme functions.php file) you will see this:

    set_post_thumbnail_size( 360, 360, true );

    That’s how the theme’s circle image sizes were originally set.

    Moderator Andrew Nevins

    (@anevins)

    An issue I’ve seen people experience when using the add_image_size function is that they have to re-upload the image(s), re-upload it to the media library.
    You might then think it’s safe to conclude that this is what’s going on: the Spun theme changed the way it resized its circle images, and the way it did meant you had to re-upload the images – HOWEVER – the Twenty Thirteen theme that you just switched to used the same function as the old Spun theme

    set_post_thumbnail_size( 604, 270, true );

    And yet you still experienced an issue with the first image (until you re-uploaded it).

    Yeah, I remember in my initial research playing with that function: set_post_thumbnail_size( 360, 360, true );. I even tried adding it back to the main functions.php file, but it didn’t work. It’s like all of the old images that were already uploaded in the previous version of Spun will not use the 360×360 thumb version of the pic, but if you reupload the same pic, it does…I am not sure why that is though.

    Moderator Andrew Nevins

    (@anevins)

    After some very brief research it seems both the set_post_thumbnail_size and add_image_size could may well do the same stuff, as in, produce the same issue: http://wordpress.stackexchange.com/questions/108572/set-post-thumbnail-size-vs-add-image-size

    So, set_post_thumbnail_size($width, $height, $crop) is a sort of shortcut for add_image_size(‘post-thumbnail’, $width, $height, $crop)

    When an image size change, for every reason, the change has effect on the images uploaded after that change, images uploaded before don’t change dimension and are not rescaled and resaved. If someone want rely on specific image sizes, after a lot of images are already uploaded (e.g . after changing theme) then the plugin Regenerate image thumbnail will be life saver.

    Backtracking, maybe it is to do with the add_image_size function in the Spun theme. Maybe when you switch from one function to the other WordPress hiccups, or maybe that’s standard behaviour of WordPress.
    E.g. When we switched between Spun, to Twenty Thirteen, WordPress switched between using the ‘add_image_size‘ function to the ‘set_post_thumbnail_size' and it was the act of switching between these functions that caused the issue(?).

    Moderator Andrew Nevins

    (@anevins)

    I know you, and some other people, have experienced this issue for a while, so for a quick solution you may want to try regenerating the thumbnails.

    BUT
    Please do back up your site before this – because we’ve not really tested enough that regenerating the thumbnails will fix the issue.
    http://codex.wordpress.org/WordPress_Backups

    Thanks again for the help – I really do want to get to the root of it, so odd. I do think that article you linked to http://wordpress.stackexchange.com/questions/108572/set-post-thumbnail-size-vs-add-image-size, has something close to an answer, but I don’t know how to make use of it (block quote below). It looks like add_image_size works when you “upload a new image”…which is why I think when I created the test image it worked as expected…I might end up just regenerating images though if I can’t figure it out:

    In addition to the functions mentioned above, there are other 2 functions that make use of image sizes: get_the_post_thumbnail and the_post_thumbnail.

    These 2 functions get (the first) and echo (the second) the image that is setted as “Featured Image” for a post.

    What is returned (or echoed) by this functions is a full img html tag (something like <img scr=”http://www.site.com/wp-content/2013/08/image-200×200.jpg” />) so, which size is used?

    Moderator Andrew Nevins

    (@anevins)

    You can ignore that bit:

    In addition to the functions mentioned above, there are other 2 functions that make use of image sizes: get_the_post_thumbnail and the_post_thumbnail.

    These 2 functions get (the first) and echo (the second) the image that is setted as “Featured Image” for a post.

    What is returned (or echoed) by this functions is a full img html tag (something like <img scr=”http://www.site.com/wp-content/2013/08/image-200×200.jpg” />) so, which size is used?

    It’s just explaining what the ‘get_the_post_thumbnail‘ and ‘the_post_thumbnail‘ functions do, which isn’t related to our issue.

    Moderator Andrew Nevins

    (@anevins)

    I’ve done some initial testing and it seems to confirm our little hypothesis

    Oh cool…Do you know why just switching to set_post_thumbnail_size( 360, 360, true ); doesn’t resolve the issue? I will just backup my site and regenerate the thumbs 🙂

    Moderator Andrew Nevins

    (@anevins)

    We said:

    it was the act of switching between these functions that caused the issue(?).

    To test whether whether this is true I switched between these functions to try to provoke the same result.

    We already knew that:
    – The Twenty Thirteen theme used the ‘set_post_thumbnail_size‘ function to resize images in the library,
    – And the Spun (v.2+) used the ‘add_image_size‘ function to resize images in the library

    Methodology

    1. Switch to the Twenty Thirteen theme
    2. Upload an image to the library
    3. Attach that image to a featured post/ insert it in the content of the post
    4. Switch to the Spun theme
    5. View the home page
    6. Inspect the element using your browser’s developer tools
    7. Look at the actual size of that image (still on the Webpage using your browser’s developer tools) that you had just uploaded from the Twenty Thirteen theme

    Results
    The image that was uploaded in the Twenty Thirteen theme does not resize in the Spun theme home page. It should have resized to 360×360 (but didn’t).

    Moderator Andrew Nevins

    (@anevins)

    Do you know why just switching to set_post_thumbnail_size( 360, 360, true ); doesn’t resolve the issue?

    That would mean more function-switching, which I think is the root cause of the issue. The act of switching between ‘add_image_size‘ and ‘set_post_thumbnail_size‘ (and vice-versa) somehow causes images to lose their defined size

Viewing 15 replies - 16 through 30 (of 88 total)
  • The topic ‘Resize image in cirlce’ is closed to new replies.