Soporte » Diseño – Temas y plantillas » Seleccionar una imagen diferente de cabecera en la plantilla de los post

  • Resuelto ozecai

    (@ozecai)


    Hola, he modificado el tema Appointment para que coja la imagen destacada de las páginas como cabecera. Para ello (gracias @almendron) hice esto:

    1) Editar el archivo index-banner.php

    2) Sustituir <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 ?>

    De esta forma tengo en el background de cada página la imagen destacada de esa página, por ejemplo estas:

    Proyecto Cibermov

    Equipo de Investigación

    Publicaciones

    El problema es que con ese cambio, cuando entras en un post concreto también pone ahí la imagen destacada del post y no me interesa eso pues queda mal, tal que así:

    Libro: Videoactivismo y Movimientos Sociales

    Así que me interesaría o bien que el cambio para poner ahí de fondo la imagen destacada afectara solo a las páginas (no a los post), o bien que en la plantilla de los post no hiciera eso, o quizás otra opción es que excluyera eso de una categoria, ya que todos los post los tengo en una llamada «noticias». Para rematar, lo ideal sería que en los post la cabecera que mostrara fuera la de una página concreta, en concreto la de «Noticias» que es esta: http://grupo.us.es/compoliticas/noticias/ pero me conformaría con poder ponerle a los post en la cabecera una imagen fija concreta de fondo, definiendo su url.

    • Este debate fue modificado hace 2 años, 8 meses por ozecai.
Viendo 15 respuestas - 1 de 15 (de 19 total)
  • Moderador almendron

    (@almendron)

    Hay otra opción que sería:
    1) Crear una carpeta dentro de wp-content llamada «img-header»
    2) Crear un campo personalizado llamado «img-header». En este campo iría el nombre de la imagen a usar en background.
    3) El código cambiaría aunque en esencia sería lo mismo. Obtener la URL a partir del valor del campo personalizado y meter la variable en el style.

    Lo del código te lo miro cuando pueda.

    Ok gracias de nuevo, sigo trasteando a ver.

    Moderador LGrusin

    (@lgrusin)

    Una opción puede ser crear un archivo llamado, por ejemplo, index-pagina.php que crearás del archivo modificado index-banner.php y dejas el index-banner.php como venía de origen.

    En el archivo page.php cambias:
    get_template_part('index','banner');
    por
    get_template_part('index','pagina');

    De esta manera la modificación sólo afecta a las páginas.

    Un saludo

    Moderador almendron

    (@almendron)

    La misma idea de @lgrusin pero sin necesidad de crear otro archivo. Sustituye el código que te puse por:

    <?php if (is_page()) : ?>
    	<?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 ?>
        
    <?php else : ?>
    	<div class="page-title-section">
    <?php endif ?>
    • Esta respuesta fue modificada hace 2 años, 8 meses por almendron.
    Moderador almendron

    (@almendron)

    De todas formas, el mayor control lo obtienes con el campo personalizado.

    Lo de @lgrusin funciona. Solo que tuve que cambiar el parámetro no solo en page.php sino también en las otras plantillas de página como fullwidth.php o blog-right-sidebar.php

    Ahora solo falta asignar una imagen fija en index-banner.php pues como me recomendaste está el archivo de origen que no tiene imagen en el background. Yo al inicio de esta aventura le puse una en el CSS añadiendo el parámetro background-image así:

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

    Pero imagino que si lo hago ahora en el CSS eliminará la función de poner ahí la imagen predeterminada en las páginas, así que habría que hacerlo en el index-banner.php ¿no?

    Moderador almendron

    (@almendron)

    El código siguiente solo actúa en caso de que sea una página y asigna una imagen concreta en caso de que no tenga una imagen destacada.

    <?php if (is_page()) : ?>
    	<?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=='') : ?>
    		<?php echo '<div class="page-title-section" style="background-image: url(url-imagen-por defecto)">' ?>
    		<?php else : ?>
    		<?php echo '<div class="page-title-section" style="background-image: url(' . $image_url . ')">' ?>
    	<?php endif ?>
    <?php else : ?>
    	<div class="page-title-section">
    <?php endif ?>

    Sustituye url-imagen-por-defecto por la URL de la imagen que debe aparecer en caso de que la página no tenga asignada una imagen destacada.

    donde pongo ese código? lo he puesto en index-banner.php y también en el index-pagina.php que he creado, pero no coge la imagen de la url aunque lo demás sigue funcionando.

    Así queda index-banner.php

    <!-- Page Title Section -->
    <?php if (is_page()) : ?>
    	<?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=='') : ?>
    		<?php echo '<div class="page-title-section" style="background-image: url(http://grupo.us.es/compoliticas/wp-content/uploads/2017/05/baner-noticias.png)">' ?>
    		<?php else : ?>
    		<?php echo '<div class="page-title-section" style="background-image: url(' . $image_url . ')">' ?>
    	<?php endif ?>
    <?php else : ?>
    	<div class="page-title-section">
    <?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>
    

    Y así el index-pagina.php

    <!-- Page Title Section -->
    <?php if (is_page()) : ?>
    	<?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=='') : ?>
    		<?php echo '<div class="page-title-section" style="background-image: url(http://grupo.us.es/compoliticas/wp-content/uploads/2017/04/baner-noticias.png)">' ?>
    		<?php else : ?>
    		<?php echo '<div class="page-title-section" style="background-image: url(' . $image_url . ')">' ?>
    	<?php endif ?>
    <?php else : ?>
    	<div class="page-title-section">
    <?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>

    Ahora mismo single.php llama al banner, así:

    get_template_part('index','banner'); ?>

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

    (@almendron)

    No hace falta que llames a ningún otro archivo. Déjalo todo como lo tenías al principio y:

    1) Edita el archivo index-banner.php

    2) Sustituye <div class=»page-title-section»> por el código que te he puesto. La ruta a la imagen por defecto que sea absoluta.

    Vale, ya entiendo el error, lo que dices funciona, pero como indicas que solo se aplique a las páginas (y lo hace perfecto, si no hay imagen destacada pone la del enlace), pues no lo hace en los post que es precisamente donde quiero hacerlo. Vamos que entiendo que lo que falla es esto:

    <?php if (is_page()) : ?>

    Habría que quitarlo de alguna forma o añadir algo así como <?php if (is_post()) : ?> para que haga lo mismo en los post o incluso permita tener en paginas y post una imagen diferente si no hay ninguna destacada.

    Moderador almendron

    (@almendron)

    Borrón y cuenta nueva.
    Hay que hacer lo del campo personalizado. Esto te permitirá poner la imagen que tú quieras y donde quieras.
    De momento, ve haciendo lo siguiente:
    1) Crea la carpeta «img-header» dentro de la carpeta wp-content.
    2) Edita una página o post donde quieras cambiar la imagen de cabecera. Crea un campo personalizado (si no te sale, ve a «Opciones de pantalla» y marca esa opción) y en valor pones el slug de la página de la entrada.

    Te paso el código en cuanto tenga un rato y lo pueda mirar.

    Ok gracias.

    Moderador almendron

    (@almendron)

    1) Crea la carpeta “img-header” dentro de la carpeta wp-content.
    2) Edita una página o post donde quieras cambiar la imagen de cabecera. Crea un campo personalizado (si no te sale, ve a “Opciones de pantalla” y marca esa opción) y en valor pones el slug de la página de la entrada. El campo personalizado debe llamarse img-header.
    3) Edita el archivo «index-banner.php». Sustituye <div class="page-title-section"> por lo siguiente:

    <?php
    $nomimgheader='';
    $urlimgheader='';
    $nomimgheader = get_post_meta($post->ID, 'img-header', true);
    if($nomimgheader !== '') :
    	$urlimgheader = '/wp-content/img-header/' . $nomimgheader . '.jpg';
    	if(file_exists(ABSPATH . $urlimgheader)) :
    		echo '<div class="page-title-section" style="background-image: url(' . $urlimgheader . ')">';
    		else :
    		echo '<div class="page-title-section">';
    	endif;
    else :
    	echo '<div class="page-title-section">';
    endif;
    ?>

    4) Sube la imagen que quieras que aparezca a la carpeta img-header. Formato jpg. Recuerda que el nombre de la imagen debe ser el mimso que has puesto en el campo personalizado.

    «Recuerda que el nombre de la imagen debe ser el mimso que has puesto en el campo personalizado»

    ¿Te refieres a que la imagen se llame img-header.jpg?

    En el campo personalizado le he puesto de nombre «img-header» y valor el slug de la entrada «ii-edicion-congreso-internacional-move-net» pero no sale.

    De todas formas al editar el archivo “index-banner.php” sustituyendo el <div class="page-title-section"> por lo que me dices, he anulado el código anterior que hacía que las páginas tuvieran la imagen destacada en cabecera. Recuerda que ya sustituí <div class="page-title-section"> por el código que me diste:

    <?php if (is_page()) : ?>
    	<?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=='') : ?>
    		<?php echo '<div class="page-title-section" style="background-image: url(http://grupo.us.es/compoliticas/wp-content/uploads/2017/05/baner-noticias.png)">' ?>
    		<?php else : ?>
    		<?php echo '<div class="page-title-section" style="background-image: url(' . $image_url . ')">' ?>
    	<?php endif ?>
    <?php else : ?>
    	<div class="page-title-section">
    <?php endif ?>

    Con ese código anterior todo funcionaba perfecto, las páginas mostraban la imagen destacada en el banner y los post no lo hacían, como debe ser. Lo único que quería afinar es que los post mostraran en el banner una imagen fija (no la imagen destacada del post ya que esta se usa en la portada y vistas previas y por tanto tiene otro tamaño y proporciones).

    Desde mi ignorancia, si ese código empieza por <?php if (is_page()) : ?> y afecta solo a las páginas, quizás otro que empiece por algo como <?php if (is_post()) : ?> e indique que en ese caso ponga como baner una imagen concreta, definiendo su url, sería lo ideal, además así no habría que indicarlo el campo personalizado de los post cada vez que se publique uno, siempre pillaría la imagen definida ahí.

    No sé si es mucho pedir y es viable…

    Moderador almendron

    (@almendron)

    En el campo personalizado le he puesto de nombre “img-header” y valor el slug de la entrada “ii-edicion-congreso-internacional-move-net”

    1) CORRECTO.El nombre de la imagen (el valor del campo personalizado) debe ser el slug de la página o post donde quieras que aparezca la cabecera correspondiente (En realidad, podría poner el que quisieras pero poniendo el slug se identifica bien qué imagen va en qué página)

    2) Tienes que anular todo lo anterior y poner el código que te acabo de pasar.

    3) Con lo último que te he pasado podrás poner la imagen que quieras en la página o post que desees. No hace falta que sea la imagen destacada ni ninguna otra subida a la página o al post. Si no has puesto nada en el campo personalizado o nos has subido la imagen, muestra el valor por defecto.

    4) Solo tienes que subir vía FTP a la carpeta «img-header» (dentro de wp-content) las imágenes con el nombre que hayas puesto en el campo personalizado.
    Ejemplo: sube «ii-edicion-congreso-internacional-move-net.jpg» a dicha carpeta.

    • Esta respuesta fue modificada hace 2 años, 8 meses por almendron.
    • Esta respuesta fue modificada hace 2 años, 8 meses por almendron.
Viendo 15 respuestas - 1 de 15 (de 19 total)
  • El debate ‘Seleccionar una imagen diferente de cabecera en la plantilla de los post’ está cerrado a nuevas respuestas.