Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Resize pictures with Javascript

    Hi, I'm currently creating a blog with Blogger and I'm facing an issue with pictures sizes. My skills ? I'm a newbie...

    Blog Address: http://www.blogmpocom.com/
    Browser(s) Name/Version (ex: Firefox 4, Internet Explorer 8): Firefox 4, Chrome


    OK, so I want the picture in the thumbnail to be CROPPED and not SCALED DOWN/RESIZED automatically, how do I do ? The thumbnail is 274px (width) by 101px (height), the picture in the thumbnail has to be 274px by 101px too but it must not be distorted.

    Here is the Javascript code which needs to be worked on:

    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {
    imgtag = '<span style="text-align:center; margin-bottom:10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
    summ = summary_img;
    }

    ....... (these dots are NOT in the code, they just separate the 2 Javascript bits)

    function createSummaryAndThumbF(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summaryf_noimg;
    if(img.length>=1) {
    if(thumbnail_modef == "float") {
    imgtag = '<span style="float:left;margin:0px 10px 10px 0;"><img src="'+img[0].src+'" width="'+img_thumbf_width+'px" height="'+img_thumbf_height+'px"/></span>';
    summ = summaryf_img;
    } else {
    imgtag = '<div style="padding:0px" text-align="center"><img src="'+img[0].src+'" width="'+img_thumbf_width+'px" height="'+img_thumbf_height+'px"/></div>';
    summ = summaryf_img;
    }
    }


    I tried several tricks but the picture in the thumbnail is either still distorted or the thumbnail and the picture are the same size...
    Any help is highly apreciated, thanks in advance !

  • #2
    Regular Coder nomanic's Avatar
    Join Date
    Feb 2009
    Location
    United Kingdom
    Posts
    255
    Thanks
    9
    Thanked 33 Times in 33 Posts
    make a div 274px by 101px with overflow hidden, and shove the image tag with no width or height restrictions inside it, it will crop the image to your desired size.

    try this -

    Code:
    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) { 
    imgtag = '<span style="text-align:center; margin-bottom:10px;width:'+img_thumbf_width+'px;height'+img_thumbf_height+'px;overflow:hidden;"><img src="'+img[0].src+'"/></span>';
    summ = summary_img;
    }
    ...
    function createSummaryAndThumbF(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summaryf_noimg;
    if(img.length>=1) { 
    if(thumbnail_modef == "float") {
    imgtag = '<span style="float:left;margin:0px 10px 10px 0;width:'+img_thumbf_width+'px;height'+img_thumbf_height+'px;overflow:hidden;"><img src="'+img[0].src+'"/></span>';
    summ = summaryf_img;
    } else {
    imgtag = '<div text-align="center" style="padding:0px;width:'+img_thumbf_width+'px;height'+img_thumbf_height+'px;overflow:hidden;"><img src="'+img[0].src+'"/></div>';
    summ = summaryf_img;
    }
    }
    not sure about the spans, div should be fine
    Last edited by nomanic; 07-29-2011 at 04:03 PM. Reason: added code

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your answer, Nomanic ! However, how do I make a div 274px by 101px with overflow hidden ?

    I replaced the code I currently have in my Blogger template with the one you provided and it doesn't work.

    Sorry for being heavy, i'm clueless


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •