JavaScript для изменения размера фотографий в постах Blogger - PullRequest
Новая
       22

JavaScript для изменения размера фотографий в постах Blogger

1 голос
/ 09 февраля 2012

Я пытаюсь автоматизировать изменение размера фотографий в сообщениях Blogger (без особой удачи). В основном мне нужен кусок JavaScript, который бы

  • найти все элементы
  • внутри каждого из элементов выше найдите все элементы

они имеют вид: 

<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" />

Для каждого из них мне нужно:

  • изменить width: 400px; на width: 556px;
  • удалить height: 256px;
  • изменить строку /s400/ в ссылке на /s556/

Итак, после изменений я получаю: 

<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" />

Блог, с которым я работаю: http://buczekmruczek.blogspot.com/2012/01/rowerkiem-przez-bedgebury-forest.html (первая фотография изменена, следующая нет)

Буду признателен за подсказки и / или примеры кода.

Ответы [ 3 ]

0 голосов
/ 09 февраля 2012

Я не уверен насчет изменения строки источника, но для изменения размера изображений вы можете комбинировать jQuery с пользовательской функцией следующим образом: 

<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>
0 голосов
/ 04 марта 2012

Для людей, которым нужен копируемый ответ, просто вставьте этот скрипт в конец шаблона: 

<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>
0 голосов
/ 09 февраля 2012 
arrayofimgs = document.getelementsbytagname('img')

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