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 - 31 through 45 (of 88 total)
  • Moderator Andrew Nevins

    (@anevins)

    By the way this means I have finally experienced your issue through that methodology I just posted – hooray

    Moderator Andrew Nevins

    (@anevins)

    I’ll come back to this thread, at least I can replicate the problem and continue to explore a possible lead.

    Haha, congrats, I think… If you look at the Spun demo site, it demonstrates the same issue even, it’s very apparent in the 2nd row, 2nd column pic 🙂

    To your previous comment: Which is weird because the image size is there in the uploads folder…that’s what I don’t quite understand – the old 360×360 images are in the uploads folder, it seems to be like an issue accessing or using those previously uploaded images. With the test file that worked the image was uploaded 20140204-142702-360×360.jpg…when we switched over to Twenty Thirteen in place of the 360×360 image was the 6-4×270 image (because that is what set_post_thumbnail_size told it to upload. I feel like somehow the mechanism to request the 360×360 image from the uploads folder is the problem…and it may very well be within the add_image_size function or WordPress or how Spun uses the new function (add_image_size)

    Moderator Andrew Nevins

    (@anevins)

    it seems to be like an issue accessing or using those previously uploaded images

    Can you explore this by checking your website’s error logs? Recreate the issue so that you have an accurate log of the time at which it happened

    Well, I don’t have any errors in my logs…what I meant by “issue accessing” is that somehow the new version of Spun I believe is not setting the featured image to the 360×360 version….it wouldn’t throw an error because I am guessing it was coded that way, but getting to the root of that is baffling me…how to set the featured image to look at the 360×360 size image…and I think it had to do with your hunch regarding add_image_size…Do you know where the code is to “set featured image”? Not sure if that will point me to the write answer though.

    Moderator Andrew Nevins

    (@anevins)

    Do you know where the code is to “set featured image”?

    spun_get_image is first called here: http://themes.svn.wordpress.org/spun/2.0.2/content-home.php

    It’s defined here:
    http://themes.svn.wordpress.org/spun/2.0.2/inc/template-tags.php – which calls on the $size parameter with the string ‘home-post‘. See the Codex docs for wp_get_attachment_image if you want an explanation of why ‘home-post‘ is being passed.

    The ‘home-post‘ size is defined in the functions.php file: http://themes.svn.wordpress.org/spun/2.0.2/functions.php under the ‘spun_setup‘ function:

    add_image_size( 'home-post', 360, 360, true );

    That’s it.

    The ‘add_theme_setup‘ function is then hooked onto each pageload after the theme has been initialised (still in the functions.php file):

    add_action( 'after_setup_theme', 'spun_setup' );

    http://codex.wordpress.org/Plugin_API/Action_Reference/after_setup_theme

    Moderator Andrew Nevins

    (@anevins)

    This time I just stayed on the Spun Theme v.2.0.2.

    Note: I am editing the parent theme stuff for testing purposes only

    1. I edited the parent theme functions.php file and replaced this:
      add_image_size( 'home-post', 360, 360, true );

      With this:

      set_post_thumbnail_size( 360, 360, true );

    2. Then went into the parent theme template-tags.php file and replaced this:
      $thumb = wp_get_attachment_image( $attachment, $size, false, array( 'title' => esc_attr( strip_tags( get_the_title() ) ) ) );

      With this:

      $thumb = wp_get_attachment_image( $attachment, 'post-thumbnail', false, array( 'title' => esc_attr( strip_tags( get_the_title() ) ) ) );

      The reason I did that was because the ‘home-post‘ image size no longer existed and instead the default ‘post-thumbnail‘ image size existed.
      I was replicating the same line of code on the Spun theme version 1.07: http://themes.svn.wordpress.org/spun/1.07/content-home.php

    3. If you’re not aware, changing the ‘$size‘ variable (from the previous step) also changes a class that’s generated in each thumbnail, so now I had square images.
      I only did this change so that it was easier for me to isolate the real issue we’re looking at. In the parent theme style.css file I replaced this style:

      .blog .hentry a .attachment-home-post,
      .archive .hentry a .attachment-home-post,
      .search .hentry a .attachment-home-post {
      	border-radius: 180px;
      	opacity: .8;
      	transition: all .3s ease-in-out;
      	-webkit-transition: all .3s ease-in-out;
      	-moz-transition: all .3s ease-in-out;
      	-o-transition: all .3s ease-in-out;
      	-ms-transition: all .3s ease-in-out;
      	width: 100%;
      	height: 100%;
      	z-index: 1;
      }

      With this style:

      .blog .hentry a .attachment-home-post,
      .blog .hentry a .attachment-post-thumbnail,
      .archive .hentry a .attachment-home-post,
      .search .hentry a .attachment-home-post {
      	border-radius: 180px;
      	opacity: .8;
      	transition: all .3s ease-in-out;
      	-webkit-transition: all .3s ease-in-out;
      	-moz-transition: all .3s ease-in-out;
      	-o-transition: all .3s ease-in-out;
      	-ms-transition: all .3s ease-in-out;
      	width: 100%;
      	height: 100%;
      	z-index: 1;
      }

    The results were that none of the images in my circles were being resized as they should have been.

    This is a screenshot of me inspecting the true size of one of my circles: http://snag.gy/CHQXr.jpg – Look at the “Natural” bit: http://snag.gy/EezNa.jpg

    In your first image http://snag.gy/U6vqx.jpg, if you forced it to pickup the thumbnail, why is it 180×180? Also the pic looks weird I think because of the crop. Doesn’t add_image_size( 'home-post', 360, 360, true ); & set_post_thumbnail_size( 360, 360, true ); just add an image with those dimensions upload upload? I think the trick is using that image which is created by the set_post_thumbnail_size( 360, 360, true ); SO, instead of the URL showing http://wp-sandbox/wp-copntent/uploads/2014/01/1.jpg it should be displaying http://wp-sandbox/wp-copntent/uploads/2014/01/1-360×360.jpg…right?

    Moderator Andrew Nevins

    (@anevins)

    In your first image http://snag.gy/U6vqx.jpg, if you forced it to pickup the thumbnail, why is it 180×180?

    It’s not picking up the thumbnail even though it was set to. What you’re seeing as 180×180 is just applied by CSS, the “Natural” bit shows the actual image size.

    Doesn’t add_image_size( ‘home-post’, 360, 360, true ); & set_post_thumbnail_size( 360, 360, true ); just add an image with those dimensions upload upload?

    Yep.

    SO, instead of the URL showing http://wp-sandbox/wp-copntent/uploads/2014/01/1.jpg it should be displaying http://wp-sandbox/wp-copntent/uploads/2014/01/1.jpg…right?

    Yep (assuming you mean the latter URL has an image size in the image name).

    Thanks, then are you also stumped on how to pull the 360×360 image? I looked at the code last night, but just couldn’t figure it out and I had to step away, haha. Also, what’s interesting is that sometimes I see ‘post-thumbnail’ and other times I am seeing ‘post-thumbnails’ (plural). I thought for a minute it was just a simple typo in the code somewhere, but I don’t think it is.

    Moderator Andrew Nevins

    (@anevins)

    Thanks, then are you also stumped on how to pull the 360×360 image?

    The issue is certainly stumping, and I don’t know why switching between the two image size functions causes this issue, but the issue is a lot easier to tackle now that it’s narrowed down.

    Moderator Andrew Nevins

    (@anevins)

    Btw I just tried a regenerating image plugin and it fix this issue at all: http://wordpress.org/plugins/force-regenerate-thumbnails/ . I think there was no error in the plugin.

    Again, the image returned to its correct dimensions when I re-uploaded it to the Media Library.

    Moderator Andrew Nevins

    (@anevins)

    Btw I now think the explanation to this issue is really simple & there’s no trickery whatsoever – I’ll sleep on it though

    So, is it just a matter of when upgrading from 1.7 to 2.02 v of Spun the ‘home-post’ does not yet exist (unless you upload a new image or reupload images)? Does that seem to be the issue? Also, you mentioned re-uploading DID fix it, right? You don’t have to reset all of your feature images though, do you?

    I can try to play with the code or just regenerate, thx

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