tag doesn't seem to work

  • I am working on applying Bootstrap to WordPress. I am following some tutorials I found on YouTube. Actually so far everything has seemed to go well. I got the initial setup to work fine and then I started trying to get the Carousel component to work and that’s when I ran into this snag. The <img> tag doesn’t seem to work.

    I’m starting with a new blank theme. I have a theme folder with the Bootstrap folders “css”, “fonts”, and “js”. I also have a folder “img” where I have jpg files. Also in the theme folder are the files “style.css”, “index.php”, “header.php”, “footer.php”, and “single.php”

    The index.php file has this…

    <?php get_header(); ?>

    <div>
        <img src="img/piggy.jpg" alt="piggy" />
    </div>

<?php get_footer(); ?>

    The header file has this…

    <!DOCTYPE html>
<html>
	<head>
		<title>Tech Site</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href = "css/bootstrap.min.css" rel = "stylesheet">
		<link href = "css/style.css" rel = "stylesheet">
	</head>
	<body>

		<div class = "navbar navbar-inverse navbar-static-top">
			<div class = "container">

				<a href = "#" class = "navbar-brand">Tech Site</a>

				<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
					<span class = "icon-bar"></span>
					<span class = "icon-bar"></span>
					<span class = "icon-bar"></span>
				</button>

				<div class = "collapse navbar-collapse navHeaderCollapse">

					<ul class = "nav navbar-nav navbar-right">

						<li><a href = "#">Home</a></li>
						<li class = "dropdown">

							<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Blog <b class = "caret"></b></a>
							<ul class = "dropdown-menu">
								<li><a href = "#">Item One</a></li>
								<li><a href = "#">Item Two</a></li>
								<li><a href = "#">Item Three</a></li>
								<li><a href = "#">Item Four</a></li>
							</ul>

						</li>
						<li class = "dropdown">

							<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Social Media <b class = "caret"></b></a>
							<ul class = "dropdown-menu">
								<li><a href = "#">Twitter</a></li>
								<li><a href = "#">Facebook</a></li>
								<li><a href = "#">Google+</a></li>
								<li><a href = "#">Instagram</a></li>
							</ul>

						</li>
						<li><a href = "#">About</a></li>
						<li><a href = "#contact" data-toggle="modal">Contact</a></li>

					</ul>

				</div>

			</div>
		</div>

		<div class = "container">

    This is the content of the footer.php file…

    <div class = "navbar navbar-default navbar-fixed-bottom">

			<div class = "container">
				<p class = "navbar-text pull-left">Site Built By Neil Rowe</p>
				<a href = "https://youtube.com/codersguide" class = "navbar-btn btn-danger btn pull-right">Subscribe on YouTube</a>
			</div>

		</div>

		<div class = "modal fade" id = "contact" role = "dialog">
		    <div class = "modal-dialog">
		        <div class = "modal-content">
		            <form class = "form-horizontal">
		                <div class = "modal-header">
		                    <h4>Contact Tech Site</h4>
		                </div>
		                <div class = "modal-body">

		                    <div class = "form-group">

		                        <label for = "contact-name" class = "col-lg-2 control-label">Name:</label>
		                        <div class = "col-lg-10">

		                            <input type = "text" class = "form-control" id = "contact-name" placeholder = "Full Name">

		                        </div>

		                    </div>

		                    <div class = "form-group">

		                        <label for = "contact-email" class = "col-lg-2 control-label">Email:</label>
		                        <div class = "col-lg-10">

		                            <input type = "email" class = "form-control" id = "contact-email" placeholder = "[email protected]">

		                        </div>

		                    </div>

		                    <div class = "form-group">

		                        <label for = "contact-msg" class = "col-lg-2 control-label">Message:</label>
		                        <div class = "col-lg-10">

		                            <textarea class = "form-control" rows = "8"></textarea>

		                        </div>

		                    </div>

		                </div>
		                <div class = "modal-footer">
                            <a class = "btn btn-default" data-dismiss = "modal">Close</a>
		                    <button class = "btn btn-primary" type = "submit">Send</button>
		                </div>
		            </form>
		        </div>
		    </div>
		</div>

		<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script src = "<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js"></script>

<!--
        <script src = "<?php get_template_directory(); ?>/js/bootstrap.js"></script>

     -->

<?php wp_footer(); ?>
	</body>
</html>

    The problem is that the actual image doesn’t display in the browser (Chrome). It does show up in the design view of the IDE…Visual Studio. I first encountered this in an earlier install of WordPress. so I created a new fresh install of WordPress so these are the only things in it. SO I’m pretty sure the problem is something WordPress is doing.

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

  • My first suspicion is that since you’re starting with a child theme from scratch, you might not be calling the img folder correctly.

    What if you try one (or both) of these where you call your template files?

    $imagepath = STYLESHEETPATH .'/img/';
$imageurl = get_bloginfo('stylesheet_directory') .'/img/';

    Thread Starter ronc0011

    (@ronc0011)

    First let me thank you for your response.

    I’m not altogether clear on what you are saying.. As I noted at the outset. I’m following along on some YouTube tutorials and I’m thinking I’m not certain about the “Child Theme” angle. This theme was built from scratch. All the files within the ‘mytheme’ folder were created from scratch. I should probably note that the content of the style.css is as follows…

    /*
    Theme Name: mytheme
    Theme URI: https://rnet2rd.com
    Discription: Bootstrap Responsive theme
    version: 1
    Author:Ron C.
    Author URI: https://ronc.me
*/

@import URL('CSS/bootstrap.css');

.panel h3
            {
              margin-top:5px;
            }

    So you can see it is pulling the css from the Bootstrap.css file. In other words the style.css file is not copied from a default WordPress style.css file

    I am thinking the problem is most likely something like you are suggesting. I am new to the unplumbed depths of WordPress. Can you point me to the documentation relating to these elements?

    Thread Starter ronc0011

    (@ronc0011)

    BTW, for the sake of clarity here is a screenshot of my folder structure and associated files. I am doing this locally on my laptop. This screenshot I moved up to my website hosted on Hostgator

    Thread Starter ronc0011

    (@ronc0011)

    OK so that didn’t work. My link to the screenshot got dropped. I’m guessing www.remarpro.com apparently doesn’t allow links to other websites.

    Hmmm… try this..

    https://ronc.me/images/VS_SolutionExplorer.png

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘tag doesn't seem to work’ is closed to new replies.