Foros del Web » Creando para Internet » Sistemas de gestión de contenidos » WordPress »

[SOLUCIONADO] div y img src en header.php wordpresss

Estas en el tema de div y img src en header.php wordpresss en el foro de WordPress en Foros del Web. Hola a [email protected] Soy nuevo en este foro y necesito vuestra ayuda. Nose En el header.php he puesto este codigo: <div class="bg1"><img class="mimagen" src="<?php echo ...
  #1 (permalink)  
Antiguo 22/10/2014, 08:21
 
Fecha de Ingreso: octubre-2014
Mensajes: 7
Antigüedad: 7 años, 7 meses
Puntos: 0
div y img src en header.php wordpresss

Hola a [email protected]

Soy nuevo en este foro y necesito vuestra ayuda. Nose

En el header.php he puesto este codigo:

<div class="bg1"><img class="mimagen" src="<?php echo get_stylesheet_directory_uri(); ?>/images/bg13.png" /></div>

y con el css le doy estilo y funciona bien.

Pero lo que quiero es conseguir llamar a la imagen "bg13.png" desde el css
.bg1{background-image: url('images/bg13.png'); max-width:100%; }

y no lo consigo. Que codigo tengo que cambiar aqui:
<img src="<?php echo get_stylesheet_directory_uri(); ?> ?" />
para que me añada la imagen del css que yo quiera. Es que no va a ser una imagen fija.

Muchas Gracias

Saludos
  #2 (permalink)  
Antiguo 22/10/2014, 09:41
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 14 años, 2 meses
Puntos: 1146
Respuesta: div y img src en header.php wordpresss

Digo no es lógico que si quieres agregarla desde el CSS hay que agregarle una clase o algún identificador para poder aplicarle los estilos?

Sumado a eso deja de usar <img> en su lugar usa algún otro elemento acorde y semántico... si quieres seguir usando <img> coloca en src un gif transparente y con CSS dale las medidas que necesites.
  #3 (permalink)  
Antiguo 22/10/2014, 10:39
 
Fecha de Ingreso: octubre-2014
Mensajes: 7
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: div y img src en header.php wordpresss

Gracias por contestar ArturoGallegos

Tal vez me he explicado mal, pero como he dicho anteriormente la clase con la que le doy estilo y me funciona bien es con class="bg1"

<div class="bg1"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/bg13.png" /></div>

.bg1{
max-width:100%;
height: auto;
background-repeat: no-repeat;
background-position: center 230px;
left:0px;
position:absolute;
}


y de esta otra forma tambien me funciona pero mal. porque estoy usando un diseño adaptativo o responsive y al aplicarlo asi deja de ser lo.

<div class="bg1"></div>

.bg1{
background-image: url('images/bg13.png');
width:1600px;
height: 400;
background-repeat: no-repeat;
background-position: center 230px;
top:240px;
left:0px;
position:absolute;
}


Por eso queria saber saber si se puede manipular <?php echo get_stylesheet_directory_uri(); ?>?"
para que me añada la imagen del css

Gracias de nuevo

Un saludo
  #4 (permalink)  
Antiguo 22/10/2014, 11:34
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 14 años, 2 meses
Puntos: 1146
Respuesta: div y img src en header.php wordpresss

Ok, vamos a ver si es un diseño responsive, con CSS tienes dos alternativas

1.- background-size este es compatible con casi todos los navegadores, como siempre el problema viene con IE8 e inferiores.

2.- usa media queries para cambiar la imagen según la resolución de los dispositivos.
  #5 (permalink)  
Antiguo 22/10/2014, 12:59
 
Fecha de Ingreso: octubre-2014
Mensajes: 7
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: div y img src en header.php wordpresss

Hola de nuevo y gracias por tu interes

Ya habia pensado en toquetear los media queries pero me parece demasiado trabajo
cambiar alturas, distancias etc para cada tamaño de pantaña, aparte de que tampoco tengo mucha idea de como adaptarla a cada dispositivo por ejemplo.

@media all and (max-width:650px) cuanto tengo que dejar de margen top, el padding y que altura tiene que tener para que se adapte al menu y parte del slide, etc...

Ademas he retocado tanto el theme que ya casi es como si lo hubiera creado yo.

Pensaba que se podia manipular por medio de php diciendole la ruta donde esta la imagen

<?php echo get_stylesheet_directory_uri(); ?>

pero sin expedificar el nombre del archivo "/images/bg13.png"

Gracias de nuevo
  #6 (permalink)  
Antiguo 23/10/2014, 08:51
Avatar de zanguanga
Moderadora
 
Fecha de Ingreso: julio-2009
Ubicación: España
Mensajes: 1.686
Antigüedad: 12 años, 10 meses
Puntos: 429
Respuesta: div y img src en header.php wordpresss

Cita:
lo que quiero es conseguir llamar a la imagen "bg13.png
No entiendo cual es el problema, identifica la clase que te devuelve el código HTML y añade la imagen al fondo en el CSS, no entiendo que tengas que tocar el PHP para eso.

Código CSS:
Ver original
  1. background-image: url('images/bg13.png');

Normalmente no necesitas añadir una clase, pues el mismo WordPress te la crea.
__________________
Mi blog personal | Mi G+
  #7 (permalink)  
Antiguo 23/10/2014, 11:53
 
Fecha de Ingreso: octubre-2014
Mensajes: 7
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: div y img src en header.php wordpresss

Hola zanguanda

Lo que quiero es llamar a la imagen "bg13.png" con alguna funcion de php para wordpress o de alguna forma.

Si has leido lo que he expuesto hasta ahora, te habras dado cuenta que lo que me dices es lo que hago y todo esta bien.

El problema es que voy a tener unos 8 o 10 css diferentes que se van a cargar semi-aleatoriamente.
Y esa imagen "bg13.png" va ha ir cambiando.

Si la llamo de esta forma <div class="bg1"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/bg13.png" /></div>

en el theme queda estupendamente porque es un diseño adaptativo y solo tendria que tocar un poco los margenes para adaptarlo a los diferentes dispositivos. Pero de esta forma la imagen va a ser siempre la misma

En cambio si la llamo con <div class="bg1"></div> la imagen va a ser diferente, la que yo quiera, pero para adaptarla a las diferentes pantallas tengo que tocar todo... margenes, dimensiones, padding, etc....

Es por eso por lo que me gustaria llamar a las imagenes de esta forma

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/bg13.png" /> y con alguna funcion o de alguna forma cambiar bg13.png por bg14.png o bg15.png o bg28.png

he probado : <img src="<?php echo get_stylesheet_directory_uri(); ?>" /> y desde el css poner la ruta pero no me coge la imagen, sale la cruz roja de que falta imagen


Gracias

Saludos
  #8 (permalink)  
Antiguo 23/10/2014, 14:45
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 14 años, 2 meses
Puntos: 1146
Respuesta: div y img src en header.php wordpresss

Yo siento que te estas complicando demasiado... si lo que pretendes es mostrar una imagen en funcion al tamaño de pantalla, vas a terminar haciendo todo otra vez, trabajando el doble o triple solo por empeñarte y no querer hacer las cosas con CSS.

Cita:
@media all and (max-width:650px) cuanto tengo que dejar de margen top, el padding y que altura tiene que tener para que se adapte al menu y parte del slide, etc...
Usa tu editor de imágenes y cambia el tamaño de tu diseño a 650px y obtendrás las nuevas medidas, o bien puedes manejar porcentajes.... por ejemplo si tu ancho total sera 1024px y tu elemento mide 300px + 15px margen

los 300px en porcentaje lo sacas haciendo una simple regla de 3

1024px = 100%
300px = ?

300/1024 = 0.29 x 100 = 29%

Aunque esto ya no es tanto un diseño responsivo sino fluido pero igual sirve bastante bien.
  #9 (permalink)  
Antiguo 24/10/2014, 02:09
 
Fecha de Ingreso: octubre-2014
Mensajes: 7
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: div y img src en header.php wordpresss

Levas toda la razón del mundo. Llevo 3 días estancado con esta mier.. dandole vueltas. Voy hacer lo que estas diciendo y me quito de problemas.

Muchas Gracias por tu ayuda.

Saludos
  #10 (permalink)  
Antiguo 24/10/2014, 05:01
 
Fecha de Ingreso: octubre-2014
Mensajes: 7
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: div y img src en header.php wordpresss

No me vale la solucion, lo he probado y el resultad o es desastroso. Intentare subir alguna foto de muestra para que lo veas, voy a volver a abrir este tema a ver si me podeis echar una mano

Gracias
  #11 (permalink)  
Antiguo 24/10/2014, 08:45
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 14 años, 2 meses
Puntos: 1146
Respuesta: div y img src en header.php wordpresss

Como algunos dicen por aquí, en un foro de programación un código dice mas que mil imágenes... de poco servirán tus imágenes para poderte ayudar. muestra tus imágenes y tu código haber si hay algo en que podamos ayudar.... pero lo ideal es ver tu sitio, para ver el problema en acción.
  #12 (permalink)  
Antiguo 25/10/2014, 11:03
 
Fecha de Ingreso: octubre-2014
Mensajes: 7
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: div y img src en header.php wordpresss

Ahora si que si esta solucionado, probado y funcionando. No puedo mostrar el sitio porque estoy trabajando en localhost.

He creado una condición (creo que se dice asi) llamando a cada pagina y dependiendo de que pagina sea muestre una imagen o otra


Código PHP:
if ( is_page_template( 'home-page1.php' ) ) { ?>
    
    <div class="bg1"><img class="mimagen" src="<?php echo get_stylesheet_directory_uri(); ?>/images/bg13.png" /></div>
<?php
    
} elseif  ( is_page_template'home-page2.php' ) ) { ?>
    
    <div class="bg1"><img class="mimagen" src="<?php echo get_stylesheet_directory_uri(); ?>/images/bg_14.png" /></div>    
            
<?php } else { ?>   
    <div class="bg1"><img class="mimagen" src="<?php echo get_stylesheet_directory_uri(); ?>/images/bg15.png" /></div>
               
<?php
    
} elseif  ( is_page_template'home-page3.php' ) ) { ?>
    
    <div class="bg1"><img class="mimagen" src="<?php echo get_stylesheet_directory_uri(); ?>/images/bg_01.png" /></div>

ETC,ETC,ETC......


Gracias de nuevo por tu ayuda.

Saludos

Última edición por iristof; 25/10/2014 a las 11:08 Razón: me falta un comentario

Etiquetas: img, php, src
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:10.