I am pulling in data from Wordpress using Json API plugin. I am successfully getting the array of attachments using:
var myImage=myJSON[j].attachments;
But that gives me the whole array. How do I get just the thumbnail image from inside that array?
If you want the post thumbnail url for the post "featured image" you can just do:
var myImage=myJSON[j].thumbnail_images.thumbnail.url;
If you want to get the thumbnail of any attachments URL do this:
var myImage=myJSON[j].attachments[0].images.thumbnail.url;
just replace the "[0]" with the index of the image you want to get. console.log() and check your JSON response to find the index of the desired image.
With the current version of this plugin, this works as kmazla described only if you upload the image while editing the post/or creating the post for the first time. If you attach an existing image from the media database, it will still show up as an empty array in the query. If you decide to upload more photos (since the first one you uploaded was as mistake for example) they get appended to the attachments array even though you only select one of the images as your "featured image". It is quite confusing.
The workaround?
Make a fresh new post and make sure you attach the right images in the right sequence. Older posts should be deleted and republished for the attachments array to be lined up properly.
Related
I have a built a list in my app and I can call my API. However, when I paste my $..title.rendered path in the variable in each card it shows me all the titles rather than having in each card 1 title and second title in second card so on...
Try to render it in various paths still same issue
The issue was that the API should be added outside the column.
I am sending emails containing images. I am using html templates for these emails. I want the images to be generated on the fly. Hence, the 'src' in the image tag is a url that makes a REST api call to my app. The images are dynamically created, a publicly accessible URL is created. I want this image to be displayed in the email. But I am not able to figure out how to return this image.
You probably want some code like this
the_image= Image.new(#whatever you want in your image)
response = HttpResponse(content_type="image/jpeg")
the_image.save(response, "JPEG")
return response
I am trying to get my image url from response object and store it in a variable here is my code for getting the image url from server
$http.post("http://aflaree.com/apmsservice/securityService.svc/AvailableFacility",loginID)
.success(function(response){
console.log(response);
console.log(response.facility);
console.log(response.FacilityImage);
$scope.img = response.FacilityImage;
console.log($scope.img);
})
.error(function(response){
console.log(response);
});
Here is my response for the above post method.
Here is my html where i am planing to display image
<div >
<img ng-src="{{img}}">
</div>
Issues
I am able to store or view my log for any field from response except FacilityImage field.
some how if i am able to store the image into $scope.img then using two way data binding will be able to show my image in html page
if there is any other way to make access of that image url form FacilityImage please let me know how to show that image to my view.
FacilityImage is an attribute of facility, therefore you have to access it like this:
response.facility.FacilityImage
Hope this helps!
UPDATE: actually event a level deeper, as facility is an array with multiple facilities, so assuming you pick the first one:
response.facility[0].FacilityImage
We want to develop a widget to upload images to containers. This is a very well documented task:
1.- Object Storage Tutorial
2.- Fireware-Wiki
3.- OpenStack Object Storage Docs (Swift)
With all this you can manage to get (download), upload, delete files in a container. This is relatively clear.
On the other hand, we want to develop another widget to display images stored in a container. I think in something like this to show them:
<img src="public_object_url"/>
But I do not know how to do that. Where I get this public URL? Is there a public URL? Is it get in some step during the uploading process?
I am a bit lost how to do that. Any help would be highly appreciated.
Thanks in advance.
EDIT 1
We get blocked displaying images once they are downloaded.
A look inside "img" tags shows this:
what is the string returned by URL.createObjectURL(). If we look inside this link, the browser displays this:
We have decoded the string coming in the property "value" and the image is there!
To get the image from the object storage server we used a very similar code that the one used in the operator Álvaro recommended.
objectstorage.getFile( containerName,
reports[i].urlImagen,{
token: token,
onSuccess: onGetFileSuccess.bind(null, i),
onFailure: onGetFileFailure
});
function onGetFileSuccess(index, picture){
downloadedPicsCont--;
reports[index].urlImagen = URL.createObjectURL(picture);
if(!(downloadedPicsCont > 0)){
MashupPlatform.wiring.pushEvent('reports_output', JSON.stringify(reports));
}
}
The picture variable has the following structure, which seems to be ok too.
What is it happening?
EDIT 2
Finally, we found the reason. We were downloading images that were created directly from the cloud and not with objectStorageAPI. In you upload images from the cloud, when you download them you get them inside cdmi objects so the URL.createObjectURL doesn't not work as expected. In the other hand, if you upload them using objectStorageAPI, when downloading them, they come in raw format, so the method works correctly.
As far as I know, FIWARE Object Storage needs authentication, so there are no such public URL. But... you can download the image using your credentials and then use the URL.createObjectURL method for getting an URL usable in the src attribute of the img element.
It's a bit old, but you can use this operator as reference.
I want to embed an HTTP call which returns a png image into an html page.
I will run the page on github's gh-pages if that makes a difference.
The url is: http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png
Note that sometimes the url doesn't return the png as the service is sometimes down.
I want to call that url using POST method, and simply return the png into the page. Ideally the http call would be run on page recycle as well.
Do I use an iframe, form, javascript?
Thanks! Scott
[I might as well answer properly]
When a server is feeding you image data and you want to load it, you might as well treat it like an image and use an img tag. The problem with this approach in your particular case is that you said that the server can sometimes be down and this would mean that if you simply appended the image without checking for a broken link first you will get that ugly broken image space.
However, the simplicity of using an image is still feasible. By using a little javascript with a load event handler you can append the image if and only if it loads successfully. If you get any kind of error code from the request the load event will never fire and you won't append a broken image.
Here's the concept in vanilla-js:
img = document.createElement("img");
img.onload = function(e){document.getElementsByTagName("body")[0].appendChild(img);};
img.src = "http://public.opencpu.org/R/user/SChamberlain/ropensci_dash/apistatus10/png";
You can also see it in action here: http://jsfiddle.net/BwJeC/
You could use XHR to load the binary data from the external, dynamic page and set the content of the image.
This question, is very much similar
Or this
I really don't understand why you want to POST.
Anyway if you want to query a picture with a POST data you could, may have to do a Js XHR call and return the the image as base64 and then do something like:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" />
The best would still be to to a simple get call:
<img src="/dynamicallyGeneratedPicture" />
with a route or script that return a document of type image.