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

[iristof]

Hola a Tod@s

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

[ArturoGallegos]

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.

[iristof]

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

[ArturoGallegos]

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.

[iristof]

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

[zanguanga]

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:

background-image: url('images/bg13.png');
 

Normalmente no necesitas añadir una clase, pues el mismo WordPress te la crea.

[iristof]

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

[ArturoGallegos]

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.

@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.

[iristof]

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

[iristof]

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

[ArturoGallegos]

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.

[iristof]

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