Develop Reference

Image is not downloaded when clicked [duplicate]

Noob webdeveloper here.
I'm trying to download an image from an url on click. But when I use the image url as my href it just redirects to that url instead of downloading. Of course I am using the download attribute. I have tried my own code and also mulitple code blocks from other people. But all of them just redirect. I am using google chrome.
My code:
<a href = "https://autoooo.nl/wp-content/uploads/2018/12/F5144B9C-2B27-4070-828E-2361EBD702EF-400x400.jpeg" download="car" id="downloadQRCodeButtonHref">
<p>download</p>
</a>
Code I used from someone else 1(accepted answer):
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
<img alt="ImageName" src="/path/to/image">
</a>
Code I used from someone else 2:
<p> Click the image ! You can download! </p>
<?php
$image = basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically
//echo $image;
?>
<a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/sc/img/logo.png">
</a>
Some help will be appreciated. I might just be a big dum dum and overlook something extremely obvious.

The problem is because you're using a cross-domain URL. From the documentation for the download attribute:
download only works for same-origin URLs, or the blob: and data: schemes.
To fix this you need to host the image on the same domain as the parent site.

Getting images size using php or javascript / jquery - getimagesize fails

I'm using a really good lightbox script but it needs me to output the image sizes. The site I'm using is php and can resize images as they are uploaded. It does not store the images sizes in the database.
The code needs to be displayed as follows.
<a href="http://www.fullurl.com/image.jpg" data-original-url="http://www.fullurl.com/image.jpg" data-original-width="123" data-original-height="456">
<img src="http://www.fullurl.com/thumbnail-image.jpg" alt="product name" />
</a>
I've tried using getimagesize but it only works on images that have not been resized by the system. I think they are missing some vital info as images that have uploaded but not resized work fine. There are currently about 1200 images already uploaded so redoing them is not an option.
My current method is using php as follows.
<?php
$image1 = 'http://www.fullurl.com/thumbnail-image.jpg';
list($width, $height) = getimagesize($image1);
?>
<a href="http://www.fullurl.com/image.jpg" data-original-url="http://www.fullurl.com/image.jpg" data-original-width="123" data-original-height="456">
<img src="http://www.fullurl.com/thumbnail-image.jpg" alt="product name" />
</a>
If I use the following I get bool(false) as the output.
$path1 = 'http://www.fullurl.com/image.jpg';
$vals_arr1 = getimagesize($path1);
echo "<pre>";var_dump($vals_arr1);echo "</pre>";
I'm not a programmer. My question is how can I output the image info as below? I'm happy to try alternative php, jquery / javascript as is needed. Ideally it needs to be simple and fast.
<a href="http://www.fullurl.com/image.jpg" data-original-url="http://www.fullurl.com/image.jpg" data-original-width="123" data-original-height="456">

This works
$path1 = 'https://jpeg.org/images/jpeg-home.jpg';
$vals_arr1 = getimagesize($path1);
echo "<pre>";var_dump($vals_arr1);echo "</pre>";
The bug must be somewhere else. Check the URLs! Are they valid?
And check if allow_url_fopen is set to true on your server.
Else this can help: https://stackoverflow.com/a/25231517/4916265

As noted by james dot on the PHP docs website, getimagesize will download the entire image before it checks for the requested information. This is extremely slow on large images that are accessed remotely. Since the width/height is in the first few bytes of the file, there is no need to download the entire file. He wrote a function to get the size of a JPEG by streaming bytes until the proper data is found to report the width and height.
The way he wrote it will allow a remote image.
The code can be found here: http://php.net/manual/en/function.getimagesize.php#88793

Show image change URL without reload the page

How can I click an image, open the image without reloading with php and javascript?
<?php
echo '<li>
<a href="photo.php?id='.$id.'">
<div class="_th_alb">
<img src="image/'.$allbum_photos.'" >
</div></a>
</li>';
?>
with like image

What you want is called a modal.
You can see some examples right here:
http://www.w3schools.com/howto/howto_css_modal_images.asp
To the modifying URL part:
You can use
window.history.pushState('a string or object', 'Title', '?image=as1234da3sdasd');
Hope this helps

Google Tag Manager - CSS selector challenge

I am trying to get the URL of a link in the source code. The challenge is that the URL is hidden behind a image, and thus only letting me fetch the image-url.
I've been trying to figure a way to solve this issue by using the new CSS selector in the trigger system and also made a DOM variable that should get the URL when the image is clicked. There can also be multiple downloads.
Here is an example of what I am trying to achieve:
<div>
<div class="download">
<a href="example.com/The-URL-I-Want-to-get-if-top-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Another-URL-I-Want-to-get-if-middle-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Last-URL-I-Want-to-get-if-bottom-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
</div>
</div>
There are much code above and below this snippet, but with the selector it should be fairly easy to get the information I want. Only that I don't.
If anyone have met this wall and solved it, I really would like to know how. :)

This is one possible solution. So as I understand it, you would like to grab the anchor element's href attribute when you click the "download" image.
A Custom Javascript variable would need to be created so that you can manipulate the click element object:
function(){
var ec = {{Click Element}};
var href = $(ec).closest('a').attr('href');
return href;
}
So you will need to do your due diligence and add in your error checking and stuff, but basically this should return to you the href, and then you will need to parse the string to extract the portion that you need.

Check referrer and find the href that leads to it, then trigger a click with javascript

I'm working on a WP single page portfolio that loads post content with AJAX. I read that WP doesn't need #! URLs to make it crawlable by Googlebot. If I understand it correctly, since Googlebot won't interpret ajax, it will just follow the link and index the article page.
So I removed #! from my URLs and when a post is opened I update them with .pushState.It's working fine, but if I hit F5 or if I try to load a specific URL (not the home) I fall into the page of the post (single.php).
To prevent it, I added a javascript redirection in single.php that leads users to the homepage. Then I need to open the content of the article on the homepage.
Here is the address of my site: http://www.youpiemonday.com/ (the redirection isn't online yet).
How can I tell the browser "if you're coming from this page (the referrer), trigger a click on the thumbnail which href is corresponding" (the click will load the content)?
I'm digging around this but I have no idea how to target the thumbnail correctly...
<script type="text/javascript">
$referer = document.referrer; // where we come from
$LinktoRef = $('.ProjectWrap').find("a").href; // the href in the thumbnail
console.debug($LinktoRef); // still undefined...
if ( $LinktoRef == $referer ){
find("a").trigger('click');
}
</script>
Here is what the html markup looks like:
<div id="portfolio-list">
<div class="ProjectWrap">
<?php the_post_thumbnail(); ?>
<a href="<?php the_permalink(); ?>">
<div class="contentProject">
<h4 class="ProjectTitle"><?php the_title(); ?></h4>
</div>
</a>
</div>
<div class="ProjectWrap">//same as above</div>
<div class="ProjectWrap">//same as above</div>
// and the list goes on...
</div>
I'm not really a programmer so any help would be very appreciated. And if you can comment your code, that would be invaluable to me.

Because you are probably trying to reference the element before it is rendered on the page. Use document ready or window onload and reference the link there.