I'm using easy-thumbnails all over my site. It works fine generally.
But now I'd want to create a product feed for Facebook and the pictures need to be 600x600px square.
It looks like this:
thumbnailer = get_thumbnailer(v.product.image)
thumbnail_options = {
'crop': '50,0', #tried smart, scale and all kinds of combos
'size': (600, 600)
}
resized_image = thumbnailer.get_thumbnail(thumbnail_options)
The problem is that I always end up getting one dimension to 600px, and the other to <600px.
Can I make it do something like the smart option but cropping in a way that I get a square image?
Thank you in advance!
thumbnailer = get_thumbnailer(v.product.image)
thumbnail_options = {
'crop': 'smart',
'upscale': True,
'size': (600, 600)
}
resized_image = thumbnailer.get_thumbnail(thumbnail_options)
Related
I have created a pretty good ChartJS system but am having trouble with breaking the extra x-axis labels and title font details. They same to want to be the same for some reason.
First of all, the solution I got help with is here:
SO answer
The charts look okay like so:
As you can see the title and addition x-axis label are both the same font size. This occurs due to the configuration options of:
// context.xAxes.font
context.font = this.config.get("chart.axis.font");
context.fontSize = 100;
context.fillStyle = this.config.get("chart.axis.font.color");
context.textAlign = 'center';
context.fillText(line, x, y);
I have the configuration options setup this way:
title: {
display: true,
fontSize: 10,
text: this.options.title,
padding: titlePadding,
},
I have no idea why the fillText is working for both title and extra categories.
As far as I know, there's no fontSize property on the canvas rendering context. You should use its font property instead to specify weight, size, and family of the font.
Please take a look at the runnable code snippet provided in this answer.
i am trying to create a toolbar with buttons. and the button i want to have is an image rather title. The current non working code is:
let imageName = "yourImage.png"
self.myUIBarButtonBack = UIBarButtonItem(image: UIImage(named: imageName), style:.plain, target: self, action: #selector(onClickBarButton))
I have 2 questions:
1. where should i place the yourImage.png in my application
2. is this code sufficient to render image or i need to do things like putting it into imageView component and make it visible etc. ?
The best approach is to add images in xcassets. This is the best way you can organize images. The concept of App slicing applies here.
You don't need to put the image in image view in the case of bar button item.
Try changing the rendring option as Original Image instead of Default.
One way is create custom button and assign to toolbar like navigationbar
self.navigationItem.hidesBackButton = true
let button = UIButton.init(type: .custom)
button.setImage(UIImage.init(named: "back_icon"), for: UIControlState.normal)
button.addTarget(self, action:#selector(onClickBackBarItem), for: UIControlEvents.touchUpInside)
button.frame = CGRect.init(x: 0, y: 0, width: 25, height: 25)
let barButton = UIBarButtonItem.init(customView: button)
self.navigationItem.leftBarButtonItem = barButton
I am using Django and easy-thumbnails 2.3. My intention is to take an image, scale it down so that it fits a square and fill the empty area with white color in case of non-square original images. Also in case of transparent images the transparency shall be changed to white.
My settings.py contains the following lines:
THUMBNAIL_PROCESSORS = (
'easy_thumbnails.processors.colorspace',
'easy_thumbnails.processors.autocrop',
'easy_thumbnails.processors.scale_and_crop',
'easy_thumbnails.processors.filters',
'easy_thumbnails.processors.background',
)
THUMBNAIL_ALIASES = {
'':{
'square_image': {'background':'#fff','replace_alpha':'#fff','size':(200,200)},
},
}
THUMBNAIL_TRANSPARENCY_EXTENSION = 'jpg'
I've tried some debugging and everything seems to work quite well and makes sense until the code reaches a line 318 in the background-processor function of easy-thumbnails processors.py:
im = colorspace(im, replace_alpha=background, **kwargs)
Here the debugger returns straight to the method that was calling background(im, size, background=None, **kwargs).
Is there anything wrong with my configuration of square_image in THUMBNAIL_ALIASES? Could it be anything else?
It turns out that you can't use 'background':'#fff' from the background processor and 'replace_alpha':'#fff' from the colorspace processor at the same time, as the background-key is turned into replace_alpha in
im = colorspace(im, replace_alpha=background, **kwargs)
and then you end up with two replace_alpha, as one is still in **kwargs. This causes the error. But it also turns out that in
THUMBNAIL_ALIASES = {
'':{
'square_image': {'background':'#fff','replace_alpha':'#fff','size':(200,200)}, #wrong
},
}
you don't even need replace_alpha. The background processor does not add bars at the sides of a non-fitting image, but instead the image gets written on a - in my case white - background. The colorspace conversion does not seem to happen before that. So the proper definition would be
THUMBNAIL_ALIASES = {
'':{
'square_image': {'background':'#fff','size':(200,200)},
},
}
I'm completely new at raphael and never have been especially good working with canvas elements. I found a useful piechart but need to tweak it a little more to fit my needs.
This is what I have now : http://jsfiddle.net/El4a/sbxjfafx/4/
And this is the figure I want to achieve
The white circle I'm trying to draw on top of the piechart, appears underneath it instead. I honestly have no idea how to fix this, although I'm sure the solution won't be that difficult.
I can achieve this figure using manual positioning (which is a crappy way) with the following code:
var paper = Raphael(10, 50, 500, 500);
var circle = paper.circle(280, 180, 175);
circle.attr("fill", "white");
circle.attr("stroke", "#fff");
But obviously this won't scale with the piechart, and is easily ruined by inconvenient things like changing the window size.
I have tried putting that code inside a function and create it the same way the piechart gets created.
Raphael.fn.circle = function(cx, cy, r){
var paper = this,
rad = Math.PI / 180,
chart = this.set();
var circle = paper.circle(280, 180, 175);
circle.attr("fill", "white");
circle.attr("stroke", "#fff");
return chart;
};
raphael("circle", 700, 700).circle(350, 350, 175, values, labels, "#fff");
But that leaves me with the result you can see in the fiddle.
Hope anyone can help!
Thanks in advance.
Make sure you don't create the canvas twice. So create it once, and then use that reference to create the new elements.
Also place the circle after the coloured one, so that it appears in front. This is all about the order of elements in the DOM.
eg jsfiddle
Relevant amended code.
var r = raphael("holder", 700, 700);
r.pieChart(350, 350, 200, values, labels, "#fff");
r.circle(350, 350, 175).attr({ fill: 'white' });
I am trying to make something like this using frames:
And this is my code so far: # I am trying to put the frames in the certain location only, and not fill the entire display
from Tkinter import *
class Menu():
def display(self):
self.canvas = Canvas(width=1200,height=700)
self.canvas.grid()
self.controlcanvas = Canvas(self.canvas,width=850,height=200)
self.controlcanvas.place(x=348,y=107)
indexframe = Frame(self.controlcanvas)
titleframe = Frame(self.controlcanvas)
readCframe = Frame(self.controlcanvas)
commentCframe = Frame(self.controlcanvas)
indexframe.pack(side=LEFT)
titleframe.pack(side=LEFT)
readCframe.pack(side=LEFT)
commentCframe.pack(side=LEFT)
dummyindex = Label(indexframe,text="#").grid(row=0,column=0)
dummytitle = Label(titleframe,text="Title").grid(row=0,column=1)
dummyreadC = Label(readCframe,text="Read Count").grid(row=0,column=2)
dummycommentC = Label(commentCframe,text="Comments").grid(row=0,column=3)
mainloop()
m = Menu()
m.display()
The problem here is that the # Title Read Count and Comments resize the frame into small one.
I want the frames to retain their original geometry so that I could create something like the picture.
Any help?
Frame has a list of config options that handle its properties like size and border. When you create the frame, you can specify these options:
indexframe = Frame(self.controlcanvas, height=400, width=200, borderwidth=2)
or you can access them later via:
indexframe.config(borderwidth=2)
Take a look at the method documentation for more options.