I am trying to display an image in a custom wordpress theme. In the theme folder I have an img folder with all the images. It does not show anything.
<footer class="container-fluid" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4"><img src="<?php bloginfo('template_url');
?>/footer_logo.png"></div>
</div>
You can use get_template_directory_uri() function to get URL of your active theme.
Here is the updated code, by which you can print image from your theme directory:
<footer class="container-fluid" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4"><img src="<?php echo get_template_directory_uri();?>/[img folder name]/footer_logo.png"></div>
</div>
</footer>
Let us know if you need any further help in this.
Thanks!
You simply forgot to reference the image folder itself.
<img src="<?php bloginfo('template_url') ?>/img/footer_logo.png">
Related
I made a one pager Wordpress page. I am using custom fields to make my page editable. I've created a template.php where I've put all my index.php code in. Everything is working well and I've been able to add image - and text fields. But the latest text field I've been trying to add, is not showing up on my template page when I put it near the end of the page. If I put it in another section on my page it shows up fine, but for some reason it wont get the text string from the custom field when I put it where I want it (as in, the text field is there but there is no text in it).
Thanks in advance for the help!
<div class="section" id="section4">
<div class="col-12 col-md-12 col-lg-12">
<div class="container" id="container_message">
<div class="header">Send me a message!</div>
<div class="subheader">Lets stay in touch</div>
<div class="container" id="container_text">
<div class="image_handtext"><img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/H.png"/></div>
<div class="image_handtext"><img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/E.png"/></div>
<div class="image_handtext"><img src="<?php echo get_stylesheet_directory_uri(); ?>/imgs/j.png"/></div>
<div class="contact">
<h1><?php the_field('contact_text'); ?></h1>
</div>
</div>
<!--<button class="button">Send me a message</button>-->
</div>
</div>
</div>
I am trying to make the footer of my website. I want to change the style.
1) Can I create a custom stylesheet and include it into the footer file?
If yes, Do I need to create a new div for any element I want to choose or can use the class provide by Bootstrap?
For example, above I created a div and than in the style file I added #mydiv?
Or there is a better solution?
<div id="mydiv">
<footer class="container-fluid" style="margin-top: 30px;">
<div class="row">
<div class="col-md-4"><img src="<?php echo get_template_directory_uri();?>/img/footer_logo.png"></div>
</div>
<div class="row">
<div class="col-md-4"><img src="<?php echo get_template_directory_uri();?>/img/ico.png"></div>
</div>
<div class="row">
<div class="col-md-4">
xx
xxx
xxx
xxx[enter image description here][1]
</div>
</div>
<div class="row">
<div class="col-md-4">2004-2017. All
rights reserved.</div>
</div>
</footer>
</div>
In addition to Bootstrap classes you can apply your own like
<footer class="container-fluid my-custom-class" style="margin-top: 30px;">
Then just select this class in CSS and apply the styling you need. Be careful, as some attributes (like width ) can be overwritten by Bootstrap.
Hope this helps.
I am using Github as SCM & have enable auto-deploy on Heroku. I am trying Heroku for a simple HTML, CSS, JS app & Used PHP for deployment. All my images are available in Git, relative path given for images is also correct. Still some of the images are not reflecting on page & giving 404 whereas most of them do appear. What can be it's reason?
Here's code snippet
.bgimg1 {
background-image: url('images/Top_Image.jpg');
}
<body class="background">
<div class="loader"></div>
<div class=" bgimg1">My top content </div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/1.jpg" alt="img" height="50%" width="100%">
</div>
<div class="item">
<img src="images/2.jpg" alt="img" height="50%" width="100%">
</div>
</div>
</body>
and here is project structure.
Make sure you reference the correct images, watch out for lower/upper case:
You are referencing *.jpg (lower case) in your html when the filenames really are .JPG (upper case).
Corrected code:
.bgimg1 {
background-image: url('images/Top_Image.JPG');
}
<body class="background">
<div class="loader"></div>
<div class=" bgimg1">My top content </div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/1.JPG" alt="img" height="50%" width="100%">
</div>
<div class="item">
<img src="images/2.jpg" alt="img" height="50%" width="100%">
</div>
</div>
</body>
I have the following code:
<div class="container-fluid>
{files}
<div class="media">
<div class="media-left">
<img src="<?php echo base_url('files/{filename}'); ?>" alt="afbeelding" class="media-object" style="width:200px">
</div>
<div class="media-body">
<h4 class="media-heading">{title}</h4>
<p>{text}</p>
</div>
</div>
<br>
{/files}
</div>
The current result is just the title and text being shown, without the image. When I remove the whole div with class "media-body", the image shows. I think my code is structured right, I followed the w3-schools example. How can I get both the image and text to show up in the bootstrap media format?
Missing "
Change from
<div class="container-fluid>
to
<div class="container-fluid">
i am new to wordress
i want to make image gallery from basic bootstrap template
i have this template for example:
<div class="row portfolio-images">
<div class="col-md-3">
<img src="">
<a class="title" >title</a>
</div>
<div class="col-md-3">
<img src="" alt="">
<a class="title" >title</a>
</div>
<div class="col-md-3">
<img src="" alt="">
<a class="title" >title</a>
</div>
<div class="col-md-3">
<img src="" alt="">
<a class="title" >title</a>
</div>
</div>
i want to know how to create image database or gallery in wordpress in the panel
and get the images url in an array and do something like this:
<div class="row portfolio-images">
<?php
for(the array){ ?>
<div class="col-md-3">
<img src="<?php echo image url ?> ">
<a class="title" ><?php echo image title ?></a>
</div>
<?php }?>
</div>
because im lost right now and i need some guidence
There are various plugins that you can use to generate the gallery. If you need to generate one without plugin then you can define a custom post type and then add images post on the relevant post type, which then can be listed on the required page.
Usually I use ACF plugin to generate custom field and then list it on the page. You can check it more here: http://www.advancedcustomfields.com/resources/gallery/