Permalink External Images. WordPress
- SOLVED
All images are coming from external source.
Right now, the image are pointing to the external image hoster.
I want to permalink all images. What I want is when you click the image, it will point to the original permalink of the post.
Bunch of images are already posted and it's difficult to update them manually.
I am not using media library.
I am not using and I DO NOT want to use featured image.
Take a look at this sample website. Note: this is just a sample website. The live website has a thousand posts already.
http://lexifier.xyz
Answers (4)
Bob answers:
I think as quick solution jquery can help you here.
login to backend and go to Appearance > Titus Theme Options > Integration section
find "Footer Code" section on that page.
add below code.
<script>
jQuery(document).ready(
function(){
jQuery('a[href*="picstate.com"]').each(function() {
pic_anc = jQuery(this);
if(jQuery('body').hasClass("single")){
pic_anc.contents().unwrap();
}else{
var post_link = pic_anc.parents("div.post").find("h2.title a").attr("href");
if(post_link){
pic_anc.attr("href", post_link);
pic_anc.attr("target", "_self");
}
}
});
});
</script>
save it.
User184621 comments:
Bob, thanks it worked!
I want it also to keep the permalink clickable when it lands the post.
Can you also fix that?
Thank you!
User184621 comments:
I want it also to keep the Images clickable when it lands the post.
User184621 comments:
Bob, is this jquery will sacrifice performance?
User184621 comments:
and what if I change or try to use another external image hoster?
User184621 comments:
Bob, I hope you get back to me.
We're almost done.
I just want the images to remain clickable and still permalink after it lands the post.
Bob comments:
Sorry!
I was sleeping.
I will update the code and let you know.
User184621 comments:
Thank you. I shall be waiting.
I emailed you in [email protected] but it bounced back.
Bob comments:
the email id is "[email protected]". you are missing "a".
Bob comments:
Here is updated code.
<script>
jQuery(document).ready(
function(){
jQuery('a[href*="picstate.com"]').each(function() {
pic_anc = jQuery(this);
if(jQuery('body').hasClass("single")){
var post_link = window.location.href;
}else{
var post_link = pic_anc.parents("div.post").find("h2.title a").attr("href");
}
if(post_link){
pic_anc.attr({href: post_link, target:"_self"});
}
});
});
</script>
Bob comments:
you can add multiple selector if you use site any other than "picstate.com"
Here is sample code. notice "abc.com"
jQuery('a[href*="picstate.com"], a[href*="abc.com"]').
Kyle answers:
Try this. Start by setting up a custom field, Advanced Custom Fields is good or you can use the native solution. Then add a field for your image URL, from there add this to your functions.php file
add_filter('get_the_post_thumbnail_url','get_new_image');
function get_new_image($url, $post_id){
return get_post_meta( $post_id, 'YOURMETAKEY', true );
}
The YOURMETAKEY part is the meta key for your custom field, then you just copy and paste the image URL in to the field and it will do the rest.
User184621 comments:
The above website is just a sample.
The live website has already a BUNCH of IMAGES posted.
Do I need to do it manually, one by one?
Kyle comments:
How do you want the images to get to the site? What is the connection from that site to your new site...
User184621 comments:
Kyle,
http://lexifier.xyz is a sample site; experiment site wherein I can test a possible solution to my main problem.
It has the same post format as the original live site though.
I don't want to apply it right away with the live website which already has a thousand posts.
User184621 comments:
As you can see, when you click the image, it will point and land to the external image hoster.
What I want is to permalink the images (same as the way as the post title is permalink).
I don't want to do it manually 'cause the real live website where I will apply this (possible solution) has thousand of posts already.
Samiha answers:
Look in to your template, find (based on the http://lexifier.xyz/):
<div class="entry clearfix">
<p>
<a href="<?php something_wrote_here; ?>" target="_blank">
<img src="https://picstate.com/files/11204098_l4mtb/pic2.jpg" alt="pic2.jpg" border="0">
</a>
</p>
</div>
Change something_wrote_here by the_permalink()
And remove the target="_blank"
These changes effect on all posts on the page.
Arnav Joy answers:
can you please share the file which is displaying this posts and image?
User184621 comments:
Arnav,
I'm sorry my friend but IDK what file are you referring to.
But the format the ways he images are being posted are always similar to this in Classic Wordpress Editor
<a href="https://picstate.com/view/full/11204098_l4mtb" target="_blank"><img src="https://picstate.com/files/11204098_l4mtb/pic2.jpg" alt="pic2.jpg" border="0" /></a>
<!--more-->
<a href="https://picstate.com/view/full/11204099_ooayi" target="_blank"><img src="https://picstate.com/files/11204099_ooayi/pic1.jpg" alt="pic1.jpg" border="0" /></a>
Arnav Joy comments:
from the file, I mean the theme file which you are using to display these posts.
User184621 comments:
Then in the front end the images will be displayed but the link will obviously go to external image hoster.
What I want is to permalink them. As if you're clicking to a post title's permalink.
User184621 comments:
You mean the theme plugin?
Arnav Joy comments:
can you please come online on skype : arnav.joy
or hangout: [email protected]
Arnav Joy comments:
or send me the zip file of the theme Titus you are using.
User184621 comments:
here is the download link of Titus theme
https://flexithemes.com/titus-wordpress-theme/
Arnav Joy comments:
have you edited the theme files?
Because as I can see they are using the correct method to link a post to its detail page.
User184621 comments:
Did you download the file or you're looking at the demo page?
I think the images there were uploading using media library; I'm not.
User184621 comments:
I didn't modified the theme either.
User184621 comments:
I'm using external images as I always mentioned not the media library to save local storage.
Arnav Joy comments:
Is it possible you can provide me FTP access?
Because I have to see the actual files.
you can send me access to my mail.
User184621 comments:
Here's the download link of the file:
https://flexithemes.com/download/?theme=titus
Arnav Joy comments:
yes i have downloaded the files and check them.
and can see the url is pointing to post link but don't know how things are setup in your site and why it is pointing to the image url and not to the post url.
if you want you can send me access to staging site.
User184621 comments:
Do you upload the file using media library?
The way the images are being posted:
When I use it I compose it in classic editor using the text tab; not the visual tab.
and place the image code
I upload the image from Picstate.com image hoster. And when it generates the html code
I copy and paste them in the editor
<a href="https://picstate.com/view/full/11204098_l4mtb" target="_blank"><img src="https://picstate.com/files/11204098_l4mtb/pic2.jpg" alt="pic2.jpg" border="0" /></a>
<!--more-->
<a href="https://picstate.com/view/full/11204099_ooayi" target="_blank"><img src="https://picstate.com/files/11204099_ooayi/pic1.jpg" alt="pic1.jpg" border="0" /></a>
That's the way how the images are being posted.
User184621 comments:
You can test it yourself.
First upload the image file to external image hoster like imgur. picstate.com in my case.
Then when it generates the html code, copy and paste that to the wordpress classic editor using the text tab composer not the visual composer.
Arnav Joy comments:
ok, where you add this code?
can you give me full source code for that file?