When you are deeply involved in graphics editing, at some point you will need specially-sized images, such as:

  • specified megapixels while having a fixed 4:3, 3:2 or other w/h ratio
  • width and/or height to be multiple of 2, 4, 8, 16, etc. at a given w/h ratio
  • calculate the other side, knowing one side and the megapixels

To help with these calculations, the Aspect Ratio Calculator has been created. Extremely simple, no manuals, no installation or dependencies, just a single .exe file:

Aspect Ratio Calculator

Aspect Ratio Calculator

What this simple app does? Calculates the other parameters that aren’t focused. You can change the values by writing numbers or pressing up/down keys.

  • if you are at the ‘Width’ field, changing the value changes the ‘Height’, based on ‘Aspect Ratio’
  • if you are at the ‘Height’ field, changing the value changes the ‘Width’, based on ‘Aspect Ratio’
  • if you are at the ‘Aspect Ratio’ field, changing any value changes the ‘Width’ and ‘Height’, based on the new ‘Aspect Ratio’. You can choose from the dropdown list the basic aspect ratios or you may enter custom values if you wish.
  • if you are at the ‘Megapixles’ field, changing the value changes the ‘Width’ and ‘Height’, based on the ‘Aspect Ratio’. Any other time the ‘Megapixels’ field is updated as Width × Height / 1.000.000.

The info box displays every time the W/H, H/W and the W×H values.

Tips:

  • If you want a given megapixels at a given aspect ratio, enter the width and height of the actual image into ‘Aspect ratio’ fields, enter the megapixels into ‘Megapixels’ field and read the resulting ‘Width’ and ‘Height’.
  • Change the ‘Width’ or ‘Height’ fields by pressing up/down arrow keys. When both width/height becomes dividable by 2, 4, 8 or 16, the dividend will appear in square, next to ‘Width’ and ‘Height’ fields. This can help when you want to make calculations on video frames or you want to efficiently optimize jpg files, video frames, etc.

Download the executable here: ARC

I have two tables, “products” and “brands”. In the “products” table, the product’s name is in the “name” field. The product’s brand is represented by the # (diez) character. To know which is the brand, there’s a “brand_id” field.

So far we have:

products table:
  id: int
  name: varchar
  brand_id: int

brands table:
  id: int
  name: varchar

I was thinking in the other day, can I build the name only in SQL? The problem is that not all products have a brand…

The first approach was the REPLACE() function:

function REPLACE(str, from_str, to_str)

Nice, but… There’s always a but… In the documentation it doesn’t states, when to_str is NULL, the result is also NULL! Seems to me illogical, normally I expect the from_str
cleared from str in this case…

So, the query

SELECT REPLACE(name, '#', (SELECT name FROM brands WHERE id = products.brand_id)) FROM products;

results in several NULL rows… This is wrong, since products without brands should be displayed as-is.

What solves the problem, is the IF function:

IF(condition, true_value, false_value)

We use the “brand_id” field as condition, we replace the diez only if brand_id > 0. The final query looks like this:

SELECT IF(brand_id > 0, (REPLACE(name, '#', (SELECT name FROM brands WHERE id = products.brand_id))), name) FROM products;

Not a big problem, but catches my eyes and at some point looks unprofessional…

Scenario:

<p><img src="icon.png" /> Some text</p>

When looking at the rendered page, the image is down by 1px, relative to text. Although the img tag is pre-formatted in CSS to appear vertically centered to the text, it’s appearance is still wrong. I’ve checked this in many browsers and I found that this everywhere looks the same…

Look at this example:

Some text

Check closely the image position… To see better the image-text alignment, select the text or press Ctrl-A.

The solution…

Set the image position to relative and move up by 1px:

style = "vertical-align: middle; position: relative; top: -0.15em;"

Now it looks nice:

Some text

That’s it. For the simplicity and standard workflow, you may include in your css file:

img {
  border: none;
  vertical-align: middle;
}
img.text {
  vertical-align: middle;
  position: relative;
  top: -0.15em;
}

and use the style in html:

<p><img src="icon.png" class="text"/> Some text</p>
Inline image down by 1px

Screenshot of selection using inline images

27 Sep / 2012

Hello world!

Szasz-Fabian Jozsef

Me

Toady is the 0th anniversary of starting my personal homepage…

I’m Szasz-Fabian Jozsef, living in Saint Georghe (HU: Sepsiszentgyörgy, RO: Sfântu Gheorghe), Romania.

I’m working as a freelancer photographer, web developer and graphic designer.

Why English?

You may ask why I’m writing my blog in English?

Well, regarding my main interests – web development, programming, stock photography – talking about these on an international language is better, since people all around the world may be interested of the same subjects, not only those who live in my country/Europe.