I have this code to upload an image from Edit Profile page and display it on Profil page:
Code on Edit Profile Page to upload image:
echo '<input type="file" name="my_file_upload" id="my_file_upload_id" class="bg_checkbox"/>';
function register_team_show_case_setting() {
//register our settings
register_setting('my_team_show_case_setting', 'my_file_upload');
}
require_once( ABSPATH . 'wp-admin/includes/image.php' );
require_once( ABSPATH . 'wp-admin/includes/file.php' );
require_once( ABSPATH . 'wp-admin/includes/media.php' );
$attach_id = media_handle_upload('my_file_upload', $post_id);
if (is_numeric($attach_id)) {
update_option('option_image', $attach_id);
update_post_meta($post_id, '_my_file_upload', $attach_id);
}
Code to display image on Profile Page to display uploaded image:
echo wp_get_attachment_url(get_option('option_image'));
The upload part works, but when I go to the Profile Page to view the uploaded photo, it shows a URL instead of the image itself, like this: https://i.imgur.com/CSFFK1g.png
Should I make something like this to display correctly?
<img href="wp_get_attachment_url(get_option('option_image'));"/>
<img src="<?php echo wp_get_attachment_url(get_option('option_image')); ?>" />
You need to pass he image source to the src attribute not the href attribute, which is meant to send users to a different web page not render images.
Related
Blurry Image
Original image
I have a simple image upload function in php. It takes an image and uploads it to the database as a blob. When i call the image into the gallery it becomes blurry. Is there a way around this i have heard of people using GD etc. My code is below for the upload and the calling.
gallery.php
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1300px;height:500px;overflow:hidden;">
<?php
$result = mysqli_query($connection, "SELECT * FROM tbl_images");
while($row = mysqli_fetch_array($result))
{
?>
<div>
<?php echo'<img width="100%" height:"100%" class="img-fluid" src="data:image/jpg;base64,' . base64_encode($row['name']) . '" />' ?>
</div>
<?php } ?>
uploadFile.php
<?php
if(isset($_POST["insert"]))
{
$file = addslashes(file_get_contents($_FILES["image"]["tmp_name"]));
$query = "INSERT INTO tbl_images(name) VALUES ('$file')";
if(mysqli_query($connection, $query))
{
echo '<script>alert("Image Inserted into Database")</script>';
}
}
?>
Try adding image-rendering: pixelated CSS style to your img element.
i've got a problem with displaying image I've just uploaded by imagine.
Now in my view file I have
<?= Html::img("#uploads/$file->hash/$file->hash-$typeThumbnail.$file->extension") ?>
which correctly displays in browser
<img src="/home/user/projects/project/_protected/runtime/uploads/1d30a595950237c599deb4fe02750489/1d30a595950237c599deb4fe02750489-2.jpg" alt="">
This file exists in this directory. Also I've made 777 permission to each folder and file in project folder but still I receive 404 not found error...
What am I doing wrong?
try use code, like this.
$img = yii\helpers\Url::to('#web/uploads/').$file->hash.'/'.$file->hash-$typeThumbnail.$file->extension;
$image = '<img src="'.$img.'" width="600" />';
<img src="<?= Yii::$app->request->baseUrl . '/backend/web/uploads/' . $file->hash.'/'.$file->hash-$typeThumbnail.$file->extension ?>" class=" img-responsive" >
I have a wordpress site, that need to show pages using swipe, I choose to use Jquery Mobile, and I get it working fine. Now, we have 2 languages on site, using wpml plugin. And my Swipe Code works well, except when we use Change language button swipe fails.
Details on issue.
We have only 3 Text Only page in our website, in 2 language. And in Footer we have link to change language. Also client hate to have Ajax page loading, so what I did is I create three Div with data-role=page and put data-next, data-prev as #div-$postid. So the navigation works absolute fine. I put footer outside from data-role=page.
Now, when I click change button in footer, it load the english page [I saw it using Fiddler] and then take first data-role=page from server and replace /slide its content. However since it only pick the first data role, all other english page doesn't get in HTML [it just update DOM and doesn't navigate to english version]. so swipe fails as other english pages are not in dom.
Also, footer is not changing, so what I want is: can we simple force a Link to navigate instead of going swipe way? Jquery Mobile is enforcing swipe on all A tags, I do not want swipe to works anything outside data-role=page.
Hope I make sense.
Edit here is code: [not sure if this code will help at all]
<?php
get_header();
global $post;
$args = array('post_type' => 'mobile_slide','showposts' => '-1', "order" => "DESC");
$the_query = new WP_Query($args);
if($the_query->have_posts()){
while($the_query->have_posts()) { $the_query->the_post();
$prev =get_previous_post();
$next =get_next_post();
if($prev) {
$prev = "#page-" . $prev->ID; //get_permalink($prev->ID);
} else {
$prev='';
}
if($next) {
$next = "#page-".$next->ID; //get_permalink($next->ID);
} else {
$next='';
}
if (has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'slider_image' ); ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>" style="background-image:url('<?php echo $image[0]; ?>'); background-position:center center; background-color:#000; background-repeat:no-repeat; ">
<?php } else { ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>">
<?php } ?>
<div class="post_box">
<h2><blockquote><?php the_title(); ?></blockquote></h2>
<div class="post_entry">
<?php the_content(); ?>
</div>
</div><!-- post_box -->
</div>
<?php }
} ?>
<?php get_footer(); ?>
This is all I have, except that get_footer use Ul li based list where on LI change based on language variable, to show different images for either language.
To stop Ajax from loading pages/links, add to link anchor data-rel="external" or data-ajax="false". This will load page normally without any transition.
Reference: jQuery Mobile - Links
For those who have similar problem, I fix it by using following:
1) I add a "noswipe" class to A Tag so I can refer it in Jquery
2) I add following code
$(function(){
$(".noswipe").click(function(){
window.location.href= $(this).attr("href");
return false;
});
});
The above code simply enforce to skip the Mobile's parsing and calling and works for my case.
I have to change font in the new window of window.open() because I want to print in receipt printer. I already change the True Type Font Subtitution but it doesn't work . So how can I add css for the new open window ??
here's my code :
<img src="barcode.png" id="barcode">
<script type="text/javascript">
function printImg() {
ImageLink=document.getElementById("barcode").src;
pwin=window.open('','','width=0,height=0');
pwin.document.write("<center><h>My Store<h><br>Ekiosk</center><br>Date : <?php echo date('Y/m/d'); ?><br>Time : <?php echo date('H:i:s'); ?><br>Customer Name: <?php echo $cust['firstname']; ?> <?php echo $cust['lastname']; ?> <br>Total : <?php echo $cust['total']; ?><br><center><img src='" + ImageLink + "'/><br>Thanks For Shopping !</center>");
pwin.print();
pwin.close();
}
</script>
Can anyone help me to change font into font receipt ?
Add a CSS file
<link href="your.css" ... />
Just like you're doing with your pwin.document.write sentence
You should also write a full valid html code in the document.write, including html, title, head and body tags, and put the link inside the head tag, like you use to do in any other page.
Can someone please provide me with some links (or source code) for me to research about how to upload images to a website (by the community) and for these images to be viewed online by the community.
I have searched via google, but have had no luck.
Thank you.
EDIT
Sorry, I have actually seen many examples to upload files. I am wanting (if possible) to be able to upload images, and then have them arranged in some kind of gallery so that the community can see/view them.
I am after a range of different technologies that are available on the WWW if possible.
Copy the below codes and save it as upload.php or anything.php (note it should be saved as php extension and should be run on apache server or any server supporting php).
<?php
if(isset($_REQUEST['submit']))
{
$filename= $_FILES["imgfile"]["name"];
if ((($_FILES["imgfile"]["type"] == "image/gif")|| ($_FILES["imgfile"]["type"] == "image/jpeg") || ($_FILES["imgfile"]["type"] == "image/png") || ($_FILES["imgfile"]["type"] == "image/pjpeg")) && ($_FILES["imgfile"]["size"] < 200000))
{
if(file_exists($_FILES["imgfile"]["name"]))
{
echo "File name exists.";
}
else
{
move_uploaded_file($_FILES["imgfile"]["tmp_name"],"uploads/$filename");
echo "Upload Successful . <a href='uploads/$filename'>Click here</a> to view the uploaded image";
}
}
else
{
echo "invalid file.";
}
}
else
{
?>
<form method="post" enctype="multipart/form-data">
File name:<input type="file" name="imgfile"><br>
<input type="submit" name="submit" value="upload">
</form>
<?php
}
?>
And you should create two folders("uploads" and "tmp") in the parent directory (Where the script executes).
Now your upload script is ready. It's simply an upload script with which you can upload one image at a time.
Here's a good, basic start using PHP: http://www.w3schools.com/php/php_file_upload.asp
In order to get a list of files in a directory (assumes the file path is known ahead of time) you can do something like this:
$filePath = $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'uploads';
$files = scandir($filePath);
If you wanted to filter this down to look for image files you could use something like this:
$filePath = $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . 'uploads';
$files = scandir($filePath);
$imageFiles = array_values(preg_grep('/^.*?\.((gif)|(png)|(jpe?g))$/', $files));
And for a good guide on uploading the files you can check out http://www.exchangecore.com/blog/how-upload-files-html-php/