Innota

Kaikilla verkkosivuilla tarvitaan erilaisia tiedostoja kuten kuvia, tai sinulla saattaa olla PDF-tiedostoja, joita haluat asiakkaidesi lataavan.

Kuvien lataaminen, optimointi ja skaalaaminen on yleensä aikaavievää ja siihen tarvitaan ainakin jonkinlaisia kuvankäsittelytatitoja. Innotassa kaikki kuviin liittyvät toiminnot ovat todella helppoja, ja ne voidaan hoitaa kokonaan sivuston teemasta käsin.

Tiedostojen lataaminen

Ihan aluksi sinun pitää siirtää tiedostot Innotan palvelimelle. Tämä onnistuu helposti klikkaamalla päävalikosta Tiedostot => Lähetä tiedosto.

Jos haluat, voit latausvaiheessa kirjoittaa tiedostolle uuden nimen. Halutessasi voit myös luoda hakemistorakenteen tiedostoillesi käyttämällä /-merkkiä tiedoston nimessä.

Esimerkiksi jos haluat lähettää kuvan puhelimestasi nimellä IMG_76387216378.JPG. Voit nimetä tiedoston uudelleen esimerkiksi 2016/03/start-of-the-vespa-season.jpg. Tämä auttaa hakukoneita paremmin löytämään ja luokittelemaan kuvasi, ja se auttaa sinua pitämään tiedostosi paremmin organisoituina.

Kuvia lähettäessäsi voit valita myös muutamia lisävaihtoehtoja. Voit halutessasi optimoida kuvan tai skaalata sen pienemmäksi ennen tallennusta. Näin säästät sivustosi käyttämää tallennustilaa.

Tiedostoihin linkittäminen

Creating links to uploaded files and images is easy. When you open a file in the admin panel you can see the full, absolute URL to your file. You can copy paste this URL and send it to your friends or share it directly in social media.

There's an even easier way to create URL's if you're creating links inside your Aatos site. There's a special file() function you can use to create the url to your file. Here's an example:

<p>
You can download the pdf <a href="{{ file('marketing.pdf') }}">here</a>.
</p>

This would be rendered as something like this

<p>
You can download the pdf <a href="http://cdn.aatos.co/example/marketing.pdf">here</a>.
</p>

It's easy to create links to files using Markdown, for instance, inside a blog post. Here's a Markdown example:

You can download the pdf [here](file:marketing.pdf).

The rendered HTML would look exactly the same in both of the examples above.

Linking to Images

Linking to images as just as easy as linking to any other type of file. In fact, you can use the same file() function to get the full, absolute URL for your image.

<img src="{{ file('vespa.jpg') }}" alt="Vespa" />

This works perfectly, but there is a more powerful image() function just for linking to image files.

Scaling and Optimizing Images

image() function makes it easy to scale and optimize your images.

Teknisiä tietoja

Under the hood we use jpegoptim to optimize JPEG images and pngquant to optimize PNG images.

Lets use this blog as an example. All of the blog posts include a header image, which is displayed both on the individual post page and the blog index. The main content column is only 605px wide, so there really is no point in using any wider images. But I'm lazy and I don't want to scale the images before uploading them to Aatos, and this is exactly where image() function helps.

I can use the image() function to automatically scale and optimize the image. Here's how I can get the URL to the image scaled down to a width of 605px.

<img src="{{ image('vespa.jpg', { "width" : 605 }) }}" />

When Aatos finds a image() function with width parameter set, it tries to find a file called vespa.jpg that is 605px wide. If such an image is not found, Aatos tries to find the original file called vespa.jpg. If this file is found, Aatos creates a copy of the file, scales it down to the desired width and optimizes the result.

The rendered HTML would look something like this

    <img src="http://cdn.aatos.co/example/vespa_605x340.jpg" />

It couldn't get any easier than this to scale down your images based on the width of the container where the image will be displayed. The smaller the image resolution, the smaller the filesize and the faster your site loads.

Getting Image Dimensions

One of the HTML best practices is to set width and height attributes to all of your img tags. This makes the browser to reserver the space for the images even before the image is loaded. This can make the rendering of the web page faster.

If you're using image() function to dynamically scale images it might be difficult to get the image width and height. This is where image_height() and image_width() functions come into the picture.

Here's an example

<img src="{{ image('vespa.jpg') }}" 
width="{{ image_width('vespa.jpg') }}" 
height="{{ image_height('vespa.jpg') }}" />

This would be rendered as something like this

<img src="http://cdn.aatos.co/example/vespa.jpg" width="1980" height="1080" />

These functions are most useful when you're using image() function to dynamically scale your images. Lets improve the example above and scale the image down to 605px and add both width and height attributes in the img tag.

<img src="{{ image('vespa.jpg', { "width" : 605 }) }}" 
width="{{ image_width('vespa.jpg', { "width" : 605 }) }}" 
height="{{ image_height('vespa.jpg', { "width" : 605 }) }}" />

This would be rendered as

<img src="http://cdn.aatos.co/example/vespa_605x340.jpg" width="605" height="340" />

Both height and width are checked from the scaled down version of the image vespa.jpg. In this, case the width is, of course, 605px and you could hard code that, but the height is more difficult to get if you have images with many different aspect ratios.