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>
Related
I am trying to scrape a few images from a website by using the PHP Simplehtmldom library. Normally the image url is found in the 'src' but in this case the image url is found in the 'data-url'. I am having trouble to access the data-url value and I was hoping some could help me out.
Let's say I have the following code:
<section id="imagesContainer">
<div class="img">
<img data-src="https://example.com/image1.jpg" alt="imageAlt1">
</div>
<div class="img">
<img data-src="https://example.com/image2.jpg" alt="imageAlt2">
</div>
<div class="img">
<img data-src="https://example.com/image3.jpg" alt="imageAlt3">
</div>
</section>
I attempted to extract the image urls from the data-src with the following code but it doesn't return the image url:
foreach($html->find('#imagesContainer') as $imagesContainer) {
foreach($imagesContainer->find('img') as $image) {
echo $image->data-src;
}
}
How can I extract the image url from the data-src? Is it possible with the simplehtmldom or do I need a regex?
many thanks for your suggestion. This code, using XPath, works to extract the value of the data-url:
$image->getAttribute('data-src')
I am trying to add a link back to the home page index.php from my logo,
Cant figure it out. Appreciate any assistance,
Thanks
<div class="container-fluid" style="background-color:black;"><img class="img-responsive" src="assets/img/logo.png" data-bs-hover-animate="pulse" style="padding-top:20px;padding-bottom:20px;"></div>
Bill04,
You can wrap a tag around the image logo, like this:
<div class="container-fluid" style="background-color:black;">
<img class="img-responsive" src="assets/img/logo.png" data-bs-hover-animate="pulse" style="padding-top:20px;padding-bottom:20px;">
</div>
Hope it works!
Good luck.
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.
I would like to display a few icons on the same line as my search form. It really wants to be on its own line. I originally had it added as a form instead of being called through php which worked but I would like it to be more dynamic as you can see. Is it impossible to do this without adding as a form?
Here is a trimmed down example:
Old way:
<div>
<img src="#">
<img src="#">
<form><input type="text"></form>
<img src="#">
<img src="#">
</div>
New way:
<div>
<img src="#">
<img src="#">
<?php get_search_form(); ?>
<img src="#">
<img src="#">
</div>
You should see searchform.php and check the styles in style.css for this form.
In my searchform.php there is a element.
I simply added display:inline; to the form making:
<form style="display:inline;">
Now everything is displayed on one line.
I'm creating a website for a kiosk. I've got 3 divs on one page, everytime when a div is clicked, next div shows up using a photoslide, and the previous div hides away.
My problem is that when the welcome screen (first div) is showing (the whole page/div is an a tag), the status bar down the bottom shows the linking address all the time. I posted another post, people told me it is not possible to hide the status bar.
So my question is how do I set the cursor to be off screen/off set, so the status bar only shows when a visitor is interacting with the screen.
Can I set the cursor offset using javascript, html/css or php? Any code/suggestions is appreciated.
Thanks!
Here is my html page below or see http://jsfiddle.net/EXfnN/8/
<div id="item1" class="item">
<div class="content">
<a href="#item2" class="panel">
<video id="my_Video" width="100%" height="100%" preload="auto" autoplay loop>xxxxxx
</video>
</a>
</div>
</div>
<div id="item2" class="item">
<div class="content">
<div id="back">
<ul id="awesome-menu">
<li>
ABC
</li>
<li>
National
</li>
<li>
Other
</li>
</ul>
</div>
</div>
</div>
<div id="item3" class="item">
<div class="content">
<img src="images/thankyou.jpg" alt="Thank you" /></div>
</div>
I'd suggest that if you're using JavaScript for this, that you don't need ANCHOR tags because you've already negated the need for them.
I'd suggest changing to adding click events to the div tags and storing additional application data on "data-" attributes and reading those with JavaScript instead.
This workaround eliminates a few problems like the one above.
you could make the first element a div only (without the a tag) catch the onclick event and then redirect via javascript (or do whatever action the a tag has)?