I have the following html code that tried to place in my WordPress page.
html:
<div class="hovereffect">
<img src="<?php echo get_template_directory_uri() ?>phone.jpg" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
At the moment everything is in the site except the image that does not show.
How can I use this code WordPress in a way that it can display the image?
I think you forget to tell which place it should get the images from. And you are also forgetting a semicolon after the get_template_directory_uri();.
This is an example, but here i'm telling which folder to get the image from:
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/your_image.jpg">
you can do that but it is not a good practice to paste this code as it is in WordPress editor,
upload this image in media and get link of that image
Edit page, select text mode from top right corner of your editor and paste code these i.e
<div class="hovereffect">
<img src="http://example.com/wp-content/uploads/2016/07/img.png" >
<div class="overlay">
<h2>Hover effect 9</h2>
<a class="info" href="#">link here</a>
</div>
</div>
Here is good practice create a template for that page and write there your code.
Image replace with feature image
Heading with page title.
Detail with page content
link with page permalink.
Not enough reputation to leave a comment so I will leave this as an answer instead.
Assuming phone.jpg is at the root of your theme, you're forgetting the / (slash) before phone.jpg.
It should be
<img src="<?php echo get_template_directory_uri(); ?>/phone.jpg" >
PHP won't get parsed inside a page. Just upload the image to the WordPress media library and link to it directly.
Related
I'm currently building a small PHP photo gallery system using lightbox.
My code:
<div class="col-7 offset-2 p-2">
<img src="uploads/entrance.jpg" alt="">
<?php foreach ($photos as $photo){?>
<a class="gone" href="<?php echo $photo->file_path('uploads',$photo->filename)?>" data- lightbox="gallery"><img src="<?php echo $photo->file_path('uploads',$photo->filename)?>" alt=""></a>
<?php } ?>
</div>
I wish to show the first indexed/id photo as the thumbnail/cover image. Once the user wishes to view the gallery, they can click the image and lightbox launches allowing a preview of the photos drawn from SQL.
How do I achieve this?
This may be quite an amateur question, but I'm meddling around with what I've learnt from youtube :P
I have Below code in my header.html
<div class="col-md-3">
<div class="logo">
</div>
</div>
But it's not showing my png image in header, Is the way adding image path in div is wrong?
<img src="http://example.com/themes/default/images/logo.png">
That is how you use an image. You are placing a link to the image.
Also, you are not seeing anything because your <a></a> tags are empty. If you write something between them, you can click on it, to see the image you linked.
Add Image inside the img tag not in a tag
<img src="http://example.com/themes/default/images/logo.png">
You should do is this way. img tag is used to display image.
Good practice is to link the logo to the home page of the website.
<div class="col-md-3"><div class="logo"><img src="http://example.com/themes/default/images/logo.png" alt="Site Name or Logo"/></div></div>
put link or path in img tag source(src) not anchor tag.
<div class="col-md-3">
<div class="logo">
<img src="http://example.com/themes/default/images/logo.png" alt="">
</div>
</div>
I have searched high and low for a solution to this. I want to change the markup of an uploaded image in WordPress from this:
<div id="attachment_906" style="width: 590px" class="wp-caption aligncenter">
<img class="size-full wp-image-906 " title="Image Alignment 580x300" alt="Image Alignment 580x300" src="http://localhost/sandbox/wp-content/uploads/2013/03/image-alignment-580x300.jpg" width="580" height="300">
<p class="wp-caption-text">Look at 580×300 getting some <a title="Image Settings" href="http://en.support.wordpress.com/images/image-settings/">caption</a> love.</p>
</div>
To something more like this:
<figure class="center">
<img class="gallery-img" src="http://lorempixel.com/300/500/">
<figcaption>
<span>A slightly longer caption for the image, which is significantly smaller than the last one. pretty neat!</span>
</figcaption>
</figure>
I understand that much of the markup in the original post needs to stay, but is there any way to customize any of this? Even if I could get the same basic structure (a wrapper, the image, a caption wrapper, the caption) I could take it from there with CSS.
Since I'm developing a theme, I need the options to work with the native WordPress tools. If that isn't the case, I can't work with it.
I had hoped that there would simply be a filter or action that I could apply to do this, but I have had no luck in finding such a thing.
Thanks in advance!
You need to use the image_send_to_editor filter. https://developer.wordpress.org/reference/hooks/image_send_to_editor/
That could look something like this in any one of your active theme or plugin's php files (like functions.php);
function filter_image_send_to_editor($content) {
$content .= '<figure class="center">(Generate your markup here)</figure>';
return $content;
}
add_filter('image_send_to_editor', 'filter_image_send_to_editor');
You'll have to write your own code inside that function, of course.
I have a quite specific problem to solve today - I just can't get my head wrapped around it. Makes totally no sense for me...
It's about a live site: http://rawrockchick.com/#testimonial-slider
If you scroll down to the testimonials on the home page (the link above should bring you there) you'll see that the slider arrows are missing. For a reason I can't figure out the URL is prepended a couple of times before the image src:
<img src="http://rawrockchick.comhttp://rawrockchick.comhttp://rawrockchick.com/media/manual/slider-arrow-left.png">
This wasn't the case two weeks ago, without anybody consciously touching it. I first thought of some Javascript thing happening with the bootstrap slider, but as you can see the testimonial image itself is not affected, even though it's placed in the exact way as the sliders are.
The whole slider is a very simple bootstrap carousel. Excerpts (relevant section) of the code:
<div class="item active">
<div class="row">
<div class="col-sm-8">
<p>"An up-and-coming UK raw food teacher and songstress, Barbara Fernandez has it going on! This girl can do food prep! Her Raw Mexican food is amazing"</p>
<p class="testimonial-author">Nomi Shannon</p>
<p class="testimonial-role">rawgourmet.com</p>
<a class="left carousel-control" href="#testimonial-slider" data-slide="prev"><img src="/media/manual/slider-arrow-left.png"></a>
<a class="right carousel-control" href="#testimonial-slider" data-slide="next"><img src="/media/manual/slider-arrow-right.png"></a>
</div>
<div class="col-sm-4">
<img src="/media/test-nomi-150.jpg" class="img-responsive hidden-xs hidden-sm img-circle" style="margin-left:25px;">
</div>
</div>
</div>
As you can see the images are inserted the exact same way.
What I tried already (no change):
I moved the <img src="/media/manual/slider-arrow-left.png"> out of the link and placed it directly under the working image, the same strange behavior occurs for the slider arrow (by this test I wanted to make sure there's no jquery rule affecting only that one column of the slider, or the a tag).
Hardcoding absolute image URL (src="http://rawrockchick.com/media/manual/slider-arrow-left.png")
WordPress PHP query for image URL (src="<?php echo home_url(); ?>/media/manual/slider-arrow-left.png")
I'd be very thankful if anyone had any ideas about that phenomena. Or idea how to debug it further.
I am not really sure why you are getting a double URL but using an absolute path to your image could help solve things.
<img src="<?php echo home_url(); ?>/media/test-nomi-150.jpg" class="img-responsive hidden-xs hidden-sm img-circle" style="margin-left:25px;">
Solved.
Found it out via disabling plugin for plugin that a Pinterest hover button plugin (this to be precise) was causing that mysterious phenomena.
Thanks for all the answers and hints!
I am pretty new in WordPress and I have the following doubt about how to insert in my homepage an immage that is in a subfolder into my theme directory.
So I have the following situation: Into my custom theme directory I have the following folder that contains a jpg immage: /assets/img/flexslider/flex-1.jpg
Now in my header.php file I have something like this:
<li>
<img src="assets/img/flexslider/flex-1.jpg">
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
</li>
Obviously, when I load the page, the immage flex-1.jpg is not loaded because there is not the right path (infact using FireBug I obtain that it try to load the assets/img/flexslider/flex-1.jpg immage) so I think that I could use the absolute path but this is pretty orrible !!!
So I am thinking to use the get_template_directory_uri() function provided from WP to do this and I have try to change the previous code in this way:
<li>
<img src=<?php get_template_directory_uri().'/assets/img/flexslider/flex-1.jpg' ?>>
<div class="flex-caption">
<p class="flex-caption-text">
<span>Lorem ipsum</span><br>
<span>sit dolor</span><br>
<span>adipiscing elitur</span>
</p>
</div>
But don't work and using FireBug I can see that load nothing, infact in my brower source code I have:
<img src="">
Why don't work? What am I missing?
Tnx
Andrea
I hope it will work:
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/flexslider/flex-1.jpg" />
If your assets folder inside theme.
please try :
<img src="<?php print(get_template_directory_uri()); ?>/assets/img/flexslider/flex-1.jpg" />
just check for slash, if double before "assests", remove static one.
You can also use:
<img src="<?php bloginfo('template_url'); ?>/images/yourimage.jpg">