1

¡Hola!

Me gustaría conseguir lo siguiente:

Tener una imagen a la que pueda replicar en varios lugares de la web Y que al cambiar esta imagen se cambien en todos estos lugares a la vez.

Pero no sé cómo hacer la llamada en el código a través del css o html para que recoja esta url de la imagen y así evitar repetirla a mano en cada sección de la web.

Por ejemplo, si la imagen se llama estrellas.png y mañana la quiero cambiar a otra foto, conseguir que se cambie a la vez en todos los lugares donde haya hecho la llamada a esta foto.

¿Me podéis ayudar?

muchas gracias!

3 respuestas 3

1

si,primero elige donde quieres poner la imagen y que se llame de cierta manera, y cuando quieras cambiar la imagen por otra, simplemente llamas la imagen con el mismo nombre que tenia la otra y ya esta. espero que te ayude

3
  • luego tendras que crear un archivo css. y depende donde quieras poner la imagen cosa que no especificas si es en el cuerpo en una tabla en el head en el footer . en un selector lo abres tipo div{ codigo css background .. imagen ...} y con eso estaria todo ok. aa y luego a ese archivo lo llamas desde la cabecera de cualquier html para que se replique en todo.
    – Kaneda2K2
    el 26 jun. 2022 a las 9:50
  • ¡Qué fácil y qué buena solución! La idea es crear reseñas y que la imagen sean estrellas de valoración. Esto iría en el body a lo largo de una landing page. Quería evitar repetir todo el rato la url de la foto con la etiqueta img y no sé si habría alguna forma de llamar a la foto o si no importa que cada reseña tenga una etiqueta img con la misma imagen. ¿Cuál sería la opción más correcta para que no afecte a la velocidad de carga?
    – Jose
    el 26 jun. 2022 a las 11:13
  • como bien indico tendrás que llamar a un archivo css en el head ( <head> y </head> : <link href="styles/style.css" rel="stylesheet" type="text/css"> algo así )de la pagina y ese css contiene la imagen para que no tengas que estar llamando todo el rato a la img con el tag si no que se carga automaticamente desde el css. los tag del css crean referencias que luego son llamados desde todas las paginas por lo que solo tienes que añadir esa linea de codigo.
    – Kaneda2K2
    el 26 jun. 2022 a las 11:21
1

Podrias hacerlo de esta manera en css. Primero estableces las variables en el docuemnto:

:root {
  --img: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQXVWznRi6cx_beqz1zTHHkl7dxaxM5dXKMp3iC4_sNDzORKhzUracXI8&s=10);
}

Y luego lo llamas en el atributo que vayas a utilizarlo

div.prueba {
    background-image: var(--img);
    background-size: cover;
    height:100px;
    width: 100px;
}

Dentro del html tendria que imprimir la imagen como fondo del contenedor que escogiste:

<div class="prueba"></div>

Te pondría captura del resultado pero estoy desde mi celular y no me deja subir las capturas

Espero te ayude esta solución!

3
  • ¡Eres un genio Gabriel! Funcionó a la primera!! ¿Esto es puro CSS o también hay JS ? Lo digo por la variable (soy muy nuevo como ves) Y por último te quería preguntar : ¿Esta es la forma correcta de hacerlo verdad? Así no tendrá que incluir siempre una foto por cada línea de código sino que la recoge de la llamada. ¿Es más rápido a nivel de carga del navegador? Muchas gracias!
    – Jose
    el 26 jun. 2022 a las 18:32
  • Me alegro que te haya ayudado. Asi es, es puro CSS, yo diría que si es la forma correcta... Pero realmente, hay mucha formas de hacerlo... Ya todo dependería de lo que vas a desarrollar. En cuanto a la carga del navegador, hay muchos factores que afectan... Desde el peso de las imagenes, hasta el codigo no usado dentro de los archivos! Espero haber resuelto tu duda!. el 27 jun. 2022 a las 4:44
  • Si, lo has hecho ;) mil gracias! Te seguí con twitter pero no me dejó enviarte un mensaje. Espero que estemos en contacto. Tengo varios proyectos y vi que sabías php, te podría encargar algún trabajo más adelante si haces servicios. ¡Gracias!
    – Jose
    el 27 jun. 2022 a las 5:57
0

Ya que preguntaste sobre opciones en javascript, seguro que hay. No obstante, yo te ofrezco una solución en PHP para que puedas mostrar un logotipo a lo largo de todas tus páginas.

En algún momento (o desde ya) puedes empezar a familiarizarte con la función php include. Con ello podrás manejar no solo una imagen sino también toda una sección como un menú de navegación, por ejemplo, que se repita exactamente igual en cada página.

Si tuvieras que hacer algún cambio, solo cambias el archivo original en tu PHP y el cambio se refleja en todas las páginas. Te paso el código:

<!--Página 1
nombre de archivo: “index.php”
HTML headings, etc.-->
<head>

<!--Mira que hasta estilos le das a tu foto-->
<style>
.foto-semana{
background:aqua;
display:inline-block;
border: 3px solid red;
}
</style>
</head>
<body>
<div class="foto-semana">
<?php include 'pagina-con-foto-de-la-semana.php'; ?>
</div>
<!--con esa línea de código estás llamando a la página de la foto, tal como haces cuando llamas a un CSS o a cualquier imagen.-->
</body>

Y ahora la página del include donde vas a “INSERTAR” (por decirlo así) la imagen que quieres mostrar, procura que la IMAGEN esté en el mismo directorio, a modo de práctica, para que veas cómo funciona. Después ya te perfeccionas en ese tema de la RUTA (path) por si lo cambias de carpeta.

//Página 2
//Nombre del archivo: “pagina-con-foto-de-la-semana.php”
<img src="foto-seleccionada-1.jpg"; alt="El colaborador del mes"> 
//en esta parte sí, asegúrate de darte la ruta correcta;
//aquí estoy asumiendo que los 3 archivos: “index”, “pagina-con-foto-de-la-semana” y la “foto-seleccionada” están en el mismo directorio, en la misma carpeta.

Cabe añadir que para usar PHP necesitarás un servidor local y la ventaja de este INCLUDE es que, no solo se hace el cambio a un solo archivo, sino también que se hace UNA SOLA petición al servidor, UNA SOLA CARGA, ahorrando recursos. Prueba con una foto. Hay muchos tutoriales en Youtube sobre cómo instalar un servidor local. Si usas Mac, te recomiendo MAMP. Te conviene, sé lo que te digo.

Bottom line: NO HAY una sola solución para un problema. Están las no recomendables, las aceptables y las mejores. Evita las no recomendables y escoge la que te hace sentir más cómodo, la que te funcione, por ahora.

3
  • Buenísima solución! necesitaría alguien que me de alguna clase jeje tienes twitter o alguna forma de contactarte?
    – Jose
    el 27 jun. 2022 a las 15:30
  • @Jose, estoy en LInkedIn donde he tomado varios cursos. No sé si permitirán aquí poner contactos personales de otras redes. Puedes curiosear sobre lo que tengo en codepen. Hay cosillas que podrían interesarte como frontend developer. codepen.io/limakid
    – limakid
    el 27 jun. 2022 a las 20:59
  • Realmente, no seria esto recomendable... Pues, cargas el servidor con mas archivos cuando puedes simplificarlos (aunque es cierto que haces una sola petición)... Por lo general y lo que he visto que se suele hacer (no soy un experto en esto) es dividir la web en secciones que se codificara en cada uno de sus archivos independientes, cosa que al final, solo llamas los componentes que re utilizarás en tu nuevo diseño y no, codificas todo desde cero el 28 jun. 2022 a las 2:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.