Fine Uploader scaled image naming pattern - fine-uploader

I am using the scaling image functionaliy of Fine Uploader and want to tweak it a little bit.
Let's say I have this configuration (from here)
scaling: {
sizes: [
{name: "small", maxSize: 100}
]
}
If I provide a file named image.png Fine Uploader is going to create a scaled version of my image according to the above configuration and give it the name image (small).png.
I am looking for a way to change this naming pattern - so that I get a custom name of the files which are sent to the server - for example small_image.png or similar. I want to achieve this at the Fine Uploader/browser/client side and not on my backend.
Any other (undocumented) option available besides forking the repo and introducing the change myself?

Related

Mapbox GL JS - remove cluster effect on mbtiles

I am currently working with a large file of points that I want to filter according to properties and bounding box.
When I add this layer to my map using a geojson file, I can manage the cluster effect using property as mentioned in documentation but the file is quite large to load in the browser.
So I think it is better to go through a mbtiles file. I use tippecanoe for the conversion goejson to mbtiles
But, when I add this mbtiles file as a source there is a cluster-effect that I want to remove.
I am just asking how to remove the cluster-effect using mbtiles? Is it possible?
I cannot find this in the API documentation, but it's possible I missed it somehow.
Section
Dropping a fixed fraction of features by zoom level
says that default drop rate is 2.5, set it to 1 before generating mbtiles.
--drop-rate=1

Jekyll: Get width/height of an image without using an external plugin

I want to automatically add height and width attributes to all my images. It is perfectly done via this nice plugin, but I host my site on GitHub Pages where external plugins are not supported.
Question: How to prefill height/width attributes of an image without using a plugin?
Why do I need this?
My site works well even without height and width but I want to specify them because it is important from SEO point of view (you can find some details on its importance here).
Writing an internal filter to do this using the fastimage gem is fairly simple. You can define your filter in the _plugins directory of your project (this is outlined in the Jekyll documentation)
As a very rough example, you could do something like this:
require 'fastimage'
module ImageSizeFilter
def image_size(source, dimension = nil)
# Get the image dimensions, throw an error on failure
# NOTE: You may want to sanitize the input string provided here
# see: https://github.com/sdsykes/fastimage#security
size = FastImage.size(source, raise_on_failure: true)
# Return the requested dimension, or both dimensions if nothing was specified
return size[0] if dimension == 'w'
return size[1] if dimension == 'h'
return size unless dimension
# Fail if the requested dimension is invalid
raise 'Invalid image size dimension requested: ' + dimension
end
end
Liquid::Template.register_filter(ImageSizeFilter)
Which would be used like so:
<img src={{source}}
width="{{source | image_size: 'w'}}"
height="{{source | image_size: 'h'}}"/>
Of course this still won't work with GitHub pages directly because custom plugins are not supported. To use custom plugins in general, one solution is to build the site locally and include it in the repository.
This question seems to apply to content images in markdown files. These images have no width or height set by default.
The short answer
You can just set the width and height directly in HTML in your markdown, like this:
# Markdown title
paragraph
<img src="/path/to/image.jpg" width="400" height="300" />
The long answer
You cannot retreive the width and height of the image programmatically without a plugin, so when you use (pure) markdown you get an image without a width and height property. The question is WHY you wanted to add a width and a height in the first place. Setting the width and height prevents reflow, but it leaves a big gaping hole while loading. Is that truly better? It certainly does not look nice. Progressive JPG's are a very nice solution for this problem, but I do not prefer to set the width and height on them, as 'no image' looks good, and a progressive JPG also always looks good.
You say you want it for SEO reasons, but I cannot think of any.
If your website is so slow you actually want to interact with content below the image before the reflow, the logical solution is to make your website load faster.
However, if you have users with a really slow connection, you might want to manually add the image to the markdown in HTML. See the short answer for a code example.

Liquid Pixels check source image mime type

unfortunately, I cannot tag this post with the correct "technology" because it does not exist and i dont have 1500 reputation to create it.
We are using a cloud service called "Liquid Pixels" to render some stuff on our images.
Lets say we have an image chain that is currently rendering a ribbon on the given JPEG image. This chain is working fine.
Then I adapted the chain to work with animated gif images, therefore I changed the sink format to gif (sink=format[gif]). That was working fine as well.
Now I want to combine the two cases in one chain, because the only difference is the sink command. The plan is to check the MIME type of the source image and then either render a gif or a jpg image.
I rendered the image as xml to view the metadata map.
I thought i can do it like this.
source=url[https://something.com/1x1_sample.gif],name[testImage]
sink=format[gif],if[('testImage.format' eq 'GIF')]
sink=format[jpg],if[('testImage.format' ne 'GIF’)]
But for some reason I cannot access the format attribute. I am used to grab some parameters like “testImage.width” or “testImage.height”, but for some reason i cannot access the format=“GIF” property. I guess that has happens because the width and height are on a different hierarchy level in the metadata map.
I hope you guys can help me.
The image does not actually have a "format" during the render. Only a file has a format. During processing the image is simply on memory as either raster or vector data; it is only when you sink that it becomes a file in whatever format. Also, LiquiFire OS uses the image data to determine the original format when acquiring an image from a source, never the image name itself.
If you need operations in your LiquiFire Image Chain to react to the source image URL, you can test the last part of the image name by applying a regular expression to see if it is either .GIF or .gif. An example of how that can be done:
set=imageURL[https://your.server.com/sample.gif]
source=url[global.imageURL],name[testImage]
regexcase=name[isGif],key[global.imageURL],cases[\.gif$|\.GIF$|\.\w+$],values[yes|yes|no]
sink=format[gif],if[('global.isGif' eq 'yes')]
sink=format[jpg],if[('global.isGif' eq 'no’)]

How to get photo files in original size from Instagram?

Dear fellow community!
Does anyone know how to get the photo files in original size from Instagram? They surely store original files in full size, since you can upload a photo via app to your IG profile, delete it from the phone, and it still syncs your IG with phone library to get this photo back in full resolution.
Their API supports fetching up to 1080x1080px, plus I found this method via Chrome developer tools: http://www.dailydot.com/debug/instagram-high-quality-photos-download-google-chrome/. Script that could do it doesn't seem reliable on large scale, so I'm still looking for a automated better solution.
Please share any experience that could help.
Try to change 640 to 1080 and remove sharpness like in my example:
str_replace(array("s640x640","sh0.08/"),array( "s1080x1080",""),$img['standard_resolution']['url']);
all photos on instagram have real image url (except profile picture image), you just need get access instagram api, decode json result then get real url image.
you can see my example code for search tag using instagram api : http://pastebin.com/fMu7w808
Sorry to say, but the code on the pastebin will not work correctly for this purpose. Standard_resolution does not display the representation for original size of posted media.
$url = $datas->images->standard_resolution->url;
Will yield the following result, while the original image that was uploaded is 1080px wide. (Following is an example, not a working link)
"standard_resolution": {
"url": "https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14613148_236279861425099_8741797152912868864_n.jpg?ig_cache_key=MTX3ODU5Mjg5NDY4NDEEN3E0CA%3D%3D.2",
"width": 640,
"height": 334
}
The trick is to replace the s640x640 part in the url, thus adding the next line in order to get the url of the picture as it was uploaded :
$url=str_replace("s640x640/","",$url);

How to smooth images loaded from server in ActionScript3

I'm trying to smooth an scaled image loaded from another website. The image is not animated.
It works well if I use a local image. but it seems not work with images loaded from remote server.
Here is the snippet:
...
//_loader.load(new URLRequest(http://img.example.com/remote.jpg));
_loader.load(new URLRequest("../assets/local.jpg"));
_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
...
protected function completeHandler(event:Event):void
{
var image:Bitmap = Bitmap(event.target.content);
image.smoothing = true;
image.pixelSnapping = "never";
}
As tested, when I load local.jpg, it works perfect. But when I load remote.jpg from the server, the smoothing param didn't work.
Anyone knows why?
I searched everywhere, but no one has the same problem. I'm not using Flash Professional, it's a pure ActionScript Project built in Flash Builder. And the image is not animating. So wired...
Because you are pulling an image from a remote server you need to set a cross domain policy xml file on the web server where the image is held.
Without this you can't alter bitmaps at a sub pixel level.
Example of:
http://www.senocular.com/pub/adobe/crossdomain/policyfiles.html
More details
http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.edu.html
I searched day by day, and finally find the answer:
_loader.load( new URLRequest("http:…." , new LoaderContext(true));
The most important is the second param of load() method, it's a LoaderContext. Reference:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Loader.html#load()
Although I set the crossdomain file in the server, without the "new LoaderContext(true)", it won't read the crossdomain file. That's why it doesn't work at first.
If you have the same problem, hope it's helpful to you!

Resources