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

  • Autor Autor leit0s
  • Fecha de inicio Fecha de inicio

leit0s

Eta
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
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>
 
Última edición:
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/
 
Pero con "-E30-RW/" que hace?
o tienes un link que funcione asi?
 
Puko dijo:
Pero con "-E30-RW/" que hace?
o tienes un link que funcione asi?
Hacer clic para expandir...
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
 
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.
 
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>

 
 
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.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

G
Tutorial de Photoshop: Montaje y Manipulación de Imágenes
Respuestas
12
Visitas
1K
GerardoJandres
G
Menú
Acceder
Registro