I have started learning html and php. I know very little coding of it. I am confused for using png icons in my action buttons. I have currently text button with css. I want use png icons instead that text buttons. I have used it like below
<td>
Edit
Activate
Delete
</td>
Now I want use png icons there instead of text. What should I do for it ?
I have icons located in directory called icons.
Sorry for my little knowledge.
Thanks
You can add icon as image in your code, check below snippet
<td><img src="https://dummyimage.com/20x20/000/fff.png&text=E" alt="Edit"/>
<img src="https://dummyimage.com/20x20/000/fff.png&text=A" alt="Activate"/>
<img src="https://dummyimage.com/20x20/000/fff.png&text=D" alt="Delete"/></td>
It depends on the structure of your web folder, where icons directory is in your web folder.
If you have icon directory in your root folder and php file is also in root then you can simply use below syntax :
<img src="icon/image_name.jpg" alt="" />
Or you can use complete path for icon folder relative to your website url as shown below :
<img src="http://localhost:8080/websitename/icon/image_name.jpg" alt="" />
Related
how can i set image url in page ?
In image you can see I have tried by three ways but it not work.
Images are located under image folder of active theme.
You have three image tags all pointing to different urls of which two appear malformed.
The middle image tag in your screenshot seems the most accurate but you may want to add a semicolon after the right paranthesis.
If all three files are supposed to refer to the same image, then replace the first and last image tags with the middle one.
Then if it still doesnt work then replace bloginfo('template_directory') with the actual location to the images relative to document root on the server but put the value in quotes. For example, if your images are in the subfolder images in folder imageset on your site, then you could use
"http://www.whatever.com/imageset/images" or "/imageset/images".
which results in the code:
<img src="<?php echo "/imageset/images"; ?>/images/banner1.jpg" alt="">
or even better:
<img src="/imageset/images/images/banner1.jpg" alt="">
Try as follows <img src="../images/banner1.jpg" alt="">
In my wordpress site, let's say I have an image that is located in:
/wp-content/themes/root-theme/assets/img/image-1.png
If I want to access this image in a blog post, when using the html editor in Wordpress I have to type out:
<img src="/wp-content/themes/root-theme/assets/img/image-1.png" />
This generates a url of:
http://my-site.com/wp-content/themes/root-theme/assets/img/image-1.png"
This is a massive pain. I'd much rather be able to write:
<img src="/img/image-1.png" />
That is, I want to make it possible to access my assets folder from the root directory, so that the image above could be accessed via:
http://my-site.com/img/image-1.png
Is this possible to do or would it majorly screw up the rest of the site?
You'll have to use the media manager, it will write the full link out for you, no need to type anything. Just above the editor click "Add media", select your image, click insert into post and you're done.
Use bloginfo function to get full url of your theme :
<img src="<?php bloginfo('template_directory');?>/assets/img/image-1.png" />
Output: http://my-site.com/wp-content/themes/root-theme/assets/img/image-1.png
Reference
Im trying to display images from a directory "uploaded_files"
Source : using the code from this tutorial
but all I get is boxes and no images link to my project
Your code is <img scr="...
Change it to <img src="...
I have the following script
<div class="left">
<img src="image1.jpg" height="186" width="160" />
</div>
<div class="center">
<img src="image2.jpg" height="186" width="160" />
</div>
<div class="right">
<img src="image3.jpg" height="186" width="160" />
</div>
which generates the following :
I have this simple form to upload an image:
<form action="upload/image" method="post">
<input type="file" name="upload_image" />
<input type="submit" />
</form>
The reason to upload an image is to see how the mug(above) would look like with the image.
Now after uploading the image the mugs would look like following
Figure-2
Now if you kindly take a closer look at the above image you will see the uploaded image is sticked with the mug in such a way that as if it was designed with Photoshop but actually it was not .
Now my question is would you please kindly tell me how to paste the uploaded image on to all the three images of the coffee mug and make them look like the figure-2.
Thanks in Advance :)
P.S
I got the idea from this site-> http://www.zazzle.com/cr/design/pt-mug
I am trying to achieve the same thing the website has(I have been trying for so long but yet no result... failing to put the the uploaded image on the images of the mug ).
Here's the download link for the image I used here http://i43.tinypic.com/d66h4.png
Yes, you can do this.
If you examine the given url from Zazzle.com, after uploading the image, it is calling a program on their server - "designall.dll". It is doing all the magic.
As our other friends mentioned, it is not possible to achieve that effect simply with HTML, CSS and JavaScript (without using Canvas).
But using some server side program you can achieve this without any issues.
As I program on LAMP, I am giving a solution to implement the same with PHP and ImageMagick.
User uploads an image.
Image will be sent to a back-end PHP file.
PHP will distort the image as per our requirements.
Creates three copies and store in a temp folder with some unique ID.
As a response to that we will get some success code.
Once we get a success code, we will load the images from temp folder.
As the user clicks on any type of image, we will update the image as required.
And regarding the actual distortion code, you can use ImageMagick plugin.
More information about ImageMagick plugin can be found at :
ImageMagick Website
More information about the ways to distort (actually wrapping) an image using ImageMagick can be found at : Wrapping and Distrotion. These links contain good number of examples with preview too.
For our example, we need to create some static code which will distort an image every time in same shape.
Please let me know if I am missing something.
Friends, please help "black_belt" with better solutions if any.
Thanks.
I am new to Symfony.
I created a layout page in which I have this :
<img src="images/header.jpg" width="790" height="228" alt="" />
but the image isn't displayed in the page when accessed from the browser.
I put the file header.jpg in the web/images/ folder.
I thought I could learn Symfony in a week while working on a small project. is it possible ?
Use slash at the beginning like
<img src="/images/header.jpg" width="790" height="228" alt="" />
You can also use image_tag (which is better for routing)
image_tag('/images/header.jpg', array('alt' => __("My image")))
In the array with parameters you can add all HTML attributes like width, height, alt etc.
P.S. IT's not easy to learn Symfony. You need much more time
If you don't want a fully PHP generated image tag but just want the correct path to your image, you can do :
<img src="<?php echo image_path('header.jpg'); ?>"> width="700" height="228" alt="" />
Notice that the path passed to image_path excludes the /images part as this is automatically determined and created for you by Symfony, all you need to supply is the path to the file relative to the image directory.
You can also get to your image directory a little more crudely using
sfConfig::get('sf_web_dir')."/images/path/to/your/image.jpg"
It should be noted that using image_tag has a much larger performance cost attached to it than using image_path as noted on thirtyseven's blog
Hope that helps :)