import from my stock

[selul]

@contactashish13 i would like to add a new module that will be used to fetch stock photos from mystock.photos. the module name will be mystock-import.

The module will add a new tab in the media popup as well as the featured image popup. I know we tried to do something like this with that url2png service and we go stock on the featured tab. I have managed to find a workaround for this, i added the snippet at the end of this post.

Now the photos from mystock are imported via flickr, from https://www.flickr.com/photos/themeisle/ account.

I would like also to fetch directly from flickr those, using their api.

Let me know if you have any questions, @cristian-ungureanu will also help you in case that you have any questions.

(function ($) {
    var media = wp.media,
        frame,
        l10n = media.view.l10n = typeof _wpMediaViewsL10n === 'undefined' ? {} : _wpMediaViewsL10n;

    media.view.MediaFrame.Select.prototype.browseRouter = function (view) {
        view.set({
            upload: {
                text: l10n.uploadFilesTitle,
                priority: 20
            },
            dataurltest: {
                text: 'Test tab',
                priority: 30
            },
            browse: {
                text: l10n.mediaLibraryTitle,
                priority: 40
            }
        });
    };

    var bindHandlers = media.view.MediaFrame.Select.prototype.bindHandlers,
        dataTest, frame;

    media.view.MediaFrame.Select.prototype.bindHandlers = function () {
        bindHandlers.apply(this, arguments);
        this.on('content:create:dataurltest', this.dataurltestContent, this);
        frame = this;
    };
    media.view.MediaFrame.Select.prototype.dataurltestContent = function (content) {
        var state = this.state();
        this.$el.removeClass('hide-toolbar');
        dataTest = new media.view.dataTest({});
        content.view = dataTest;
    }

    media.view.dataTest = media.View.extend({
        tagName: 'div',
        className: 'data-test',

        initialize: function () {
            _.defaults(this.options, {});
            this.$el.html('123');
        },
    });

    return;

})(jQuery);

[contactashish13]

@selul what is the intent of this change? will users be able to do this on their own?

[selul]

I dont understand your question ? The intent is to import images from mystock and to be able to set them as featured image.

Sent from my iPhone

On 22 Oct 2017, at 20:57, contactashish13 notifications@github.com wrote:

@selul what is the intent of this change? will users be able to do this on their own?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[contactashish13]

@selul you said

Now the photos from mystock are imported via flickr, from https://www.flickr.com/photos/themeisle/ account.

so I was not sure if it was meant for users to fetch from their accounts or from the themeisle account

[selul]

no, from the themeisle account only, those pictures are on mystock.photos also, but we use there too the flickr api, so i think we can directly fetch them from flickr and not from mystock.

Do you have things clear now ?

[contactashish13]

@selul flickr requires an application for the api key and its not allowing me to create an api key using my yahoo id. can you please provide the api key?

[selul]

@cristian-ungureanu can you help pls ?

Thanks !

[cristian-ungureanu]

@contactashish13 try this e5316d0a32404a2eb9d4d761c9f20ef6

[contactashish13]

@selul can you please mention the workflow from the user's point of view?

[selul]

@contactashish13 user will be able to import and use as media attachments pictures from that particular flickr account.

It will be an alternative method, as you add an image from my computer or from external url.

[contactashish13]

@selul I'm not sure I understand so can you please verify this flow?

1. api key will be hard coded in the module
2. every time the user opens the tab in the media modal, the flickr images will be fetched (not imported) and shown
3. the users will click on the images they want to set as featured image/insert into post

[selul]

@contactashish13 yes, exactly.

One more thing, they will choose the image, click import and after set as featured image/insert into post.

And because flickr is providing different sizes for images, i would like as an intermediate step, after clicking on import and before actually importing the image, to be able to choose the size from flickr. let me know if this is clear.

[contactashish13]

@cristian-ungureanu the key doesn't seem to be working. Can you please provide another one?

[cristian-ungureanu]

I've created a new app for this:

Key: 97d007cf8f44203a2e578841a2c0f9ac

Secret: 6099d736ecd4d95a

[contactashish13]

@cristian-ungureanu even this one does not work :(

@selul I'm using https://github.com/dan-coulter/phpflickr as the library and trying to call https://www.flickr.com/services/api/explore/flickr.people.findByUsername but none of the keys seem to be working

[cristian-ungureanu]

@contactashish13 I tried that too and is not working. I think the guy announced that he won't maintain it anymore. Here's a plugin that I wrote for mystock. Maybe you can use some code from it wpflicker.zip

[selul]

@cristian-ungureanu can you share the implementation you did ?

Sent from my iPhone

On 26 Oct 2017, at 12:34, contactashish13 notifications@github.com wrote:

@cristian-ungureanu even this one does not work :(

@selul I'm using https://github.com/dan-coulter/phpflickr as the library and trying to call https://www.flickr.com/services/api/explore/flickr.people.findByUsername but none of the keys seem to be working

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[contactashish13]

@cristian-ungureanu I don't think its a problem of the library. Even the below returns invalid key

curl https://api.flickr.com/services/rest/?method=flickr.people.findByUsername&api_key=<key>

[cristian-ungureanu]

Replace <key> with the api key

https://api.flickr.com/services/rest/?method=flickr.people.findByUsername&api_key=97d007cf8f44203a2e578841a2c0f9ac works

[contactashish13]

@cristian-ungureanu still doesn't for me

[selul]

@contactashish13 if i go directly to that url it seems to work ?

[cristian-ungureanu]

Try this piece of code

$url = 'https://api.flickr.com/services/rest/?method=flickr.people.findByUsername&api_key=97d007cf8f44203a2e578841a2c0f9ac';
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$json_raw = curl_exec($ch);
curl_close($ch);

$rsp_obj = json_decode($json_raw, 1);
var_dump($rsp_obj);

[selul]

also in postman using this:

curl -X GET \
  'https://api.flickr.com/services/rest/?method=flickr.people.findByUsername&api_key=97d007cf8f44203a2e578841a2c0f9ac' 

works fine. http://prntscr.com/h27hwr

[contactashish13]

@selul very strange. Opening the URL in the browser works but curl fails even with the postman syntax

[contactashish13]

@cristian-ungureanu solved the problem. The library is fine but it needs CURLOPT_SSL_VERIFYPEER set to false or the curl request fails

[cristian-ungureanu]

Cool, glad to hear that but that library is really big. I think you'll need 2 - 3 methods from it. Maybe it's a good idea to keep it clean and take from the library only what you use.

[contactashish13]

@selul I've checked in whatever I could manage to complete. Till now the media upload tab shows the images from flickr along with a dropdown with the sizes.

Here is the PR in case someone needs to work on it in my absence: https://github.com/Codeinwp/themeisle-companion/pull/87

[selul]

@contactashish13 as we talked, can you have a look over what @cristian-ungureanu https://github.com/Codeinwp/themeisle-companion/pull/90 and check if there are any issues or it can be done any improvements.

Thanks !

[contactashish13]

@selul looks good except for one issue - I can't seem to get the infinite scrolling to work.

[cristian-ungureanu]

Don't know why/how. It works for me. Can you give more details @contactashish13 ?

[selul]

@contactashish13 yes it seems there is an issue with infinite scroll, i think because we store the last page in the transient.

i would like to to improve this with two things. 1) Add a simple loader until the images are populating the container, for the first page and the next pages also. 2) Improve the caching the response based on the current limit per page and current page. Basically the transient key will be something like obfx_mystock_images_<per_page_limit>_<page> and we will store only the flickr response in transient, nothing else. 3) Double check the infinite scroll and make sure is working fine.

[selul]

@contactashish13 please work on the upstream development version

[contactashish13]

@selul PR: https://github.com/Codeinwp/themeisle-companion/pull/94

[cristian-ungureanu]

@contactashish13 something is wrong. It's not working well. And you didn't add this "Add a simple loader until the images are populating the container, for the first page and the next pages also."

[cristian-ungureanu]

My bad, it was from the cache. Works well but sometimes it brings same page twice and still no loader.

[contactashish13]

@cristian-ungureanu here you can see the loader, it is right on top of the frame: https://drive.google.com/file/d/1Y1U6FoZspVcnDrsvuYaP-TjqXXeCOctM/view