Ayuda, manipulación de imágenes del home en blogger

leit0s · 12 Oct 2023

Hola betas, como dice el titulo, alguien conoce o cuenta con el código java para la obtención y manipulación de las imágenes que se cargan en el home, el cual permita interactuar con los parámetros de la misma ya sea que sean del servidor A o B del almacenamiento de blogger, ya que por defecto la mayoria de plantilla cuenta con el siguiente código, el cual solo permite manipular imágenes del servidor a de blogger (blogger.googleusercontent.com/img/a/) pero las del servidor b no.

Insertar CODE, HTML o PHP:

<b:includable id='postthumbnail'>
        <div class='img-thumbnail-wrap'>
            <div class='img-thumbnail'>
                <b:if cond='data:post.featuredImage'>
                    <b:class cond='data:post.featuredImage.isYoutube' name='is-video'/>
                    <b:if cond='data:post.featuredImage.isResizable'>                             
                        <a expr:href='data:post.url' expr:title='data:post.title'>                       
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 288, &quot;4:3&quot;)+  &quot;-e30-rw&quot;' expr:title='data:post.title' height='162' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAYSURBVCiRY0xISOBgoAAwUaJ51IBhYwAAuQABOsYCprwAAAAASUVORK5CYII=' width='288'/>
                            <div class='lazy-loading'/>
                        </a>       
                    </b:if>
                <b:else/>
                    <a expr:href='data:post.url'>
                        <img class='lazyload' data-src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcObGiXK1g5CaHoayIByfX5xZO6SkgRLQFVbf8sB5KmWGk-8H9eiG0MhYOF33obhzqt6msXMtEHhYJVjV66SReXl0O8P28GEXooRBL8YZHXwQQXbcBnbDsyTmxdQJ82wBCl0hfj7l_SL-mg00zAQ-hQNHun8JrD8NKKpJ9Ev9onN2YhKnSOy2gHriTcA/s1600/no-imagen.webp' expr:alt='data:post.title' expr:title='data:post.title' height='162' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAYSURBVCiRY0xISOBgoAAwUaJ51IBhYwAAuQABOsYCprwAAAAASUVORK5CYII=' width='288'/>
                        <div class='lazy-loading'/>
                    </a>
                </b:if>
            </div>
        </div>
    </b:includable>

Puko · 12 Oct 2023

leit0s dijo:
código java

java o javascript ?

leit0s dijo:
que se cargan en el home,

En el inicio o las que subes en el editor?

leit0s dijo:
manipular imágenes

pero que es lo que quieres hacer, que tome la imagen sola, cambiarle el tamaño mediante la url, o no se ve?

leit0s · 13 Oct 2023

Puko dijo:
java o javascript ?

En el inicio o las que subes en el editor?

pero que es lo que quieres hacer, que tome la imagen sola, cambiarle el tamaño mediante la url, o no se ve?

Me imagino quitando la url fija de la imagen y cambiandola por

JavaScript:

expr:src='data:post.featuredImage.url'

Gracias por leer @Puko bueno no se con cual de los java se pueda, se trata de las imágenes del home, lo que busco es optimizar la imágenes en función a parámetros de las mismas, el detalle esta que hay dos servidores de carga de imágenes, el A y el B, en el A funciona con el resizeImage, pero si es B no funciona, y genera error en la imagen, el detalle es que es un blog de mas de 3 años con entradas que tienen actualmente imágenes mixtas sin haberlo sabido, por ello trato de buscar una solución.

El formato que genera: https://blogger. googleusercontent. com/img/b/R29vZ2xl/AVvXsEg_xwBB9-267pqT2QJu6j72VT7GPdcmf8-HItInTfMooBVG7aZLwqKFgVqrqr9lRSD1PWvXhg2cuv27yHhnhFj3pZvoDMxhdWyB2swWyygKahNRHJLXP16qHTNnS6_eZfyUJB0EmPq_ln7QCN-dhYFI6M2ZPzTAAf1G2j0_yDIEu5DkRJmlBOVstA8xzg/w288-h216-p-k-no-nu/

Lo que busco: https://blogger. googleusercontent. com/img/b/R29vZ2xl/AVvXsEg_xwBB9-267pqT2QJu6j72VT7GPdcmf8-HItInTfMooBVG7aZLwqKFgVqrqr9lRSD1PWvXhg2cuv27yHhnhFj3pZvoDMxhdWyB2swWyygKahNRHJLXP16qHTNnS6_eZfyUJB0EmPq_ln7QCN-dhYFI6M2ZPzTAAf1G2j0_yDIEu5DkRJmlBOVstA8xzg/w288-h216-E30-RW/

Puko · 13 Oct 2023

Pero con "-E30-RW/" que hace?
o tienes un link que funcione asi?

leit0s · 13 Oct 2023

Puko dijo:
Pero con "-E30-RW/" que hace?
o tienes un link que funcione asi?

en blogger el manejo de las imágenes se da de dos formas o por dos rutas, la del servidor A (https://blogger.googleusercontent.c...jgK3rEfBDZ_IJw=w400-h225-p-k-no-nu-rw-l80-e30) en la cual los parámetros están al final y es posible trabajar manipulando el resizeImagen nativo y la del servidor b (https://blogger.googleusercontent.c...yPhY6iA/s0-rw-l80-e30/IMG_20230925_145047.jpg) la cual los parámetros están antes del nombre de la imagen, los cuales se debe trabajar con un scrip para poder determinar el origen de la imagen y poder manipular los parámetros y así optimizar la carga en el home

El que hace los parámetros: https://www.zkreations.com/2022/11/parametros-de-imagenes-de-blogger.html

Puko · 13 Oct 2023

lo que buscas por ejemplo
tus links son asi /s1600/no-imagen.webp
lo que quieres es agregarle -e30-rw a img del <div> id='postthumbnail a todos automaticamente
y que te queden asi
/s1600-e30-rw/no-imagen.webp

¿asi?
*pero -rw es cambiar a webp y en ese link ya es webp

leit0s · 13 Oct 2023

Puko dijo:
lo que buscas por ejemplo
tus links son asi /s1600/no-imagen.webp
lo que quieres es agregarle -e30-rw a img del <div> id='postthumbnail a todos automaticamente
y que te queden asi
/s1600-e30-rw/no-imagen.webp

¿asi?
*pero -rw es cambiar a webp y en ese link ya es webp

Exacto, claro el valor rw es cambiar a web, pero al implementarlo en un blog ya de años, hay muchas imágenes sin parámetro, igual blogger implemento una opción para ello, pero solo funciona con el servidor A, por eso estoy investigando como implementarlo en el home y que haga la evolución y configure según el servidor que almacene la imagen.

Puko · 13 Oct 2023

HTML:

hice un script por ejemplo : cambia la url de /s1600/ a /s100-e30-rj  
le puse -rj para que cambie el webp de la url a jpg 
y s100 para ver si cambia viendo también el tamaño pero… lo hice asi por ejemplo
en este link normal si carga la imagen

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcObGiXK1g5CaHoayIByfX5xZO6SkgRLQFVbf8sB5KmWGk-8H9eiG0MhYOF33obhzqt6msXMtEHhYJVjV66SReXl0O8P28GEXooRBL8YZHXwQQXbcBnbDsyTmxdQJ82wBCl0hfj7l_SL-mg00zAQ-hQNHun8JrD8NKKpJ9Ev9onN2YhKnSOy2gHriTcA/s1600/no-imagen.webp'/>

luego con el codigo reducido, aquí si cambia la url a /s100-e30-rj/
<div id='postthumbnail'>
 <img class='lazyload' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcObGiXK1g5CaHoayIByfX5xZO6SkgRLQFVbf8sB5KmWGk-8H9eiG0MhYOF33obhzqt6msXMtEHhYJVjV66SReXl0O8P28GEXooRBL8YZHXwQQXbcBnbDsyTmxdQJ82wBCl0hfj7l_SL-mg00zAQ-hQNHun8JrD8NKKpJ9Ev9onN2YhKnSOy2gHriTcA/s1600/no-imagen.webp' expr:alt='data:post.title' expr:title='data:post.title' height='162' width='288'/>
</div>

pero al poner otro div igual no carga ni la imagen
y ya al poner todo tu codigo no carga ni la imagen ni cambia la url
lo mas raro es que tienen la misma ruta css en el script
para eso le agrege

img.lazyload{border: 7px solid #3a2afd;}
</style>

con eso se marca el borde azul para ver que tienen la misma ruta css/script

aquí el html, no se si tenga algo que ver si lo hice asi
y también lo puse en una pagina en blogger o ocupa mas codigo que ya tiene tu plantilla para que funcione todo

HTML:

<!DOCTYPE html>
<html>
<body>

<style>
img.lazyload{
border: 7px solid #3a2afd;
}
</style>
#link normal <br>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcObGiXK1g5CaHoayIByfX5xZO6SkgRLQFVbf8sB5KmWGk-8H9eiG0MhYOF33obhzqt6msXMtEHhYJVjV66SReXl0O8P28GEXooRBL8YZHXwQQXbcBnbDsyTmxdQJ82wBCl0hfj7l_SL-mg00zAQ-hQNHun8JrD8NKKpJ9Ev9onN2YhKnSOy2gHriTcA/s1600/no-imagen.webp'/>

<br>
#link 1 carga la imagen y cambia la url<br>

<div id='postthumbnail'>
<img class='lazyload' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcObGiXK1g5CaHoayIByfX5xZO6SkgRLQFVbf8sB5KmWGk-8H9eiG0MhYOF33obhzqt6msXMtEHhYJVjV66SReXl0O8P28GEXooRBL8YZHXwQQXbcBnbDsyTmxdQJ82wBCl0hfj7l_SL-mg00zAQ-hQNHun8JrD8NKKpJ9Ev9onN2YhKnSOy2gHriTcA/s1600/no-imagen.webp' expr:alt='data:post.title' expr:title='data:post.title' height='162' width='288'/>
</div>

#link 2 igual que el de arriba pero ya no carga ni cambia la url <br>

<div id='postthumbnail'>
<img class='lazyload' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcObGiXK1g5CaHoayIByfX5xZO6SkgRLQFVbf8sB5KmWGk-8H9eiG0MhYOF33obhzqt6msXMtEHhYJVjV66SReXl0O8P28GEXooRBL8YZHXwQQXbcBnbDsyTmxdQJ82wBCl0hfj7l_SL-mg00zAQ-hQNHun8JrD8NKKpJ9Ev9onN2YhKnSOy2gHriTcA/s1600/no-imagen.webp' expr:alt='data:post.title' expr:title='data:post.title' height='162' width='288'/>
</div>

#link 3 codigo completo no carga ni cambia la url<br>

<b:includable id='postthumbnail'>
        <div class='img-thumbnail-wrap'>
            <div class='img-thumbnail'>
                <b:if cond='data:post.featuredImage'>
                    <b:class cond='data:post.featuredImage.isYoutube' name='is-video'/>
                    <b:if cond='data:post.featuredImage.isResizable'>                             
                        <a expr:href='data:post.url' expr:title='data:post.title'>                       
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 288, &quot;4:3&quot;)+  &quot;-e30-rw&quot;' expr:title='data:post.title' height='162'   width='288'/>
                            <div class='lazy-loading'/>
                        </a>       
                    </b:if>
                <b:else/>
                    <a expr:href='data:post.url'>
                        <img class='lazyload' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcObGiXK1g5CaHoayIByfX5xZO6SkgRLQFVbf8sB5KmWGk-8H9eiG0MhYOF33obhzqt6msXMtEHhYJVjV66SReXl0O8P28GEXooRBL8YZHXwQQXbcBnbDsyTmxdQJ82wBCl0hfj7l_SL-mg00zAQ-hQNHun8JrD8NKKpJ9Ev9onN2YhKnSOy2gHriTcA/s1600/no-imagen.webp' expr:alt='data:post.title' expr:title='data:post.title' height='162'   width='288'/>
                        <div class='lazy-loading'/>
                    </a>
                </b:if>
            </div>
        </div>
    </b:includable>
<script>
function actualizarUrls() {
    const imagen = document.querySelector('img.lazyload');
    const nuevaUrl = imagen.dataset.src.replace('/s1600/', '/s100-e30-rj/');
    const nuevaImagen = new Image();
    nuevaImagen.onload = function() {
        imagen.src = nuevaUrl;
    };
    nuevaImagen.src = nuevaUrl;
}
actualizarUrls();
</script>
</body>
</html>

Puko · 13 Oct 2023

leit0s · 18 Oct 2023

Gracias amigo por el apoyo, sigo investigando y probando ello, me doy con la sorpresa de que si la imagen se carga con el widget de imagen se carga la imagen en el servidor A donde el archivo esta encriptado por así decir el nombre y al final de la url se puede manipular los parámetros, pero a la vez también la imagen se carga al servidor B la cual se puede acceder desde la parte de Contenido multimedia de tu blog al abrir una imagen presenta la forma conocida, con lo cual si veo posible la evaluación del servidor de origen y la manipulación de las imágenes, por parámetros en el home.

Ayuda, manipulación de imágenes del home en blogger

leit0s

Puko

leit0s

Puko

leit0s

Puko

leit0s

Puko

Puko

leit0s

Temas similares