I'm trying to pull photos from an album (timeline) on Facebook and insert them into a list on a website but it's not grabbing all the photos.
I am using the ?limit=xxx in the URL to grab more than the first page but it still isn't working. Should I be using the paging ids and if so, what would be the syntax?
$.getJSON('https://graph.facebook.com/616894958361877/photos?limit=500&callback=?',function(json){
$.each(json.data,function(){
$('<li></li>').append('<span class="thumb" style="background: url(' + this.images[1].source + ') center center no-repeat; background-size: cover;"></span>').appendTo('#timeline');
});
});
This is the public facebook album in question:
https://goo.gl/ofrVjw
Looks like the limit is 100. Check the graph explorer for that. The limit 500 is overridden with 100 and the api return pagination details.
Also in the above code snippet, while accessing images array there can be cases where images which might not have images[1] so try to handle that. Something like this
((photo.images[1]) ? photo.images[1].source: ''
In this demo http://jsbin.com/nalusu/1/ you can see that the api returns 100 results.
Related
I wonder if there is any way to, on a page of my website, show a link or a div only if the visitor subscribed to my channel, with api's or something ? I already saw something like this with facebook in the past but now i'd like to use this kind of thing. Is it possible in any kind of way ?
you can achieve this in many ways depending on how are you checking witherthe user is a subscriber or not
if you store this in a bool value then all you need is a bit of javascript
<html>
body>
<a href ="#" class = "hidden"/>
</body>
$(function(){
var isSubscribed = //Here the value;
if(isSubscribed )
{
$(a).removeClass('hidden');
}
})
if you are using any server side language then it will be far easier
I just installed Twitter Typeahead (older vesion 0.9.3).
Right now it links to a search.php page which queries the MySQL database to get the results. It gets the results I need, however, when I select the results, I can't figure out how to pass the ID or other information create a link to another page.
Here is the function in the HTML page that's calling the search.php page:
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
Then search.php is called which queries the database correctly and gets the results I need:
<?php
$key=$_GET['key'];
$array = array();
$con=mysql_connect("hostname","username","password");
$db=mysql_select_db("databasename",$con);
$query=mysql_query("select * from customers where clientDisplayName LIKE '%{$key}%' OR clientPhNumber LIKE '%{$key}%' OR clientAltPhNumber LIKE '%{$key}%'");
while($row=mysql_fetch_assoc($query))
{
//$array[] = "<a href='customer-details.php?cid=".$row['id'] ."'><tr><td>" . $row['clientDisplayName'] . "</tr></td></a>";
$array[] = $row['clientDisplayName'];
}
echo json_encode($array);
?>
You can see the comment there, if I use that instead of the array that's uncommented, It will create a link as I desire, however.. it's buggy that way.
By Buggy I mean:
I HAVE to click on the actual text instead of anywhere in the result row
I cannot simply arrow-down and hit enter to select a response (it must be mouse clicked)
and even if it is clicked with the mouse, I can see the whole
Any ideas on what I can do here?
Do not use twitter typeahead. It is abandoned, no longer maintained, it has 250 issues, some of them very serious regarding basic behavior and severe bugs. I would recommend github.com/bassjobsen/Bootstrap-3-Typeahead instead.
I have a site on Wordpress where I am trying to find the best way to create a dropdown which displays data from a custom taxonomy to eventually integrate it into a different site (also on Wordpress).
Where I have go to is trying to obtain the correct Routes/URL's to fetch this information.
I have a Post type called listings which has a taxonomy called listing_area which has different areas where posts are associated, e.g. Wales, East Anglia.
I have got so far that I have decided to use the Plugin WP-API (whether this is the right thing I don't know, I am aware that Wordpress now had an API in it's new update). I have managed to get this URL working and pulling in the terms of listing_area - http://scd.blaze.wpengine.com/wp-json/taxonomies/listing_area/terms/174
This is the test page I have going which is linking to these URL's in turn -
http://scd.blaze.wpengine.com/test/
I have no idea if I'm doing the right thing here and I have very basic knowledge on it and would hugely appreciate it if someone could point me in the right direction!
Thanks
You're going on the right path, but I suggest to work straight with the fresh Wordpress REST API if you can upgrade your websites to 4.4. Otherwise you can still use your REST plugin as it is pretty much the same. I'll try to explain how to go through what you want to achieve (navigate through terms of a distant Wordpress website and display posts related to this terms).
Get the terms from the other WP
Using the new WP REST API, here is a small function that you can use to get your taxonomy terms:
public function getDistantTerms($taxonomy) {
$response = wp_remote_get('http://www.yourwebsite.com/wp-json/wp/v2/terms/' . $taxonomy);
if(is_wp_error($response)) {
return array();
}
return json_decode(wp_remote_retrieve_body($response));
}
Here I make use of wp_remote_get function to get the JSON return from the REST function terms by passing it as parameter the taxonomy slug (ex:listing_area) - here is a demo of what it returns. Add this function to your functions.php then use it in your template to build up your select:
<select name="term_select">
<option value="">Please choose a term</option>
<?php foreach(getDistantTerms('listing_area') as $term): ?>
<option value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option>
<?php endforeach; ?>
</select>
It seems that's pretty much what you actually got.
Link your select to a custom template
So the next step is to redirect to a page that list the posts of the term you choose. First we handle the redirection in JS:
$('select[name="term_select"]').change(function() {
if($(this).val() != "") {
window.location = "/show-post-term/" + $(this).val();
}
});
We add a little rewrite rule to redirect this url (change it to whatever you want) to a template we'll name distant-posts.php (all of this take place in your theme functions.php):
1. Add the rewrite rule
add_action('init', 'distantposts_rewrite_rules');
function distantposts_rewrite_rules() {
add_rewrite_rule('show-post-term/([^/]+)/?$', 'index.php?term_slug=$matches[1]&distant_post=true', 'top');
}
2. Add two query vars
add_filter('query_vars', 'distantposts_query_vars' );
function distantposts_query_vars($vars) {
$vars[] = 'term_slug';
$vars[] = 'distant_post';
return $vars;
}
3. Redirect to the template if query vars are set
add_filter('template_include', 'yourpluginname_blah_template_include', 1, 1);
function yourpluginname_blah_template_include($template) {
global $wp_query;
$distant_post = $wp_query->query_vars['distant_post'];
$term_slug = $wp_query->query_vars['term_slug'];
if($distant_post && $term_slug) {
$tpl = locate_template(array('distant-posts.php'));
if(!empty($tpl)) {
return $tpl;
}
}
return $template;
}
So in short what we're doing here: we add a rule that handle the /show-post-term/term-slug URL by redirecting it to index with two query vars: one that tell we're in a "distant posts" mode and one that carry the term slug. Then we declare those query vars to Wordpress, and use them to change the template that Worpdress should display if they're set.
List the distants posts from the taxonomy term
Back to the REST API. We use the GET REST function posts by passing it as GET parameters the taxonomy name as key, and the term slug as value. Here is a demo of what kind of return you get.
An important note before going further: after you updated to WP 4.4, you need to change your taxonomy declaration in order to make this work. You need to add to your declaration the parameter show_in_rest set to true, and set query_var to true.
So we add this little function to functions.php to retrieve the posts from the template:
public function getDistantPosts($taxonomy, $term) {
$response = wp_remote_get('http://www.yourwebsite.com/wp-json/wp/v2/posts?' . $taxonomy . '=' . $term);
if(is_wp_error($response)) {
return array();
}
return json_decode(wp_remote_retrieve_body($response));
}
And then in your template, you call it this way:
global $wp_query;
$posts = getDistantPosts('listing_area', $wp_query->query_vars['term_slug']);
Then use the $posts array to display your posts (it contain regular post objects).
Going further
A few things that you may want to do now that you have the context established:
Add cache to the REST return
In order to avoid to overload your main website server, you should really consider caching your REST calls results. I will not detail this here as there is some work to do on it, but a good start could be this script.
Add pagination to your distant posts template
If you have a lot of posts associated to your terms, you might want to add a pagination. You can change a bit the distant posts REST function to add the page parameter for this - see the documentation.
Add a "single page" for your distant posts
You might want to have individual pages for your distant posts on your main website, as the text might be too long for the list mode. You can start on the distant-posts.php code and add a post_id query var, then use the REST posts function to get your post like this : /wp-json/wp/v2/posts/<post_id>
To understand the basics of the WP REST API I strongly suggest you to visit the wp-api.org website. There is a pretty good article on the REST API on wpmudev.org that you can read too. If you need to learn about the REST basics, I suggest you to read the Wikipedia post about it.
Hope you'll manage to get through this, have fun!
I found this this url got me the results I needed -
http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=channel
my post type being listings and the slug of my term channel
I'm looking for suggestions on how to simplify/optimize a piece of code in one of my view files in my ASP.Net MVC project. The code works, but I'm not sure if I've written it the best way.
Basically, the code is used to display a list of links to documents, with little thumbnails to the left of each link. The main problem, is that there are two different types of documents, and each type has to have it's thumbnail image stored in a different location, this is a project requirement and can't be changed.
I'm currently accomplishing this with the view code shown below.
// Display a link to every document.
foreach (var document in documentList)
{
<a href="#Url.Content("~/Document/DownloadDocument/" +
document.documentid)" target="_blank">
#{
// This will be the root of all the paths.
var path = "~/Document/DisplayImage/";
// If it's a Type 1 document, we need to use a different path.
if (document.documentType == "Type 1") {
path += "Path/To/Image/Folder";
<img id="imageHolder" src="#Url.Content(path)"
onerror="imgError(this);" />
#document.documentname
}
else {
path += "Path/To/Different/Image/Folder";
<img src="#Url.Content(path)" />
#document.documentname
}
}
</a>
<br />
}
Like I said, the code works, but I'm not too happy with how it's written. Does anyone have any suggestions?
When working with MVC, it's best to keep your Views dumb (no logic, simply rendering).
You can accomplish this by using a strongly-typed View and performing all of the logic in the Controller. It looks like you may already be doing this since you have a documentList.
In this case, documentList should be a list of View Model objects that already have the appropriate image path already set on them from the controller.
I would suggest moving the path to your document image into your model. That way you can just display the image from the path in the model and you wouldn't have to put any logic in your view.
Hi I have the following html inside one of my javascript files.
function addToInfoWindow(infoWindowContent)
{
infoWindowString = '<div id="infoWindowString">'+
'<img src="assets/images/rails.png">'+
'<h2>You Clicked:</h2>'+
'<p>'+infoWindowContent+'</p>'+
'<p>See more info</p>'+
'<p>see news</p>'+
'</div>';
infoWindow.setContent(infoWindowString);
}
The problem is I cannot get the image to show up in the info window.
I realize this \could be because rails has some sort of helper function to show images in its webpages. But I haven't been able to find how to call it or what it is. Can someone help please.
EDIT- Changed to following after the response below:
function addToInfoWindow(infoWindowContent)
{
infoWindowString = '<div class="infoWindowString">'+
'<img src="/Users/AM/Documents/RailsWS/cmdLineWS/Businesses/app/assets/images/rails.png">'+
'<h2>You Clicked:</h2>'+
'<p>'+infoWindowContent+'</p>'+
'<p>See Menus</p>'+
'<p>Upload a Menu</p>'+
'</div>';
infoWindow.setContent(infoWindowString);
}
But image still not showing up :(
If you're using the default setup with rails asset packaging it will append a timestamp onto asset filenames meaning just browsing to /assets/images/foo.jpg won't necessarily give you what you want.
The rails helper to get an image tag is just image_tag 'example.jpg'. OR if you just want the url, image_url 'foo.jpg'.
For any given image you want stored you could attach it to a data attribute, for instance in a view you could do:
<a id="image_link" href="#" data-image-url="<%= image_url 'foo.jpg' %>">Click to see image</a>
You can get that path anywhere in jQuery using
var imageUrl = $('a#image_link').data('image-url')
You are using a relative URL for your image (assets/images/rails.png), so the browser will try to load it from an address relative to the current page. For example, if the image is at
http://example.com/assets/images/rails.png
but you are currently at
http://example.com/something/somepage.html
the browser will try to load it from
http://example.com/something/assets/images/rails.png
and it will fail.
You should be using an absolute URL.