Add a link to a image - html

How do I add a link to the image? I am unsure what code to use.
<?php
$company_image = '';
$company_description = '';
if (!empty($options['company_photo'])){
$company_image = $options['company_photo'];
}
else {
$company_image = 'https://nemo-uploads-clone.s3.amazonaws.com/uploads/homeabout/image/1/philly.jpg';
}

you can't straightly add a link to the image variable which is defined,
but you can add the link like this:
in html you can use this:
<a href="https://www.something.com">
<img src="img.jpg">
</a>
in php, you can use "html tags" inside of ".php" file like this:
echo ' <img src="img.jpg"/> ';
the code above, will show an image on the screen that refers to wikipedia link!

The HTML for an image with a link
<a href="https://www.example.com">
<img src="https://www.example.com/img.png">
</a>

Related

how to make img link to a simple code (Html and Css)

so i want to make all my img links into a simple word/code in html and css
Example:
//Not like this
<img src="https://img1.com">
<img src="https://img2.com">
<img src="https://img3.com">
//I want to do something a little bit more like this instead
value01 = https://img1.com
value02 = https://img2.com
value03 = https://img3.com
<img src="value01">
<img src="value02">
<img src="value03">
I don't know what to do I am new to HTML and CSS
I think you can't do this in html because
The <img> tag is used to embed an image in an HTML page, maybe you can do this in python, instead, you can do this:
<b>
<img src="value1.jpg" alt="Value1" >
</b>
Source :
img tag html
there are two ways I can think of.
::THIS FIRST OPTION ONLY WORKS IF YOU SAVE THE PAGE IN (.PHP) EXTENSION
1° Method => You can create a php file apart, store the links of images in variables like this.
< ? php
$img = 'https : // upload . wikimedia . org /wikipedia/commons/thumb/c/c3/Python-logo-notext . svg/1200px-Python-logo-notext . svg . png';
? >
next, you can call this file in the main page/index.
< ? php
include ". /page/images . php";
? >
< html >
< img src="< ? php echo $img; ? >" alt="" srcset="">
< / html >
2° Method => you can just save the image to a folder easy to target.
create a folder inside the same folder you are accessing your main page.
for example: I created a folder called (img) in the same folder my index.html is found, save the image with a short name.
so to access that image i would call the image like this
< img src="image/img.png" alt="" srcset="">

How to conditionally use an HTML tag with JQuery

I have an application that uses bootstrap and JQuery. On the website page it displays some links. Based on a certain condition that I set in the JavaScript file, I want to strikethrough those links. On my HTML page, landing.html, I have this code for the links as follows:
<div class = "container">
<div class="row row-eq-height" style="border: none; height: 70px; padding:10px;"></div>
<h1>Surveys</h1>
<li><a target="_blank" href.bind="PreTestLink">PreTest Survey 1</a></li>
<li><a target="_blank" href.bind="PreTestLink2">PreTest Survey 2</a></li>
</div>
In my JavaScript file, landing.js, I have a constructor method with this field that I would like to use as the condition for setting the above links to be strikethrough-ed or not:
import {RouterConfiguration, Router} from 'aurelia-router';
var myApp;
export class Landing {
static inject() { return [Router]; }
constructor(router){
this.router = router;
myApp = this;
this.config = {}
this.surveyCode1 = "";
this.surveyCode2 = "";
this.surveyCompleted = false;
}
...
if(some condition){
this.surveyCompleted = true;
}
Now, I know that with JQuery, I can send a value from the html file (i.e perhaps typed in by the user into a textbox) over to the JavaScript file by inserting:
value.bind="username"
into the HTML tag. I also know that strikethrough in HTML can be done with a:
<del> tag
I'm just not sure how to connect this logic in reverse, to use my surveyCompleted conditional variable to set the tag within my HTML page.
You code seems like its using Aurelia. So i would recommend you use aurelia and not Jquery for this. So this should be quite easy as Aurelia supports conditional templates.
Official Docs. So what you can do something like this.
<div class="container">
<div class="row row-eq-height" style="border: none; height: 70px; padding:10px;"></div>
<h1>Surveys</h1>
<li>
<a target="_blank" if.bind="!surveyCompleted" href.bind="PreTestLink">PreTest Survey 1</a>
<a if.bind="surveyCompleted" target="_blank" href.bind="PreTestLink"><del>PreTest Survey 1</del></a>
</li>
<li>
<a target="_blank" if.bind="!surveyCompleted" href.bind="PreTestLink">PreTest Survey 2</a>
<a if.bind="surveyCompleted" target="_blank" href.bind="PreTestLink"><del>PreTest Survey 2</del></a>
</li>
I dont know aurelia but i think this must do the trick for you. Let me know if you still face issues.
Hope this helps :)

Unwanted Char Appears Giving Url to Images

I have images in this order : [image][image]
When i give each of them an url, - char suprisingly appears between them.I don't understand why - appears.
Here is the code :
<div style='float:left; width:320px;'>
<span>
<a href='http://www.boun.edu.tr'/>
<img style='width:75px; height:75px' src='$img_root/logo_bogaz.jpg' alt='logo bogazici university'>
</span>
<span>
<a href='http://www.gyte.edu.tr'/>
<img style='width:70px; height:70px' src='$img_root/gyte.gif' alt='logo gyte'>
</span>
</div>
And OUTPUT :
It is part of the underline from your anchor tag. You can remove the underline as per below. (Note this will remove it for all links)
Add this to fix:
<style>
a {
text-decoration:none;
}
</style>
Ideally this should go in a separate CSS file. But add it to the top of your HTML for an easy test.

Insert html in the output of smarty mailto function

I know how to use the smarty mailto function to create mailto anchor links with encoding. But I am wondering if it is possible for example to insert html image tags [<img>] into the output of this function.
I have tried:
[SMARTY]
{$text = '<img src="/images/qr_code.jpg" alt="member sign up qr code">'}
{mailto address="test#example.com" encode="hex" text={$text}}
[HTML RESULT]
<a href="mailto:%74%65%73%74#%65%78%61%6d%70%6c%65.%63%6f%6d">
<img src="/images/qr_code.jpg"
alt="member sign up qr code" >
</a>
I am after this output rather:
<a href="mailto:%74%65%73%74#%65%78%61%6d%70%6c%65.%63%6f%6d">
<img src="/images/qr_code.jpg"
alt="member sign up qr code">
</a>
It seems, from reading this code https://bitbucket.org/pferor/dbless/src/04b228943e39/dbless/lib/smarty/plugins/function.mailto.php, that when you use the "hex" encoding it not only encodes the address but also the text (line 147):
$text_encode = '';
for ($x=0; $x < strlen($text); $x++) {
$text_encode .= '&#x' . bin2hex($text[$x]).';';
}
Not sure if that's the problem though.
If you don't mind editing the Smarty source youmight be able to change this line (153):
return '<a href="'.$mailto.$address_encode.'" '.$extra.'>'.$text_encode.'</a>';
To this:
return '<a href="'.$mailto.$address_encode.'" '.$extra.'>'.$text.'</a>';
To make it work.
If you try "none" encoding does it show the image then?

html image not appearing

I have the following line of code:
<IMG SRC= "Home.png">
I copied this directly from a different part of my code that worked. However, now the home image won't show up on my site. It says it prints it, but it's not visible. What's going on?
edit:
if(isset($_SESSION['userInfo']['username'])){
echo '<div class = "header"><IMG SRC= "Home.png" ALT="image">
<IMG SRC= "ViewProfile.png" ALT="image"> <IMG SRC= "ViewCart.png" ALT="image">';
echo '</div>';
else{
echo '<div class = "header">
<IMG SRC= "Home.png">
<IMG SRC= "FAQ.png"></div>';
}
You are missing the closing parenthesis } for the if statement. That might be the problem.
Try this...
if(isset($_SESSION['userInfo']['username'])){
echo '<div class = "header"><IMG SRC= "Home.png" ALT="image">
<IMG SRC= "ViewProfile.png" ALT="image"> <IMG SRC= "ViewCart.png" ALT="image">';
echo '</div>';
} else {
echo '<div class = "header">
<IMG SRC= "Home.png">
<IMG SRC= "FAQ.png"></div>';
}
Try
<div class="header">
<img src="Home.png"/>
<img src="FAQ.png"/>
</div>
Is it a broken image icon on the browser?
One thing might be that Home.png is in another directory. Did you copy this code from the same file or another file (possibly located in another directory)? If you copied this code from a file located in another directory you will need to format the image source link accordingly.
For example say you have a directory structure like so:
-index.htm (File)
-Home.png (File)
-js (Directory)
-css (Directory)
-pages (Directory)
---example.htm (File inside Pages directory)
If you then copied the code from your index.htm file to the example.htm located in your pages directory you would need to modify the link in the example.htm page like so:
<img src="../Home.png" />
Note the ".." which tells the browser to look in one directory up from where your html page is located.
be sure that the image and file in the same folder
and be sure that the name of image Home with H as capital letter