Banner Size On Pages

dadislotroguides
(@dadislotroguides)

9 years, 4 months ago

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

http://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)

9 years, 4 months ago

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)

9 years, 4 months ago
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.
- This reply was modified 9 years, 4 months ago by dadislotroguides.
Theme Author lyrathemes
(@lyrathemes)

9 years, 4 months ago
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]; ?>

<div class="jumbotron image-banner banner-featured-image">
    <img src="<?php echo esc_url($url) ?>" class="img-responsive />
</div>

<?php } else { get_template_part('parts/banner','none'); } ?>
```
Thread Starter dadislotroguides
(@dadislotroguides)

9 years, 4 months ago
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).
- This reply was modified 9 years, 4 months ago by dadislotroguides.
Theme Author lyrathemes
(@lyrathemes)

9 years, 4 months ago
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]; ?>

<div class="jumbotron image-banner banner-featured-image">
    <img src="<?php echo esc_url($url) ?>" class="img-responsive" />
</div>

<?php } else { get_template_part('parts/banner','none'); } ?>
```
- This reply was modified 9 years, 4 months ago by lyrathemes.
- This reply was modified 9 years, 4 months ago by lyrathemes.
Thread Starter dadislotroguides
(@dadislotroguides)

9 years, 4 months ago

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)

9 years, 4 months ago
```
.jumbotron.image-banner.banner-featured-image {
    background: none;
}
```
Thread Starter dadislotroguides
(@dadislotroguides)

9 years, 4 months ago

Excellent, TY !

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Banner Size On Pages’ is closed to new replies.