Soporte » Diseño – Temas y plantillas » imagen destacada como background en el CSS

  • Resuelto ozecai

    (@ozecai)


    Quiero poner como imagen de fondo en una parte de las páginas la imagen destacada de la página en el CSS, he logrado poner una imagen usando el enlace, pero lo que me gustaría es que cogiera la imagen destacada de la página y no lo consigo. El código que tengo ahora es este:

    .page-title-section .overlay {
    	height: 100%;
    	padding: 50px 0 48px;
    	position: relative;
    	width: 100%;
    background-image:url(url_de_una_imagen_concreta);

    Supongo que en la url se podrá poner algo para que en vez de una url particular apunte a la imagen destacada de la página en cuestión, pero no lo consigo. Algo como:

    .page-title-section .overlay {
    	height: 100%;
    	padding: 50px 0 48px;
    	position: relative;
    	width: 100%;
    background-image:url(url_de_la_imagen_destacada_de_la_página);

    He probado poniendo the_post_thumbnail_url() pero nada, quizás en funciones haya que indicar algo o quizás no ponga bien el código…

Viendo 12 respuestas - 1 de 12 (de 12 total)
  • Moderador almendron

    (@almendron)

    Que yo sepa, no se puede usar una función de WordPress en el CSS y tampoco PHP.
    No obstante, he encontrado una pregunta similar a la tuya en el hilo de otro foro que tal vez funcione (no lo he probado):

    //this retrieve the full version of image
    $image_data = wp_get_attachment_image_src ( get_the_post_thumbnail( $post->ID), 'full' );
    $image_url = $image_data[0];
    echo '<li class="produkt" style="background: url('. $image_url .')">';

    Tendrás que afinar los parámetros de «get_the_post_thumbnail».
    Date cuenta que en el ejemplo está puesta la imagen en un «li». Podría ser, por ejemplo, «div style=»background…….»

    Este es el hilo: https://wordpress.stackexchange.com/questions/221704/set-post-thumbnail-as-background

    Hay unos cuantos más. Busca en google «background-image thumbnail» (sin las comillas).

    Moderador almendron

    (@almendron)

    Me olvidaba: eso no va en la hoja de estilos sino en el archivo del tema que corresponda.

    Lo primero muchas gracias, había visto ese hilo pero tengo muchas dudas, soy un novato osado pero no sé mucho de php, ni de css, aunque con el método de prueba y error me apaño.

    Según veo en ese hilo, lo que parece que hace es poner la imagen destacada de una categoría concreta («produkt»), yo lo que quiero es que en cada página ponga la imagen destacada de esa página de fondo, independientemente de la categoría de la página. Además ese fondo lo quiero en un sitio concreto, en la cabecera, algo que ya he ubicado pero en el css.

    La página con la que estoy trabajando es esta: http://grupo.us.es/compoliticas/

    Como se puede ver, poniendo el enlace en el CSS he logrado que en las páginas salga como fondo en la cabecera una imagen concreta: http://grupo.us.es/compoliticas/proyecto/

    Así en todas las páginas menos en el home sale la misma imagen, en concreto esta: http://grupo.us.es/compoliticas/wp-content/uploads/2017/04/manifa.jpg

    Lo que me gustaría es que ahí saliera en cada página la imagen destacada que le ponga a esa página. Por aclarar lo que quiero hacer.

    Respecto a cómo hacerlo, realmente me hago un lío para saber en que plantilla tengo que poner el código php, por si sirve de algo estoy usando el tema Appointment red, pero no se si debo tocar el código en la plantilla «Fullwidth Plantilla de Página (fullwidth.php)» ya que las páginas están a ancho completo o en «Single Page (page.php)» o en algún otro sitio, tampoco sé exactamente en que lugar de esas plantillas poner el código ni si tengo además que poner algo en el CSS para que lo de poner la imagen destacada de fondo lo haga justo donde quiero. Al menos sé en que parte del CSS se hace, pues ya he logrado poner una imagen, aunque sea la misma para todas las páginas.

    Quizás me estoy lanzando demasiado pero puede que con un poco de ayuda sea capáz de hacerlo 😉

    Moderador almendron

    (@almendron)

    Te digo algo en cuanto pueda. Mañana casi seguro.
    De momento, te dejo esto para que no se me olvide:

    <div class="page-title-section" style="background-image:'<?php echo $imgdestacada;?>'">

    Gracias, sigo probando a ver…

    Moderador almendron

    (@almendron)

    1) Edita el archivo index-banner.php

    2) Sustituye <div class="page-title-section"> por lo siguiente:

    <?php
    //this retrieve the full version of image
    $image_data='';
    $image_url='';
    $image_data = wp_get_attachment_image_src ( get_the_post_thumbnail( $post->ID), 'full' );
    $image_url = $image_data[0];
    ?>
    <?php if ($image_url='') : ?>
    <div class="page-title-section">
    <?php else : ?>
    <div class="page-title-section" style="background-image:'<?php echo $image_url;?>'">
    <?php endif ?>

    A ver si lo entiendo, he sustituído lo que dices, solo esa línea dejando todo lo demás quedando el archivo index-banner.php así:

    <!-- Page Title Section -->
    <?php
    //this retrieve the full version of image
    $image_data='';
    $image_url='';
    $image_data = wp_get_attachment_image_src ( get_the_post_thumbnail( $post->ID), 'full' );
    $image_url = $image_data[0];
    ?>
    <?php if ($image_url='') : ?>
    <div class="page-title-section">
    <?php else : ?>
    <div class="page-title-section" style="background-image:'<?php echo $image_url;?>'">
    <?php endif ?>	
    			<div class="overlay">
    			<div class="container">
    			<div class="row">
    				<div class="col-md-6">
    					<div class="page-title"><h1><?php the_title(); ?></h1></div>
    				</div>
    				<div class="col-md-6">
    				<ul class="page-breadcrumb">
    						<?php if (function_exists('qt_custom_breadcrumbs')) qt_custom_breadcrumbs();?>
    					</ul>	
    				</div>
    			</div>
    		</div>	
    	</div>
    </div>
    <!-- /Page Title Section -->
    <div class="clearfix"></div>

    Me seguía saliendo la misma imagen que puse en el CSS, supongo que se imponía sobre el php de ese archivo, así que quité el parámetro background que había añadido, es decir este:

    background-image:url(url_de_una_imagen_concreta);

    Y ahora ya no sale esa imagen, pero tampoco la destacada de la página sino el fondo rojo que tenía predeterminado el tema, así: http://grupo.us.es/compoliticas/publicaciones/

    Por supuesto me he asegurado de que esa página tiene una imagen destacada. ¿Algo he hecho mal?

    • Esta respuesta fue modificada hace 2 años, 8 meses por ozecai.
    Moderador almendron

    (@almendron)

    Espera que estoy probando el código. De momento, he conseguido recuperar la URL de la imagen destacada pero tengo que seguir probando.

    Moderador almendron

    (@almendron)

    Ya lo tengo. Es que el código siempre hay que comprobarlo y hasta ahora no había tenido tiempo.

    1) Edita el archivo index-banner.php

    2) Sustituye <div class="page-title-section"> por lo siguiente:

    <?php
    //this retrieve the full version of image
    $image_data='';
    $image_url='';
    $image_data = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full', false );
    $image_url = $image_data[0];
    ?>
    <?php if ($image_url=='') : ?>
    <div class="page-title-section">
    <?php else : ?>
    <?php echo '<div class="page-title-section" style="background-image: url(' . $image_url . ')">' ?>
    <?php endif ?>

    FUNCIONAAAAA! Mil gracias compa, ha sido un placer!

    Moderador almendron

    (@almendron)

    De nada. Un saludo.

    Oye y ya por afinar aún más si puede ser, es posible hacer que en la página que muestra los post completos, en lugar de coger y poner ahí la imagen del post, coja la de una de las páginas?.

    Por ejemplo tengo una página de «noticias» con su cabecera, es esta: http://grupo.us.es/compoliticas/noticias/

    Pero luego si entro en una noticia, también coge la imagen de esa noticia para la cabecera, por ejemplo aquí: http://grupo.us.es/compoliticas/libro-videoactivismo-y-movimientos-sociales/ y claro no queda bien.

    Lo ideal sería que en todas esas noticias mantuviera la cabecera de la página «noticias».

    Voy haciendo pruebas a ver…

Viendo 12 respuestas - 1 de 12 (de 12 total)
  • El debate ‘imagen destacada como background en el CSS’ está cerrado a nuevas respuestas.