Как на blogspot вывести фото с разным размером?

Question

[grechnik228]

Нужно вывести ссылки на фото разных размеров... Как это сделать?
Знаю, что можно просто поменять размер указав s625,s1024,s1600. Но как это сделать через скрипты? Я использую только blogspot и нужно только на нем. Перерыл много в инете, но не нашел(((

s625
s1024
s1600

Answer 1

[web_xaser]

1) Если это фото загружено через Blogger (имеет домен *blogspot.com или *.googleusercontent.com), то в коде шаблона в том месте, где нужно вывести изображение, попробуйте стандартную функцию изменения размера. Например:

<img expr:src='data:post.firstImageUrl resizeImage 1200 resizeImage &quot;1:1&quot;'/>

Первое число - ширина изображения, второе - соотношение сторон.

2) Если функция выше не срабатывает, можно изменить размер через скрипт.

Пример для фото с *.googleusercontent.com

var userAvatar = document.querySelectorAll('.avatar-image-container img');
for (i = 0; i < userAvatar.length; i++) {
  var avatarUrl = userAvatar[i].getAttribute('src');
  if (avatarUrl.includes("googleusercontent.com")) {
    var userSize = avatarUrl.replace("s35-c", "s64-c");
    var userUrl = userAvatar[i].setAttribute('src', userSize);
  }
}

Где s35-c - изначальный размер, s64-c - необходимый размер.

Для фото с *.blogspot.com заменить строчки:

if (avatarUrl.includes("blogspot.com")) {
  var userSize = avatarUrl.replace("/s625/", "/s1024/");
  ...
}

Где /s625/ - изначальный размер, /s1024/ - необходимый размер.

Answer 2

[TosterUserName]

А вам с какой целью? Если просто чтобы под разные экраны нормально выглядело, то используйте тег <picture>. Я сам на блоггере делаю вот так картинки:

<picture>
 <source srcset="s1600" media="(min-width: 1024px)">
 <source srcset="s800" media="(min-width: 768px)">
 <img alt="Картинка" src="s600">
</picture>