Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Workflow for Inserting Images #83

Open
am1t opened this issue Oct 17, 2021 · 31 comments
Open

Workflow for Inserting Images #83

am1t opened this issue Oct 17, 2021 · 31 comments

Comments

@am1t
Copy link

am1t commented Oct 17, 2021

What's the workflow for the images that the folks have identified and are using with their Drummer blog? I wanted to know if there is a simpler way to include images in the blog. Here's my workflow.

  1. I host my images separately through my static server.
  2. Every time I want to add an image, I upload the image so that the static server can serve the image publicly.
  3. Then I come back to Drummer and add the item level attribute for the image accordingly.

I have the below two key questions.

  1. Is there a way to achieve this via scripting in Drummer?
  2. What's the purpose of the Image browser?
@scripting
Copy link
Owner

a user asked for the image browser so they could use my library of images, i had some time and wanted a separate project so i put it together. i think now it's kind of pointless. i've gotten zero feedback on it, i don't if anyone is even using it.

@am1t
Copy link
Author

am1t commented Oct 17, 2021

i don't if anyone is even using it.

I should have given this feedback earlier, but I feel it's a nice repository of the images to be added in the right margin. I have already used one of those images (I thought given the browser exists, the images can be freely used).

@troutcolor
Copy link

@am1t
I've made a script for my script menu that grabs my last 5 flickr images and put the html to display them into a series of items. I do this in another outline, copy the item I want and paste it into my blog outline. Then I delete all 5 in the messy outline, I have an outline called messy;-)

the script seems a bit flaky and breaks sometimes in a way I don't yet understand.

I think, if I had the JavaScript skills, I could have a script that showed them in a browser like Dave's and then add a chosen one in the more orthodox Drummer way via attribute?

@scripting
Copy link
Owner

aha -- yes that was the point.

which raises another question -- the main way i can tell if someone is using something is if it's broken. ;-)

@jackbaty
Copy link

@am1t I either do what you're doing (upload to static server and type in the URL) or I upload to my SmugMug account and use the Share icon to grab a specific-sized image URL. I prefer the SmugMug approach (Flickr would also work well for this) because they handle hosting and storage and also offer a number of resized options so I don't need to worry about sizing the original.

I'm also considering ways to automate this. Maybe by using Drummer's scripting capabilities similar to what @troutcolor is doing, but I'm still pretty green there.

@scripting
Copy link
Owner

scripting commented Oct 17, 2021 via email

@am1t
Copy link
Author

am1t commented Oct 17, 2021

May I suggest you look at PublicFolder.io.

That's one option I have tried, and it worked. I still need to get the URLs manually and add them to the posts, though - that's something I wish to automate.

Electric Drummer has image stuff built in, btw.

I can't use Electric Drummer because I update my blog from multiple devices. E/D won't allow that.

@scripting
Copy link
Owner

Maybe publicfolder could run a web server you could call from a drummer script to get the url of the last image uploaded. From there it’s easy for the script to add the image attribute.

@am1t
Copy link
Author

am1t commented Oct 17, 2021

@troutcolor That sounds excellent! At least, that level of automation too is a good start. Have you added that script somewhere we can refer at?

@jackbaty SmugMug/Flickr should work -- but I use neither. And I prefer not to sign up for another third-party service for images. I think there can be a way to automate via scripting, but I wanted to see if something already exists.

@am1t
Copy link
Author

am1t commented Oct 17, 2021

Maybe publicfolder could run a web server you could call from a drummer script to get the url of the last image uploaded. From there it’s easy for the script to add the image attribute.

Yeah, that will work. The script can get the last uploaded image and add it as an attribute to the selected post. Possibly with a confirmation?

@troutcolor
Copy link

@am1t
this is what I am using at the moment in my scripts menu.

my Flickr ID is 71428177@N00
I just choose 5 as the number so not to have to delete too many

flickr2
	flick=JSON.parse(http.readUrl("https://api.flickr.com/services/feeds/photos_public.gne?id=71428177@N00&extras=url_z&format=json&nojsoncallback=1",true));
	for (i=0;i<5;i++){
	var u=flick['items'][i]['media'].m.replace("_m","_z");
	var link=flick['items'][i]['link'];
	var html="<a href='"+link+"'><img src='"+u+"'></a>";
	op.insert(html, (i == 0) ? right : down);
	dir=down;
	}
	op.go(left,1);

There is a wee problem cause this line:
var html="<a href='"+link+"'><img src='"+u+"'></a>";

keeps getting broken, the single quotes get replaced by double ones. I cannot reproduce this consistently.
Maybe I should not use single quotes? but escape doubles? I don't know enough about JavaScript neve rmind JavaScript in Drummer;-)

There is a hint in Dave's example script menu dialog.about, I guess there is something that could be filled with the flickr results as thumbnails to make a picker. The dialog.about example is empty at the mo though.

@troutcolor
Copy link

troutcolor commented Oct 17, 2021 •
edited
Loading

@am1t
I've made a bit of progress and put messy script in this public outline

http://drummer.scripting.com/johnjohnston/sharescript.opml

This steals the built in image Browser dialog and fills it with thumbnails
Clicking on a thumb will prompt a url to copy.
As noted I am not a programmer or poet
It does not clean up so is a bit of a mess

@scripting
Copy link
Owner

Be careful, things like that break.

@troutcolor
Copy link

Yes, I can see this is not clever. I am not up to creating my own dialog. I have hopes in the dialog.about place holder in Dave’s Script menu.

@scripting
Copy link
Owner

scripting commented Oct 17, 2021 via email

@dcoletta
Copy link

which raises another question -- the main way i can tell if someone is using something is if it's broken. ;-)

That is really interesting. I have experience instrumenting a JavaScript web app with analytics that let you see users' paths through the application. That might be fun to do for Drummer. If I were interested in doing that, would you want it?

@scripting
Copy link
Owner

@dcoletta -- thanks for the suggestion but no -- not at this time. there's still a lot of unfinished business in drummer, and this is the kind of thing that I as a user would not be happy about, so I as a software developer don't want to do it.

here's the best thing to do -- use the software and keep reporting bugs. that's issue #1 now. ;-)

@alexjj
Copy link

alexjj commented Oct 19, 2021

I like the image browser, only used it a couple of times and it worked well.

I host my static files (template etc.) on GitHub pages so I upload images (usually just via drag and drop on GitHub) to that and add the url manually. Can envision a helper script on my computer to commit the image and put the html on my clipboard.

@am1t
Copy link
Author

am1t commented Oct 20, 2021 •
edited
Loading

May I suggest you look at PublicFolder.io.

@scripting I am using PublicFolder.io for my images now. It has simplified my workflow around handling the images. And because I use Drummer for publishing to Micro.blog too, I have a consistent way I handle images across all my blogs. This is great. Thank you! 👍🏽

Only thing was I had to build the URL manually, a way to get the URL right in Drummer would be brilliant!

@scripting
Copy link
Owner

scripting commented Oct 20, 2021 •
edited
Loading

@am1t -- that's good to hear.

and it also gives me someone to test a new build of publicFolder with.

i took a look at the code a few days ago, and there already is an HTTP server built in.

and it also will give the log of all its recent uploads, so a script will be able to grab the log, and return the URL of the first item. and there you are.

however i did not test the server at the time in the configuration we'll be using, a one-line change is needed, and when i tried to rebuild with the change it didn't work.

anyway that's a verbose way of saying that i'm pretty sure we'll have that connection working soon.

i wrote a piece about this idea a long time ago, and this was an instrumental thing with Frontier, the idea of a fractional horsepower http server.

the idea really works, and we're there once again. :-)

@am1t
Copy link
Author

am1t commented Oct 20, 2021

anyway that's a verbose way of saying that i'm pretty sure we'll have that connection working soon.

That would be great. Would love to test it whenever it is ready 👍🏽

@scripting
Copy link
Owner

@am1t -- good news and bad news.

  1. Good -- I have fixed the problems with getting Public Folder to build. I've also made it more secure, by downloading the files I previously accessed over the web, into the Electron package. Electric Drummer has the same protection.

  2. Also good -- if you enter this URL in the browser with PublicFolder running, you will see the log in JSON.

  3. Bad -- when I try to do that in web Drummer, by using this call -- I get a CORS error, as before. I have set the CORS value to * so that's not the problem. The error message is somewhat illuminating.

http.readUrl ("http://localhost:1500/log", false)

Access to XMLHttpRequest at 'http://localhost:1500/log' from origin 'http://drummer.scripting.com' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local.

I did a little reading about this on Stack Exchange, but thought this would be a good point to document it here.

Let me know what you think the next step should be...

@scripting
Copy link
Owner

Actually I think I just figured it out. I'm not going to post the solution here until I try it out. ;-)

@am1t
Copy link
Author

am1t commented Oct 21, 2021

I saw both the good news/bad news update and the follow-up to the bad news update together. So, all's good news, I guess :-)

Just to update, I am able to see the logs and the URL element in action. I think this JSON is valuable! 👍🏽

@scripting
Copy link
Owner

@am1t -- it worked.

http://this.how/publicFolder/#1634847088000

I think you'll understand it from the docs.

Let me know if it works. ;-)

@scripting
Copy link
Owner

Here's the change note.

http://scripting.com/drummer/blog/2021/10/21/205226.html?title=aNewVersionOfThePublicFolderApp

@am1t
Copy link
Author

am1t commented Oct 22, 2021 •
edited
Loading

@scripting Aha! It worked -- this has completely simplified my workflow now. I added a new script - code added here - that fetches the last uploaded image and inserts it as an attribute in the selected node. Yay!

For reference, here's the complete Drummer Script node. Just copy and paste this to scripts.opml.

Get Last Uploaded Image
	const imageLogs =  "/path/to/your/publicFolderLog/json/on/S3";
	images = JSON.parse(http.readUrl(imageLogs));
	op.attributes.setOne ("inlineImage", images.actions[0].url);
	dialog.alert("Added the 'inlineImage' attribute to selected node!");

@gwthompson
Copy link

Wanted to add my 2 cents!

Here is my image workflow using Drummer on an iPad Pro. I add whatever image I want to use to the Photos app which I use in slide over mode. I built a shortcut that is accessed in the Share Sheet in the Photos app from the slide over. The shortcut uses the Secure ShellFish app to upload the image to my server and copies the path to the clipboard ready to paste in the image or inlineImage attribute. I then publish the outline to my micro.blog where I am doing my Drummer experimenting. Makes the 12.9 iPad Pro a very nice platform for blogging with Drummer!

@alexjj
Copy link

alexjj commented Oct 25, 2021 •
edited
Loading

To update on my method from above, I've made this script to do the boring work for me. I upload an image to my github repo, then run this script (could make it a button too) and I just enter the file name into the dialog box. Can also copy and change it to the right-aligned image

Insert full image
	« Put cursor on title »
	var image = prompt("Enter the image filename","My pic.jpg");
	var imageFile = "https://alexjj.github.io/drummer-blog/img/" + image
	op.attributes.setOne("inlineImage", imageFile);

@scripting
Copy link
Owner

@alexjj -- when I try to explain what system level scripting is about to people, i try to describe things like this. this is exactly why we want it, to take steps out of our workflow. and in doing so sometimes we get ideas about how to do a lot more simplifying. that's how we make progress in software.

@akaKenSmith
Copy link
Collaborator

akaKenSmith commented Oct 30, 2021 •
edited
Loading

The Smithsonian has opened access to hundreds of thousands of scientific and historical images for public use. Many are very nicely photographed and it's fairly common for the background to be neutral and ready to be processed into a transparent background.

BoF3X6zGTTa4tfFpR%j7LA_thumb_9986

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@jackbaty @dcoletta @gwthompson @alexjj @scripting @am1t @troutcolor @akaKenSmith