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.
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.
I have ACF set up to be called into a fancybox. It's pulling in the fields (because I can see the hardcoded header information) but nothing from the ACF. I've set the link to call an ID which is then assigned to the section I want to call when clicked.
I expect to click the image and open the fancy box with the ACF image and content displaying in the fancybox. What I get is header fields and no acf content.
I've tried removing the display none from the class.
I tried hard coding a basic a tag calling a p and that seemed to work, but when I put in the ACF information, it breaks.
I also removed all of the php and just hard coded in an image and content, and it works. It just doesn't like the php calling my ACF.
<a href="#popup" data-fancybox>
<img class="image" src="<?php the_field('project_image', get_the_ID()); ?>" />
</a>
<section id="popup">
<img src="<?php the_field('project_image', get_the_ID()); ?>">
<h3>About</h3>
<p><?php echo $about_content;?></p>
<hr class="hr-left">
<h3>Features</h3>
<p><?php echo $features_content; ?></p>
<a class="btn secondary-btn" href="<?php echo $code_reference_url; ?>"><?php echo $button_text; ?></a>
</section>
When the image is clicked, a fancy box will open and display the content within the "popup" div. What's happening is that it's opening the lightbox and populating with empty fields.
I was able to resolve this. I didn't have the information operating inside the loop. See solution below:
<?php while ($loop->have_posts()) : $loop->the_post();
$about_content = get_field('about_content');
$features_content = get_field('features_content');
$button_text = get_field('button_text');
?>
Really struggling to think of a solution to this problem. I have thought anchor links might help (using the #example on the end of a link to scroll to a position on the page) but not sure how best to implement them.
So on the homepage of my site I have a list of links, that correlate to tabs on another page.
The links on the homepage:
(What is e-Bate, What are rebates etc.)
Links
When you click one of the tabs on the other page, it activates a script which shows a certain div below:
Tabs
This is how the tabs are shown:
HTML:
<div class="page-links">
<ul>
<li>What is e-Bate?</li>
<li>What are rebates?</li>
<li>e-Bate features</li>
<li>How e-Bate works</li>
<li>Case studies</li>
</ul>
</div>
<div class="page-contents">
<div id="whatebate" class="hideshowdiv">
<?php echo CFS()->get('whatisebate'); ?>
</div>
<div id="whatrebate" class="hideshowdiv">
<?php echo CFS()->get('what_are_rebates'); ?>
</div>
<div id="ebatefeat" class="hideshowdiv">
<?php echo CFS()->get('e_bate_features'); ?>
</div>
<div id="howebate" class="hideshowdiv">
<?php echo CFS()->get('how_e_bate_works'); ?>
</div>
<div id="casestud" class="hideshowdiv">
<?php echo CFS()->get('case_studies'); ?>
</div>
</div>
jQuery:
jQuery(document).ready(function() {
jQuery(".page-contents div.hideshowdiv").hide();
// Show chosen div, and hide all others
jQuery("a").click(function (e)
{
//e.preventDefault();
jQuery("#" + jQuery(this).attr("class")).fadeIn().siblings('div.hideshowdiv').hide();
});
});
So when one of the links is clicked on the homepage, for instance, the 'What is e-Bate?' link, I want it to go to the other page, and click the corresponding tab, showing the content for that section. Is this possible? Thanks in advance.
This is very possible and you had half the equation with the anchors. Now you just need to write a small function to parse out the URL and check for a certain tag.
So something like this:
$(function(){
if (location.href.indexOf("#example") != -1) {
//This is where you put your function to show the tab
}
if (location.href.indexOf("#anotherexample") != -1) {
//This is where you put your function to show the tab
}
})
Well, if you can use PHP, then it is indeed pretty easy:
First, you need to create a PHP file, obvious with an input parameter, preference, two GET variables, the first one being the link of the page you want to visit and the second one can be, well that depends on how you want it to be, it can be a div id, or a div class or pretty much id of anything you want to click on the second site (You MUST KNOW which button/link you want to click on the second site)
Then first in your php code, store these two things into variables, Let us take $Path and $DivToClick,
Now, use this PHP function:
file_get_contents(path,include_path,context,start,max_length)
Here, the path is an required field, rest is all optional.. and then after that, echo a JQuery code which will do something like this
function ClickTheButton ()
{
$('#divId').click ();
}
Now, let me explain what we are doing here... First, you are sending link to a php script that get all the contents of that webpage and display it on my screen, and then when you are echo-ing the JQuery code, you are telling browser, that yes, this is the part of the page, execute it and simulate the action of click on this page, and thus the click action is simulated and things are done as per your need...
Hope this helps... :)
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.