This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

PHP Blog_featured_image

Resolved 11 replies premium theme theme-vantage

Weston Childers

10 years ago · Last reply by Andrew Misplon 10 years ago

I am trying to get the “blog_featured_image” to stretch the length of my page and have the “blog_post_title” over the image.

I have made a lot of progress and am hung up on how to get the background to to call up the “blog_featured_image” via PHP

Here is my code from the content-single.php

<div class="siteorigin-panels-stretch panel-row-style-full-width panel-row-style" style="background-image: url(http://www.comv.org/home/wp-content/uploads/2015/01/vignettes-2.jpg)" data-stretch-type="full" ><div class="panel-grid-cell"><div class="so-panel widget widget_black-studio-tinymce panel-first-child panel-last-child"><div class="textwidget"><hr style="height:100px; visibility:hidden;" />
<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'vantage' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
			<?php if ( siteorigin_setting( 'blog_post_metadata' ) && get_post_type() == 'post' ) : ?>
				<div class="entry-meta">
					<?php vantage_posted_on(); ?>
				</div><!-- .entry-meta -->
			<?php endif; ?>
<hr style="height:100px; visibility:hidden;" /></div></div></div></div></div>

If you could help me with replacing the [bold]background-image[/bold] code to allow for the template to auto populate

URL: http://www.comv.org/home/locations/

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

Andrew Misplon Staff 10 years, 10 months ago

Hi Weston

Have you perhaps tried:

<div class="siteorigin-panels-stretch panel-row-style-full-width panel-row-style" style="background-image: url(<?php the_post_thumbnail( is_active_sidebar('sidebar-1') ? 'post-thumbnail' : 'vantage-thumbnail-no-sidebar' ) ?><)" data-stretch-type="full" ><div class="panel-grid-cell"><div class="so-panel widget widget_black-studio-tinymce panel-first-child panel-last-child"><div class="textwidget"><hr style="height:100px; visibility:hidden;" />
<h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'vantage' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
			<?php if ( siteorigin_setting( 'blog_post_metadata' ) && get_post_type() == 'post' ) : ?>
				<div class="entry-meta">
					<?php vantage_posted_on(); ?>
				</div><!-- .entry-meta -->
			<?php endif; ?>
<hr style="height:100px; visibility:hidden;" /></div></div></div></div></div>

Let me know how that goes.

Weston Childers 10 years, 10 months ago
Andrew thank you for getting back to me.
In trying the code all that shows up in place of the image is
```
<)" data-stretch-type="full" >
```
as seen on the website (see http://www.comv.org/home/locations/)
I believe its something with the php closing tags that is confusing the web as to what is and what is
any further ideas?
Magus Staff 10 years, 10 months ago
Hi Weston
There is an errant opening tag in the first line in this area
```
'vantage-thumbnail-no-sidebar' ) ?><)" data-stretch-type="full" >
```
It should be
```
'vantage-thumbnail-no-sidebar' ) ?>)" data-stretch-type="full" >
```
Hope this helps
Magus
Andrew Misplon Staff 10 years, 10 months ago
My bad. Thanks Magus :)
Magus Staff 10 years, 10 months ago
No problem Andrew, did it myself earlier ;)

Weston Childers 10 years, 10 months ago

Something interesting is under Chrome Developer Tools the code is being executed like this:

<div class="siteorigin-panels-stretch panel-row-style-full-width panel-row-style" style="background-image: url(
<img width=" 474"="" height="250" src="http://www.comv.org/home/wp-content/uploads/2015/01/vignettes-2-720x380.jpg" alt="Inspiring Video Utah Video production"><)" data-stretch-type="full" >
<div class="panel-grid-cell">
<div class="so-panel widget widget_black-studio-tinymce panel-first-child panel-last-child">
<div class="textwidget">
<hr style="height:100px; visibility:hidden;">

so the PHP is telling the web to insert the image as

Weston Childers 10 years, 10 months ago
Magus thank you for the additional help. I had seen that and tried a few different variations of the opening and closing tags. I was still not able to get the background image to display.
Looking at the code in Chrome Developer Tools the php string is displaying like this:
```
<div class="siteorigin-panels-stretch panel-row-style-full-width panel-row-style" style="background-image: url(
<img width=" 474"="" height="250" src="http://www.comv.org/home/wp-content/uploads/2015/01/vignettes-2-720x380.jpg" alt="Inspiring Video Utah Video production">)" data-stretch-type="full" >
```
so this issue appears to be that the php code is telling the string to display as
```
<img src="...">
```
how do I change what the php string is telling the code to display as?

Magus Staff 10 years, 10 months ago

Hi Weston

Please try changing the first line to read

<div class="siteorigin-panels-stretch panel-row-style-full-width panel-row-style" style="background-image: url( '<?php wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>' )" data-stretch-type="full" ><div class="panel-grid-cell"><div class="so-panel widget widget_black-studio-tinymce panel-first-child panel-last-child"><div class="textwidget"><hr style="height:100px; visibility:hidden;" />

Try this and let us know how you get on

Magus

Weston Childers 10 years, 10 months ago
Magus, we are getting closer. Your code helped the php string to not call up the image within its own brackets. Though in chrome developer tools it is showing that the display doesn’t recognize what image to grab:
```
<div class="siteorigin-panels-stretch panel-row-style-full-width panel-row-style" style="background-image: url( '' )" data-stretch-type="full">
```

Weston Childers 10 years, 10 months ago

Got it! Thanks Magus for pointing me in the right direction.

I created a separate php string that called up the image

<?php if (current_theme_supports( 'post-thumbnails' ) && has_post_thumbnail( $post->ID )) {
        $bg_image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
        $bg_image_url = $bg_image[0]; // this returns just the URL of the image
} ?>

then I used something similar to what you had given me to call up its output into the background section

<div class="siteorigin-panels-stretch panel-row-style-full-width panel-row-style" style="background-image: url( '<?php echo $bg_image_url; ?>' )" data-stretch-type="full" ><div class="panel-grid-cell"><div class="so-panel widget widget_black-studio-tinymce panel-first-child panel-last-child"><div class="textwidget"><hr style="height:100px; visibility:hidden;" />

this article was a help https://codex.wordpress.org/Function_Reference/get_background_image

thank you Magus and Andrew for the support and helping me work through it.

Andrew Misplon Staff 10 years, 10 months ago
Thanks Magus! Weston, stoked to see you were able to complete your child theme modification. Nicely done :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread