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
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.
Andrew thank you for getting back to me.
In trying the code all that shows up in place of the image is
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?
Hi Weston
There is an errant opening tag in the first line in this area
It should be
Hope this helps
Magus
My bad. Thanks Magus :)
No problem Andrew, did it myself earlier ;)
Something interesting is under Chrome Developer Tools the code is being executed like this:
so the PHP is telling the web to insert the image as
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:
so this issue appears to be that the php code is telling the string to display as
how do I change what the php string is telling the code to display as?
Hi Weston
Please try changing the first line to read
Try this and let us know how you get on
Magus
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:
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
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.
Thanks Magus! Weston, stoked to see you were able to complete your child theme modification. Nicely done :)