We Keep Coding

Can't echo code correctly. CSS dissapears

I want to make an email-signature page with Elementor and then generate the HTML-code like the code when you that appears when you "View Source" of a page, but code gets not exactly correct. I am using a Custom post type and a Elementor template that is not published so it works only when writing: https://mysite123123.com/a/site/?theme_template_id=1164
I have a PHP snippet plugin and this code gets the Post type HTML but not the same like when you press rightclick/View Source. (Its missing some css etc)
Can you see what Im doing wrong or if you know how to echo the correct html from a webpage like a regular visitor see it?
(Im using this code to give a user a HTML signature)
<?php
global $wp;
$vpost = get_post($post_id);
$urlcard = $vpost->post_name;
$current_url = home_url( $wp->request );
$data = file_get_contents("https://mysite123123.com/a/".$urlcard."/?theme_template_id=1164");
$html_encoded = htmlentities($data);
echo $html_encoded;

You can tell the browser how it should render your data using a Content-Type HTTP Response header.
To have your data rendered as plain text -- as the 'View source' view does -- use "text/plain" as mime-type;
header("Content-Type: text/plain");
echo $data

How to download big size images using <a> tag

I'm trying to connect to the database and view pictures from there. Despite the fact that all pictures are shown, it is not possible to download them. To download I use tag .
Here is my code.
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td align="center">
<a href="data:image/jpeg;base64,'.base64_encode($row['Pilt'] ).'" download>
<img src="data:image/jpeg;base64,'.base64_encode($row['Pilt'] ).'" width=400 class="img-thumnail" />
</a>
</td>
</tr>
';
}
Here is a small part of the database where I get pictures. https://imgur.com/yZGsFzb . So I noticed that only one photo is being downloaded, which size is 150.4KiB.
I expect that by clicking on the image (any size) it will be downloaded. Right now when I click on image appears error like this https://imgur.com/yZrlIH8 whereas I would like to see something like this https://imgur.com/4vkUukp .
I will be very grateful for any help.

I recommend you stop printing large quantities of big images that way, they will be hardcoded in the HTML code and downloaded all at once to the browser's cache, 2 times (3 with the click included). This wastes RAM and bandwidth. The network error you get is probably caused by the abnormally big size of the href in your link (might even look a bit like malware to your browser).
Instead, you want to serve these images dynamically on a PHP script first (by setting the header to 'Content-Type: image/png' and printing the image contents as obtained from your database) and provide a direct URL to the script.
This example works just as described in your screenshots, I'm indicating where you should replace your SQL queries to obtain the image:
while(for all your rows)
{
echo '
<tr>
<td align="center">
<a href="image.php?id=' . $id . '" download>
<img src="image.php?link=' . $id . '" width=400 class="img-thumnail" />
</a>
</td>
</tr>';
}
And image.php would look something similar to:
<?php
$id = htmlspecialchars($_GET['id']);
header('Content-Type: image/png');
$content = store the image contents from the BD here ($row['Pilt'] in your code);
echo $content;
Notice that image.php serves images dynamically and I'm supposedly identifying each image with an id (perhaps your row id? You can think of more secure identifiers too if ids are not public already). This is a common security practice in PHP so that you're not providing absolute file paths or other information to attackers.

Change image src from AJAX request

I have been trying a lot of different ways to make a change on a image src from a AJAX Requset, the new URL is retrived from an AJAX call, with the Developer Tools i visualized data the returning variable 'DATA' have the expected URL but the image SRC get this:
"atrk.js-; var s = document.getElementsByTagName('script')[0];s.parentNode"
The AJAX Request:
$.post("readurl.php",function(data){
$("#imagen").attr("src",data);
});
The HTML Element:
<img id="imagen" src="old_pic.png">
The PHP file:
<?php
$xml=simplexml_load_file("links.xml");
echo $xml->URL_one;
?>
I hope someone can help me.
Thanks in advance!

try to use prop function:
$("#imagen").prop("src",data);

How to echo encoded url image through <img src>

Let's say I have a url of an image link location that doesn't have an extension (.jpg) but when I go to the url it shows me that the corresponding link is an image? How would echo this url in php?
For example the recaptcha image from recaptcha.net it encodes the string with a public key. When I make an html file and use it outputs the image on the page, but when I try to echo the same attributes in php it just outputs a blank image and doesn't display the google captcha image. I am trying to create a forum login page for vbulletin but in this case it should use the captcha implementation since I don't want to sign up for crawling with bots on the my page by google. Can anyone tell me how I can go about doing this?
So basically after the request is made to obtain the key from the image which is assigned to $key the echo request doesn't output the image:
$key = the data inside the GET parameter 'c' everytime the captcha is requested.
echo "<img src='www.google.com/recaptcha/api/image?c=".$key."'/>";

You can use a image regardless of the file extension. It's the MIME type that matters.
The reason why the following won't work is because of no specified protocol.
<img src="goo.gl/XWyGjO"/>
Working:
<img src="//goo.gl/XWyGjO"/>
<img src="http://goo.gl/XWyGjO"/>
<img src="https://goo.gl/XWyGjO"/>
// = inherit the current protocol.

Simplest way for image upload function , without refreshing page

Here's a challenge:
I don't care about which language to use, Javascript, PHP, .. whatever.
I need the most simple way to let my user upload an image.
I will later offer the user a way to place it on a canvas (displayed inside a div, with jquery draggable)
I can not have the page refreshed since there are useful variables in other fields etc..
(I don't have any security preferences as this will be a local website for intranet)
I tried:
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
</br>
<input type="file" name="file" id="file" size="70%"><br>
</br>
<input type="submit" name="submit" value="Submit">
</form>
But then came to realise there are soo many options out there, such as uploadify, and i easily got lost online..

You have two choices to make a file upload w/o refreshing the page:
Use HTML5 form upload
Post the form to an hidden iframe
The latter one gives best browser compatibility, and is what I'd suggest you to use. To post to an hidden iframe, simply set the target of the form to the iframe:
<script>
// Global callback function from the file
function uploadCallback(){
console.log("File is uploaded!");
}
</script>
<iframe name="hiddentarget" style="display:none;"></iframe>
<form action="upload_file.php" method="post" enctype="multipart/form-data" target="hiddentarget">
...
To respond back to the site from the iframe, you will have to go through the window.top frame as such:
upload_file.php:
<?php
// Uploading stuff
// ...
// "Talk" back to the site
// Of course you can (should) pass some parameter to this JS-function, like the filename of the recently uploaded image.
echo "<script>window.top.uploadCallback();</script>";
?>
EDIT:
As suggested by other users; the optimal solution would be to use the File API where supported, and fall back to the hidden iframe on browser that doesn't support it. This gives you nice features such as file uploda progress for example.

The way that I would suggest is using AJAX and and make your upload box a div which can be replaced when the upload is successful. Instead of traditional post you then create a Javascript function for onSubmit. Your action can then be changed to #.
If you lookup AJAX there are some great tutorials about and you will be able to do many more amazing things.
Alternatively look into jQuery which will definitely have something to help you

I'm gonna show you an example on how to use the jQuery Form Plugin to upload files to your server really easy without needing to refresh the page.
First off, download and install the jQuery Form Plugin. After you do that, include it in your files where you want to make use of it. Add an ID attribute to your form tag like this:
id="unique_id"
After you have identified the upload form, put this code in your jQuery:
$(function() {
$('#unique_id').ajaxForm({
target: '.myTarget' // Display here whatever the server side script returns
success: function(response) {
// An usual success callback
}
})
})
Assuming that your server side language is PHP, this is how a simple upload script would look like (upload_file.php):
<?php
$uploaddir = 'your_upload_dir/something';
$uploadfile = $uploaddir . basename($_FILES['userfile']['name']); // Filename
if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
echo $uploadfile;
} else {
echo "Error";
}
?>
Where userfile is the name attribute of your file input (<input type="file" />).
The above code combined returns the relative path to your image which you can use to display the image inside an img tag. You must use Javascript (or jQuery) for that.