Solved

Img not displaying

Posted on 2016-11-15
11
33 Views
Last Modified: 2016-11-15
I'm having trouble with an image not displaying. It only shows the placeholder:

Placeholder
It's probably something basic that I'm missing. Everything else is working okay. The correct images and text is called for each slide. Thanks in advance to anyone who can assist me with this.

<?php 

/** 

 * This file is responsible for the rendering of the header of the front page. 

 */ 

?> 

<!-- Home Slider --> 

<div id="home"> 

    <!-- Banner Image --> 

    <div id="banner_image"> 

    <!-- Banner TEXT Slides --> 

    <div id="text_slider" class="top_slider"> 

        <?php 

        if (get_theme_mod('topslider_slides')) { 

            foreach (get_theme_mod('topslider_slides') as $slide) { 

                ?> 

               <div id="owl-item" class="owl-item">
<!-- CHANGE TO BE THE IMAGE FOR THIS SLIDE -->
   <img src="background-image:url(<?php echo $slide['slide_image']; ?>" />
 <div class="hero_text item"> 

                    <h3><?php echo $slide['slide_title']; ?></h3> 

                    <p><?php echo $slide['slide_desc']; ?></p> 

                </div> 

    </div> 

            <?php 

            } 

        } 

        ?> 
   </div>  

</div> 

<!-- Home Slider --> 

Open in new window


And the CSS

#text_slider {
  background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  height: 600px;
  left: 0;
  overflow-y: hidden;
  position: absolute;
  text-align: center;
  top: 0;
}

#owl-item {
 position: relative;
}
.owl-item img {
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-size:cover; 
    height:600px;  
    left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.owl-theme .owl-controls {
  margin-top: -50px;
  position: relative;
  text-align: center;
  z-index: 10000;
}

.hero_text h3{
    vertical-align: middle;
    font-size: 50px;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
}
.hero_text p {
    font-size: 18px;
    color: #fff;
}

Open in new window

0
Comment
Question by:Cathryn Warren
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 51

Expert Comment

by:Ryan Chong
ID: 41888964
<?php echo $slide['slide_image']; ?>

Open in new window


apparently, can you check the value of $slide['slide_image'] ?

also check the html output generated, and see if the image pointing too really exists? you may make sure the relative path of the image is set correctly.
0
 

Author Comment

by:Cathryn Warren
ID: 41888982
Thanks Ryan, yes the relative path is correct and it is calling the information correctly. I can see it in the source on the page.
0
 
LVL 51

Expert Comment

by:Ryan Chong
ID: 41888986
yes the relative path is correct and it is calling the information correctly. I can see it in the source on the page.
could it be browser's cache? are you able to copy the relative path and paste into your browser to show that image alone?
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:Cathryn Warren
ID: 41888996
I tried this as well. It does work. I have also tried it in multiple browsers, firefox, chrome and edge.
0
 
LVL 51

Expert Comment

by:Ryan Chong
ID: 41889016
so is that all browsers such as firefox, chrome and edge behaved the same that image not showing up?
0
 

Author Comment

by:Cathryn Warren
ID: 41889019
That's correct it doesn't show in any of the browsers. But pasting the relative path into each of the browsers does work.
0
 

Author Comment

by:Cathryn Warren
ID: 41889033
If it helps here is a link.
0
 
LVL 51

Expert Comment

by:Ryan Chong
ID: 41889045
<img src="background-image:url(http://www.mitchellwealthmanagement.com.au/wp-content/uploads/2016/11/test_shot.jpg">

Open in new window

shoudn't it be as:

<img src="http://www.mitchellwealthmanagement.com.au/wp-content/uploads/2016/11/test_shot.jpg">

Open in new window


? I think you mass up the CSS with HTML syntax
0
 
LVL 51

Accepted Solution

by:
Ryan Chong earned 500 total points
ID: 41889046
so try this instead:

<img src="<?php echo $slide['slide_image']; ?>" />

Open in new window

1
 

Author Comment

by:Cathryn Warren
ID: 41889064
Yes that was the problem! Thank you!

Now I have a height distortion problem to fix...
0
 

Author Closing Comment

by:Cathryn Warren
ID: 41889065
Thank you Ryan!
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Server time zone 4 27
Remove lines by logo 2 44
Pull Variable from URL  Use php template 1 34
Modify Filter to cause a field to be not Required 3 29
Wordpress Horizontal Drop-Down Menu In this tutorial I will show you had to add a WordPress horizontal navigation menu to your theme. I have searched and searched for a good tutorial on creating a WordPress nav menu without adding a plug-in or us…
In Part I (http://www.experts-exchange.com/Web_Development/Blogs/WordPress/A_8410-Getting-Started-In-WordPress-Part-I.html), I introduced you to the powerful WordPress backend, the WordPress administrative Dashboard.  In Part II, I will introduce yo…
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question