This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

image crop sizes

  • Creator
    Topic
  • #2955
    sharonq
    Participant

    I need a 90×90 crop size for the featured image – and was reading the documentation to figure out how but the doc isn’t finished yet – … “This article will list and briefly describe all of the framework’s crop sizes. Also, this article will have information on using the framework’s filters to alter the crop sizes. This is possible because for each add_image_size function called, it is looping through an array that has a filter attached. ”

    http://dev.themeblvd.com/tutorial/crop-sizes/

    Can you tell me how to use the frameworks filter to alter the crop sizes? Ideally I’d like to add a new size –
    square-smallish 90×90 but could change one of the existing sizes if I need to.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Author
    Replies
  • #2975
    Jason Bobich
    Keymaster

    If you’re just adding a new image size, realistically you don’t need to do anything with the framework. You’d just use WordPress’s add_image_size function from your Child theme:

    http://codex.wordpress.org/Function_Reference/add_image_size

    But if you wanted to filter it on to the framework instead, you’d do it like this:

    function my_image_sizes( $sizes ) {
        $sizes['square-smallish'] = array(
            'name' => 'Smallish Square',
            'width' => '90',
            'height' => '90',
            'crop' => true
        );
        return $sizes;
    }
    add_filter( 'themeblvd_image_sizes', 'my_image_sizes' );
    #3059
    sharonq
    Participant

    Not quite sure what the difference is – when you say “filter it on to the framework”
    I read this: http://wordpress.org/extend/plugins/theme-blvd-image-sizes/ and still need the “php for dummies”
    When would the filter be used?

    Thanks for the code – that worked just fine.

    #3085
    askwpgirl
    Participant

    Sharon,

    The “filter” is just a type of hook. A “hook” allows you to do something at a specific time or place in the execution of WordPress or a WordPress theme. In the WordPress theme coding world, there are two types of hooks: ACTIONS and FILTERS.

    Actions are hooks that are executed at specific places within a theme, such as the header or footer.

    Filters are hooks that are used to modify text or other attributes before adding the content to the database.

    In this case, whenever you upload an image in WordPress, the image is duplicated and cropped according to the images sizes specified in the following places:

    WordPress Settings > Media
    Jump Start parent image sizes
    Your Jump Start child’s image sizes

    There are often many different ways to accomplish things, and in this case, we have four choices:

    1 – Modify the WordPress Media Settings
    2 – Add an image size using the WordPress function called add_image_size: http://codex.wordpress.org/Function_Reference/add_image_size
    3 – Use the code snippet Jason has provided above. The filter he is referring to is the add_filter command (as opposed to add_action). You are “hooking” into the filter which Theme Blvd already uses to generate image sizes and adding some of your own! Cool!
    4 – Use the Theme Blvd Image Sizes plugin, which will change the image size for default Theme Blvd images, such as the small thumbnail used in a Theme Blvd post list on the blog page and specified in the Appearance > Theme Options.

    If you want to change the way your blog post featured image thumbnails or large images display in the post list or post grid, then use option #4 – the Theme Blvd Image Sizes plugin.

    Note, however, that once you change the size using this plugin, any previously uploaded images will not be resized. This is because WordPress sizes images upon UPLOAD, not after the fact. It’s a function of the upload feature in WordPress that generates the various images sizes specified by WordPress and the theme.

    To regenerate your thumbnails, you can reupload them, which might be a pain if you have a lot, or use the Regenerate Thumbnails plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/

    However, if changing the size of slider images, if the original images were too small, regenerating the thumbnails will not make them larger, and you will need to upload appropriately sized images manually.

    I hope this helps. It is a lot to get one’s brain around with lots of variables and different solutions for different applications.

    Good luck!

    • This reply was modified 7 years, 8 months ago by askwpgirl.
    • This reply was modified 7 years, 8 months ago by Jason Bobich.
    #3651
    sharonq
    Participant

    Thanks for such a thorough response – I really appreciate it. WP seems to have some unique ways of doing things. I am using 140 x 140 sized thumbs as my “featured” or normal thumb – and I adjusted my general media settings for that – to accomodate the gallery on my front page (www.teamsfirst.ca).

    In the directory listing each item also gets a thumbnail and the 140 size is too large and the sizes provided by JS are too small (feeling a bit like Goldielocks here….). I don’t want to mess with the sizes already set by JS so would like to add one more crop size.

    I have to admit the concept of hooks and filters still eludes me somewhat.

    To me it is like my html is built on a skeleton – but instead of simply building an html file from top to bottom each piece is labelled – eyes then nose then mouth – and by using those labels I can add in pieces of code. If I can fit what I want to do into the labels that already exist tha’t great – but if I need to add a label – say moustache between nose and mouth then it gets a bit murky for me. In addition there are a whole other set of codes that are used to build the bacfkground of my person = his height, weight, favorite color – which are not linear and all come before the body – and that is the space that my image sizes belong – and that is still very unclear to me.

    My understanding of thumbnails is that each time WP imports an image it actually creats a bunch of them – in the original WP there were 5 sizes – original, small, med, large and thumbnail, JS has added to this set so even more images are created – WP does this to speed up image loading. In the past thumbs would load the full size image but only display a minuature – and galleries could bring the speed of a page load to it’s knees.

    I have noticed that when I change the default thumbnail size it seems to change instantly on my site – and adding the new TB thumbnail also worked instantly without a rebuild – so something changed with wp 3.5 – and I’m definately not clear about which image sizes are being built “on the fly” and which ones need to be rebuilt.

    Anyway – thanks again for your input and advice. Jason is so helpful on this support forum but for someone like me with just html it’s easy to get confused.

    • This reply was modified 7 years, 8 months ago by sharonq.
    • This reply was modified 7 years, 8 months ago by sharonq.
    • This reply was modified 7 years, 8 months ago by Jason Bobich.
    #3820
    askwpgirl
    Participant

    I think the “instantly changing of thumbnail size” was coincidental. You can test by changing image sizes and observing the wp-content/uploads folder. You’ll notice that simply modifying an image size in the functions file, Media Settings, or TB Image Sizes plugin does not upload any new or different files. At least not that I’ve ever seen. I can’t think of any mechanism that would go through and do that.

    Image sizes are ONLY generated, as far as I know, when you first upload an image and will need to be regenerated either by reuploading the image or by using the Regenerate Thumbnails plugin. The image sizes that are built on image upload are the ones in Media Settings and the ones specified by JS — and only if those sizes CAN be generated. It all depends on the original size of the image.

    As for the WP galleries, this is true. This is why it is important to always optimize your images for web before loading, because the full size will be used unless you explicitly insert one of the other sizes on the post or page. I recommend using JPEG quality 60 and sizing the images to no larger than they need to be to look reasonably good if you show them full size in a lightbox.

    One thing to keep in mind with image sizes for Featured Images: even if you have specific height/width set with crop, if the image is too NARROW for the original width (200 pixels instead of 240 pixels for example), you will get a tall looking image in your post grid or vice versa one that is too short. So make sure any image you use as a featured image is going to crop nicely to fit the space. It’s very annoying, but the WordPress uploader simply can’t make images larger to fit the image size specs. I advise my clients on a good ratio to use for their featured images, so they are all consistent, and we don’t have any weird cropping issues.

    Some basic PHP is helpful to understand syntax. A good tutorial if you want to just get some exposure to PHP is:

    http://devzone.zend.com/6/php-101-php-for-the-absolute-beginner/

    That’s a bit hard core, but I’ve actually found playing with PHP outside of WordPress is immensely helpful.

    Then, a very quick tutorial on action hooks is:

    http://www.nathanrice.net/blog/an-introduction-to-wordpress-action-hooks/

    This tutorial is related to general WordPress action hooks — not theme specific action hooks. But the more you read about action hooks, the more likely your to get a sense of what they do. What I did was had a site where I could screw things up a lot, then just tried different things, reverse engineering stuff, until I “got it.”

    #3865
    sharonq
    Participant

    Thanks Angela

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.