Títulos con imagen individualizada y otras personalizaciones para Blogger 26.5.14
Cómo poder personalizar los títulos de los artículos en blogger y todo el comentario del autor del blog así como los comentarios borrados.
Títulos con imagen individualizada y otras personalizaciones para Blogger
Lo prometido es deuda. Así que toca compartir con los lectores de este blog y usuarios/sufridores de Blogger algunos detalles. Como por ejemplo incluir una imagen diferente en cada título de los artículos, o personalizar la caja del comentario realizado por el administrador del blog (todo su contenido, no sólo el nombre) o todo el comentario borrado.
Títulos de los artículos con imagen de fondo
Al acometer esta última remodelación del blog me planteé darle mayor relevancia al título del artículo. Y que la apariencia de cada título fuese diferente.
La idea era colocar una imagen en el título. Y que la imagen cambie de un artículo a otro para evitar la monotonía. Pero aquí viene una de las limitaciones de Blogger.
Blogger no incluye una manera de personalizar de forma independiente cada uno de los títulos de los posts. Vía Css puedes aplicar estilos. Pero estos estilos serán iguales para todos los títulos.
El editor de las entradas en el campo del título no permite más que texto plano. Así que olvídate de incluir cualquier marcado html. Incluidas imágenes. Toca ser un poco imaginativo.
Si no puedo ponérsela desde el mismo título usaremos una que ya esté en el cuerpo del artículo.
Para poder ver una imagen del post como background del título toca incluir en el código de la plantilla (opción "Plantilla --> Editar Html" ) un par de líneas de javascript. Preferiblemente al final y como sólo será necesario en los posts lo incluimos metido en un condicional:
Reconocimiento de autoría El siguiente código js es obra de Furoya. Gracias.
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
document.querySelector('h1').style.backgroundImage =
'url(' + document.querySelector('.articulo-main img').src + ')';
document.querySelector('.articulo-main img.hide-img').remove();
//]]>
</script>
</b:if>
Explicación del Js
<b:if cond='data:blog.pageType == "item"'> Con esta línea (y su cierre </b:if>) le indicamos al Blogger que sólo cargue el js en los items
que es como llama a los articulos.
document.querySelector('h1') De esta parte lo que interesa es lo resaltado en negritas: "h1". Suele ser el marcado de blogger para los títulos. Si en tu plantilla es otro elemento, cámbialo. También puedes añadirle un id y seleccionarlo por el id.
A continuación le indicamos que incluya en ese elemento (el h1 o título) el atributo "style" y una declaración Css para usar como background-image la primera imagen que encuentre en el cuerpo del post. document.querySelector('.articulo-main img') En mi plantilla es un div con clase articulo-main
. En otras suele ser .post-body.entry-content
Con esto (sin la última línea del script) ya sería suficiente. Ya tenemos una imagen como fondo del título. Pero quise ir un paso más allá. En los posts antiguos la imagen se verá por duplicado, pues se mantiene visible la imagen en el contenido del artículo y como en muchas ocasiones es una imagen que aporta información no podemos eliminarla.
Así que en los nuevos artículos lo que hago es que si la primera imagen es sólo a efectos decorativos del título le añado una clase hide-img para poder eliminarla del contenido y que sólo quede como fondo del título.
Para eso es la última línea del js: document.querySelector('.articulo-main img.hide-img').remove();
Un poco más de estilo
Ahora ya sólo nos resta aplicar unos estilos chulos para que nuestro título luzca en todo su esplendor. Un tamaño suficiente y un velo entre el texto y la imagen. En mi caso, además de otros detalles, son:
h1 {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100vw;
left: 0;
overflow: hidden;
font-size: 15vmin;
}
/* El velo */
h1:before {
content: "";
background: rgba(25, 53, 78, 0.6);
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
Personalizar todo el comentario del autor y los borrados
Otros elementos un tanto inaccesibles para personalizar de forma selectiva son los comentarios realizados por el autor del blog y aquellos a los que borramos su contenido.
Blogger añade la clase blog-author
no al item que contiene a todo el comentario del autor del blog sino al span con el que marca el nick del autor del blog. Así que usando esa clase sólo podríamos personalizar su nombre y con los selectores de hermanos + | ~ alguna cosilla más.
Lo mismo ocurre con los comentarios a los que se borra su contenido. Blogger añade la clase deleted-comment
a un elemento interior del item. En concreto al span que contiene el texto de aviso.
Necesitamos un algo que diferencie a la caja padre de todo el comentario del autor y lo mismo para los comentarios borrados. Con ello ya podremos acceder a esos items con Css.
Por las particularidades de blogger y su construcción del arbol de comentarios no tenemos acceso desde el editor del código para modificar esta parte. Así que de nuevo hay que recurrir a js. En este caso a jQuery, que casi todos los blogs lo tienen ya incluido.
$(document).ready(function() {
$(".blog-author").closest("li.comment").addClass("comment-kseso");
$(".deleted-comment").closest("li.comment").addClass("comment-borrado");
});
En mi plantilla cada comentario es un ítem de lista: un li. Con la primera instrucción añado la clase comment-kseso
al ítem de mis propios comentarios y a partir de esa clase y vía css ya puedo personalizar cualquier elemento de él y no sólo mi nick.
Te sugiero que si implementas esto cambies el nombre de la clase.
Con la segunda instrucción hago igual con los comentarios borrados. Les añado la clase comment-borrado
para manipularlos desde el css y dejarlos al gusto.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Dónde se te puede enviar algunas correcciones que debes hacer al blog cuando escribes algo como "La idea eera coloca..."
ResponderEliminar¿Viste? Ya lo hiciste ;-)
EliminarGracias.
Me gusta lo de las imágenes de fondo, pero personalmente no me gusta poner en las entradas cosas que no son propias de dicha entrada. Por ejemplo, si en el futuro cambias de nuevo de plantilla (cosa bastante probable vista tu intensa actividad con estas cosas) tendrás que crear (mantener) algún parche para que te oculte las imágenes "meramente decorativas" ¿o me perdí algo?
ResponderEliminarNo es que sea un gran problema, porque además entiendo que prácticamente es imposible hacerlo de otra manera, pero bueno, es una manía.
Por otra parte, con imágenes de ese tamaño no tendrás problemas de miniatura al compartir en redes.
¡Cuánto bueno por aquí! xD
EliminarHay dos tipos de imágenes posibles, Manolo: las que forman parte de la info del post y las que incluya a efectos decorativos del título mientras mantenga este look.
Con las primeras no hay drama. A las segundas les añado la clase hide-img
El día que cambie la plantilla sólo necesitaré mantener la parte del script que elimina del DOM estas últimas (.hide-img)
document.querySelector('img.hide-img').remove();
Por otra parte, las imágenes no necesitan ser grandes. Las acomodo con la propiedad background-size: cover al tamaño del título (definido en unidades relativas al vieport (vw, vh).
Y el velo entre el título y la imagen cumple una doble función:
.- La principal: legibilidad del texto
.- La secundaria: enmascarar algo la pérdida de calidad si el valor "cover" la amplía en exceso.
Un saludo y gracias por el comentario.
Hola gente.
ResponderEliminarPrimero que nada, agradecer a Kseso la deferencia de mencionarme en el artículo.
Luego, la razón de comentar en tu espacio, Oloman. Estuve pensando en eso de andar metiendo código ajeno a la entrada propiamente dicha; y siempre es válido de cara al source final. Si es por tipearlo en el formulario de edición ... amigo, tu neurosis es peor que la mía.
XD
Bien, le di una mirada a ese source code resultante, y encontré como media docena de escripts y yuyos varios insertados en el pie de página. Los de Kseso y los que agrega Blogspot. Así que ya no me preocuparía.
De cualquier forma, siempre se puede agregar como archivo externo. El código (si se "aparece" antes de la carga de las imágenes y comentarios a modificar) puede ser más complejo al agrgarle listeners (por ejemplo), pero al fin sería sólo una llamada, un linkeado, y no estarían sus tripas expuestas en el código fuente.
Una objeción que no ha aparecido, pero seguramente lo hará, es la de juntar un artilugio de javascript, con uno de JQuery.
Pero a mi me parece un acierto del autor; porque entendemos que éste es un blog de CSS, y sabemos que JS es una ayuda importante para capturar y modificar estilos que después se "redondean" con CSS ... algo que los diseñadores no tienen obligación de entender y mucho menos de manejar. El mostrar que hay al menos dos maneras de usarlo (puro, y a través de un framework) y que en ambas es realmente comprensible y fácil de interpretar, será una ayuda adicional para que en algún momento quien no tenga mucha idea de programación se interese por estudiar o leer un poco sobre la parte en que JS accede al DOM y a la hoja de estilos.
De valores random para hacer colores, o fechas para validar campos de formulario ¡ni hablar!. Aprender javascript nos salva de todas las falencias que aún tiene CSS.
Realmente no es por teclearlo Furoya sino como dije, por una manía personal. Comencé mi sitio cuando no sabía nada de esto (ahora 0, antes -1) metiendo algunas cosas que ahora me obligan a ir manteniendo parches en sucesivas versiones de mi plantilla para que todo guarde la misma línea estética y por eso que lo sufro, comenté lo anterior.
ResponderEliminarPor otra parte Kseso supongo que un img.hide-img {display: none;} te haría casi el mismo efecto que la línea JS que propones. Cierto es que con eso la quitas del... ¿se llama DOM? pero total, si buscadores, agregadores y similares no tienen en cuenta esos añadidos o eliminados posteriores ¿para qué molestarse en sumarle al navegador una tarea de "limpieza"?
Sí. Tienes toda la razón, Oloman
EliminarLa línea de js es redundante (un seguro) al display: none. Pero en el momento de la construcción me resultó más sencillo ello que subir al head, buscar los estilos para las páginas items y añadir la regla css oportuna.
Porque en el home sí deseo que se muestre la imagen (tenga o no la clase hide-img)
Y si es por el trabajo del navegador por pasar la escoba... ahí me las den todas xD
(Parece que nosotros ya no podemos anidar comentarios.)
ResponderEliminarComo no tengo un blog, no termino de caer en esos detalles. Pero los entiendo. Quizá una solución sea justamente poner en los inventos agregados una clase extra para hacer así, eliminarlos con CSS usando 'display:none' si ya no son necesarios. Fue una de las opciones que tenía Kseso cuando armaba su nuevo diseño para ocultar esas imágenes duplicadas o para referencia del escript. Otra hubiese sido no poner la imagen, sino la ruta en una variable dentro del JS. Cuando no se use más, se elimina el javascript y esa 'var miImagenOculta="/ruta/imagen.png;' solamente será una línea inofensiva por ahí.
El punto importante (para mucha gente, a mí me nefrega) es eso que mencionaste sobre los buscadores. Habría que hablar con un verdadero experto en SEO que conozca las mañas de los bots para encontrar código importante. Sé positivamente que si no ponemos la imagen en una etiqueta pero sí su ruta, Google la encuentra igual y la presenta en los resultados. Pero no estoy seguro sobre qué hace si está oculta con estilos; no debería haber diferencia, si no tiene un atributo para forzar a que la ignoren también se debería indexar.
Claro que la distancia entre lo que deberían y lo que hacen ... puede ser abismal. He tenido discusiones lamentables con "expertos" de escaso criterio por estos temas, y encima que tengo poca paciencia. Así que nunca tuve (ni intenté buscar) un debate serio para entender un poco los mecanismos de indexación que tienen estos buscadores.
"(Parece que nosotros ya no podemos anidar comentarios.)
EliminarMea culpa, Furoya, de la poca cabeza y dedos como morcillas que tengo.
Toqueteé lo que no debía y... pero cuando tú comentaste ya debería haber estado funcionando la "anidación".
Y sobre el SEO y esas cosas, mejor no entro... por ignorancia supina xDD
Ah, bueno! ¡Entonces sirve de algo que hagamos de beta-testers!. Ya encontraste un nuevo ajuste para hacer.
EliminarY de los SEO mejor yo tampoco hablo, porque me amargo. Aunque debe ser como con los políticos : tienen una justificada mala prensa, pero hay algunos que realmente saben y son decentes.
Hola Kseso. Hoy estaba buscando justo esto para implementarlo en mi plantilla y recordé que tenías este artículo. Ya he intentado de todo, en el primer código incluso he usado los atributos que usa mi blog pero en realidad mi conocimiento de javascript es casi nulo y no logro implementarlo.
ResponderEliminarEl código me ha quedado de éste modo una vez que he cambiado los ajustes para tratar de que funcionara.
[code]
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
document.querySelector('h3').style.backgroundImage =
'url(' + document.querySelector('.post-body.entry-content img').src + ')';
document.querySelector('.post-body.entry-content img.hide-img').remove();
//]]>
</script>
</b:if>
[/code]
Creí que se trataba de los estilos así que los agregué, pero aún después de esto no he podido hacer que funcione. Espero puedas ayudarme.
Saludos.
Hola Sergio
EliminarCreo que se te pasó el nombre (dir) del blog para poder ver in situ el tema.
Un saludo
Oh sí. Perdona, creí haberlo puesto. He utilizado un blog de pruebas que tiene la misma plantilla base que el blog en el que quiero implementarlo.
Eliminarenlace a plantilla de pruebas
Ahora sí espero haber dado la información necesaria para resolver mi duda.
Saludos.
La respuesta, Sergio, la da Furoya en el comentario nº 3:
Eliminar"El código (si se "aparece" antes de la carga de las imágenes y comentarios a modificar) puede ser más complejo al agregarle listeners..."
Esto es, el script carga (y se ejecuta) antes de la construcción del DOM por lo que no hace nada.
Sin embargo, si lo cambias del 'head' a otra parte del documento posterior a al título y la imagen verás que sí hace su cometido.
O al menos a mi si me funcionó usando la cónsola como puedes ver en la siguiente imagen:
[img]https://1.bp.blogspot.com/-p_EBs08Izt4/WL1Oy8FRpwI/AAAAAAAANZE/YMe1y3IMGU0aQKR5cJdqYx4dp4rakwDzgCLcB/s1200/scpt.png[/img]
Un saludo
Hola Sergio Medina y Kseso.
EliminarOtra posible solución es usar dentro del CDATA una función (anónima) con un evento para que se dispare cuando el documento ya esté cargado. Sin embargo, esto tiene un inconveniente (casi diríamos, una molestia) cuando se trata de blogs o sitios con contenido que tiene mucho relleno desde el server; y es que si en la url hay un hash que apunta a algún sitio de la página, el navegador va a saltar hasta ahí apenas se cargue, y recién después ejecuta el escript. El resultado de la combinación de agregado de código via servidor, y/o el cambio de tamaños y posiciones a través de JS es que el punto a donde salta el scroll puede quedar en cualquier sitio, porque el navegador ya hizo su trabajo con el hash y ni le importan los nuevos cambios de contenido y formato que redimensionen el documento.
Es por eso que coincido con la sugerencia de ubicar estos códigos inmediatamente debajo de lo que van a modificar. No será lo más prolijo, pero la sugerencia de Kseso es seguro lo más práctico.
Un saludo.
Muchas gracias Kseso y Furoya.
EliminarAl final lo he consguido
[img]https://3.bp.blogspot.com/-oXiQQFPCdFQ/WL8z7T7hKmI/AAAAAAAAGpE/qsDBjAAZdxEsG3tuADzATHSmg_RioyZpACLcB/s1600/Imagen2.png[/img]
Sí había leído el comentario nº3 pero no entendí la parte que se menciona, ahora he intentado ponerlo antes del cierre de [code]</body>[/code] y ha funcionado correctamente, ahora sólo queda jugar con el CSS.
Dejo aquí como lo he solucionado por si a alguien le pasa los mismo.
Muchas gracias por la ayuda