Banner Size On Pages

  • Hello,

    You helped me to correct the banner sizing on the front page of the site. Now I cannot get the header image or featured image to scale right on the other pages (About, Get Involve, Donate).

    https://flbplaygroundproject.com/about/

    As you will see I tried to change the background from “cover” to “contain” and this at least displays the whole image, but it is tiny.

    Can you please assist?

    Thanks !

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author lyrathemes

    (@lyrathemes)

    Hi – if you’d like to use “contain”, you’ll need a larger image. Maintaining the same aspect ratio, create an image at least twice the size and try that.

    Thread Starter dadislotroguides

    (@dadislotroguides)

    I doubled the size and the image on the site did not change ??

    I am not bound to using “contain”, I did so because that was the fix for the front page issues I was having.

    If there is another way for this to display properly I am all ears.

    Theme Author lyrathemes

    (@lyrathemes)

    try replacing all the content of parts/banner-featured-image.php with this:

    <?php
/**
 * The template part for displaying the featured image as the top banner
 *
 * @package vega
 */
?>
<?php 
$src = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'banner-featured-image' );
if($src) { $url = $src[0]; ?>
<!-- ========== Banner - Featured Image ========== -->
<div class="jumbotron image-banner banner-featured-image">
    <img src="<?php echo esc_url($url) ?>" class="img-responsive />
</div>
<!-- ========== /Banner - Featured Image ========== -->
<?php } else { get_template_part('parts/banner','none'); } ?>
    Thread Starter dadislotroguides

    (@dadislotroguides)

    Now it fills the page and the greyish filter goes over the image and page. I would like it to display just like the front page (size/colour).

    Theme Author lyrathemes

    (@lyrathemes)

    I was missing a comma > Try replacing all the content of parts/banner-featured-image.php with this:

    <?php
/**
 * The template part for displaying the featured image as the top banner
 *
 * @package vega
 */
?>
<?php 
$src = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'banner-featured-image' );
if($src) { $url = $src[0]; ?>
<!-- ========== Banner - Featured Image ========== -->
<div class="jumbotron image-banner banner-featured-image">
    <img src="<?php echo esc_url($url) ?>" class="img-responsive" />
</div>
<!-- ========== /Banner - Featured Image ========== -->
<?php } else { get_template_part('parts/banner','none'); } ?>
    • This reply was modified 8 years, 2 months ago by lyrathemes.
    • This reply was modified 8 years, 2 months ago by lyrathemes.
    Thread Starter dadislotroguides

    (@dadislotroguides)

    I had to add in align=center to get the image to be centered.

    How do I remove the greyish pixelated filter over top of my image?

    Theme Author lyrathemes

    (@lyrathemes)

    
.jumbotron.image-banner.banner-featured-image {
    background: none;
}
    Thread Starter dadislotroguides

    (@dadislotroguides)

    Excellent, TY !

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Banner Size On Pages’ is closed to new replies.