JavaScript for resizing photos in Blogger posts

问题

I am trying to automate resizing of photos in Blogger posts (without much luck). Basically I need a piece of JavaScript that would

find all elements
within each of the elements above find all elements

these are of the form:

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 265px;" src="http://1.bp.blogspot.com/-y8j5IluAe4g/TykduAo1gnI/AAAAAAAAD38/K6VakbKwowU/s400/Czerwony%2BStompee%2Bdla%2Bdzieci.jpeg" alt="" id="BLOGGER_PHOTO_ID_5704123079323910770" border="0" />

For every one of these I need to:

change width: 400px; to width: 556px;
remove height: 256px;
change the string /s400/ in the link to /s556/

So after the changes I get:

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 556px;" src="http://1.bp.blogspot.com/-y8j5IluAe4g/TykduAo1gnI/AAAAAAAAD38/K6VakbKwowU/s556/Czerwony%2BStompee%2Bdla%2Bdzieci.jpeg" alt="" id="BLOGGER_PHOTO_ID_5704123079323910770" border="0" />

The blog I am working with is: http://buczekmruczek.blogspot.com/2012/01/rowerkiem-przez-bedgebury-forest.html (the first photo is resized, the following not)

I would be grateful for hints and/or code samples.

回答1:

arrayofimgs = document.getelementsbytagname('img')

foreach arrayofimgs
   if( strpos(img.src, 'blogspot.com') )
       img.style.width='556px';
       img.style.height='';
       doSomeRegexOrManualStringManipulation(img.src, 's400', 's556')

回答2:

I'm not sure about changing the source string but to resize the images you can combine jQuery with a custom function as follows:

<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript">
 $(document).ready(function(){ 
   resizeImages();
 });

 function resizeImages(){
  var imageTags = document.getElementsByTagName("image");
  if (!imageTags || imageTags.length <= 0)
  {
    imageTags = document.getElementsByTagName("img");
  }
  if(!imageTags){
    return;
  }
  for(i = 0 ; i < imageTags.length; i++){

     imageTags[i].style.width="556px";
 imageTags[i].style.height="";
  }  
 }
</script>
<head>
<body>
<image ...
</body>
</html>

回答3:

For people who want a copy-pastable answer, just paste this script somewhere at the end of the template:

<script type='text/javascript'>
  /* <![CDATA[ */
  var imageTags = document.getElementsByTagName('img');
  for(i = 0 ; i < imageTags.length; i++){
    if( imageTags[i].src.indexOf('/s400/', 0)>-1 ) {
      if(imageTags[i].style.width=='400px')
    imageTags[i].style.width='556px';
      else
        imageTags[i].style.width='368px';
      imageTags[i].style.height='';
      imageTags[i].src=imageTags[i].src.replace('/s400/', '/s556/');
    }
  }
  /* ]]> */
</script>

来源：https://stackoverflow.com/questions/9202187/javascript-for-resizing-photos-in-blogger-posts

标签

javascript

image

blogger