{"id":159237,"date":"2010-10-25T08:00:00","date_gmt":"2010-10-25T08:00:00","guid":{"rendered":"https:\/\/www.weixiaoduo.com\/plugins\/2024\/02\/22\/simple-thumbs\/"},"modified":"2011-07-13T05:44:00","modified_gmt":"2011-07-13T05:44:00","slug":"simple-thumbs","status":"publish","type":"post","link":"https:\/\/www.weixiaoduo.com\/plugins\/simple-thumbs\/","title":{"rendered":"Simple Thumbs"},"content":{"rendered":"

** This plugin will no longer be updated. **<\/p>\n

This plugin does three things:<\/p>\n

    \n
  1. It creates rewrite rules that let you create nice urls for your images,
    \nlike \u201chttp:\/\/example.com\/image\/55\/DSC_0001.jpg\u201d instead of \u201chttp:\/\/example.com\/wordpress\/\/www\/wwwroot\/img.feibisi.com\/2010\/02\/DSC_0001.jpg\u201d\u201d<\/li>\n
  2. It let\u2019s you resize and crop images. And you can add unsharp filter to them too.<\/li>\n
  3. It adds a function, simple_thumbs_img() and with this function you can create ready-to-go IMG-tags
    \nthat outputs the correct width and height, even if you choose to resize or crop your image.<\/li>\n<\/ol>\n

    Rewrite Rules\/Nice Image URLs example<\/h4>\n

    Instead of this URL:
    \nhttp:\/\/example.com\/wordpress\/\/www\/wwwroot\/img.feibisi.com\/2010\/02\/DSC_0001.jpg<\/p>\n

    Your image can have this URL, where 55 is the Attachment ID:
    \nhttp:\/\/example.com\/image\/55\/DSC_0001.jpg<\/p>\n

    Shorter and sweeter.
    \nBut there\u2019s more! You can also send in some arguments:<\/p>\n

    Resize the image to be 150px in width:
    \n http:\/\/example.com\/image\/55:w150\/DSC_0001.jpg<\/p>\n

    Resize the image to be 150px in width, and give it another name (you can name the image to whatever you want)
    \nhttp:\/\/example.com\/image\/55:w150\/my-cool-image.jpg<\/p>\n

    Resize the image to 150px in height:
    \nhttp:\/\/example.com\/image\/55:h150\/DSC_0001.jpg<\/p>\n

    Resize the image to stay within 150px in height and width:
    \nhttp:\/\/example.com\/image\/55:w150:h150\/DSC_0001.jpg<\/p>\n

    Crop the image to exactly 150px in width and height:
    \nhttp:\/\/example.com\/image\/55:w150:h150\/DSC_0001.jpg<\/p>\n

    Make a small thumb, and also add an unsharp filter:
    \nhttp:\/\/example.com\/image\/55:w175:h75:c1:u1\/DSC_0001.jpg<\/p>\n

    Make a small thumb, and also add an unsharp filter, and output as png:
    \nhttp:\/\/example.com\/image\/55:w175:h75:c1:u1:fp\/DSC_0001.jpg<\/p>\n

    Same as above, but with pipe as the delimeter (you can choose between ,._- and |):
    \nhttp:\/\/example.com\/image\/55|w175|h75|c1|u1|fp\/DSC_0001.jpg<\/p>\n

    Please note that all the resize stuff where made without adding any querystring to the URL.
    \nThis is good for Search Engine Optimization (SEO) reasones, but also for caching reasons.
    \nGoogle Page Speed will for example give you a higher score because of this! \ud83d\ude42<\/p>\n

    All generated images will be cached, so only the first call to each URL restults in an actual resize of the image.
    \nImages are also sent with far future expires headers, so if a user returns to your page all images should load blazingly fast.<\/p>\n

    simple_thumbs_img(): The Magic Function<\/h4>\n

    simple_thumbs_img() generates IMG tags for you, with the correct width & height attributes set, even after resize.<\/p>\n

    With no width and height values set, the page may be redrawn several times, resulting in a very \u201cjumpy\u201d page.
    \nUsing Simple Thumb to create your image tag will solve this problem.<\/p>\n

    Lack of width and height atributes in img-tags can also lead to
    \nerrors when JavaScript ondomready calculations are made while images are still loading, since
    \nit can\u2019t determine the size of the image.<\/p>\n

        \n<\/code><\/pre>\n
    Resize modes<\/h4>\n
    Control the way the thumbs are created by adding parameter \u201cm\u201d, as in \u201cmode\u201d.
    \nTo learn how they work just experiment a bit.<\/p>\n