Wordpress, PHP - Inserting Image Into Theme Homepage

Question

Here's what I'm going for:

Here's my most recent screenshot of the page:

Now I just need to correctly insert the image of Christi and make the width of the article wider. Unfortunately, I don't know how to insert an image in php.

You can see that the image is but detected, but I need the image to actually display and to float to the left of the paragraph (like in the first screenshot). Here's the (relevant) code for front-page.php:

<article class="front">
<!--<h2 class="first-title">
<?php
 if ( get_theme_mod( 'ti_frontpage_article_title','About us' ) ) {
 echo get_theme_mod( 'ti_frontpage_article_title','About us' );
 }
 ?>
</h2>

<?php

if ( get_theme_mod('ti_frontpage_article_image'
,get_template_directory_uri().'/images/about_us.jpg' ) ) {

?>
<img src="<?php echo get_theme_mod(
'ti_frontpage_article_image',get_template_directory_uri().
'/images/about_us.jpg' ); ?>"
alt="<?php echo get_theme_mod( 'ti_frontpage_article_title','About us'
); ?>"

title="<?php echo get_theme_mod( 'ti_frontpage_article_title',
'About us' ); ?>">
<?php }
 ?>-->

<?php
if ( get_theme_mod
( 'ti_frontpage_article_content','Lorem ipsum dolor sit amet,
 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
 labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est
 laborum. Sed ut perspiciatis unde omnis iste natus error sit
 voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
 ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
 aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
 qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.' ) )
 {

echo '<p>' . get_theme_mod
( 'ti_frontpage_article_content',
'<img src="images/Christie_Schmuke.jpg" alt="Christi Schmuke">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde
omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt. Neque porro quisquam est.' ) . '</p>';

}
?>
</article>

As you can see, I commented out some of the original code that included the h2 "about us" and an image of a city from the constructzine-lite theme (front-page.php). If you think I can insert the image by just using CSS and you would like to see style.css, please let me know. I have been using a child theme to adjust most of the CSS so far. Please help if possible. Thanks!

EDIT : I'm using a child theme, but the parent theme is Constructzine-Lite.

Answer 1

You'll see get_template_directory_uri() in the code you commented out. That's what gives you the rest of the path to the image (if you're putting it in the images directory like what was happening before.

You can hardcode the full path to the image if you really needed to and want to avoid php. http://example.com/wp-content/themes/theme_name/images/image.jpg

You might want to reconsider how you're writing this to take advantage of the way WordPress works. There's some pretty good support and tutorials that'll help you on the way.

Answer 2

   <?php echo '<img src="'.get_template_directory_uri().'/images/image.jpg'">' ?>

Keep in mind that get_template_directory and get_template_directory_uri are two different things . One returns the path one returns the URI (respectively).