How do I upload and crop photos?
A photo field in the panel looks modest — a box with an "Upload" (Prześlij) button, or a thumbnail that's already in place. Behind it, though, are three things worth knowing before you add your first photo: the crop, the point that must always stay in frame, and alt text.
Uploading
Click "Upload" and pick a file from your computer, or simply drag the photo onto the field. It goes into your site's media library and is ready to use. You don't need to prepare several versions of the same file in different sizes — the site fetches whatever size it needs for each spot straight from the panel.
Two tools in one window
On most photos, when you hover over the thumbnail, you'll see an icon with the tooltip "Crop image" (Przytnij obraz). It opens a window called "Edit hotspot and crop" (Edytuj hotspot i przycięcie) with two shapes laid over the photo. The panel sums them up in one sentence: "Adjust the rectangle to crop the image. Adjust the circle to specify the area that should always be visible."
The rectangle is the crop. Anything left outside it is removed from the photo for good, everywhere on the site. It's handy when there's something unwanted at the edge of the shot — part of someone else's hand, a bin in the corner of your treatment room.
The circle is the hotspot — the point of interest. It doesn't cut anything off. It just tells the site what matters most in the photo — the face in a portrait, the chair in your treatment room, the logo on your sign. Whenever the site has to fit the photo into a frame with different proportions than the original, it shifts the frame so that this spot stays visible. Think of a mat laid over a larger print: the site dictates the shape of the window, but you decide what it settles on.
Under the photo, the same window shows previews in several shapes at once. It's the quickest way to check that nobody has lost the top of their head.
Where the site crops photos
Not every photo on the site is framed the same way. In some places the frame has a fixed shape, and that's where the hotspot matters. In others, the photo is shown whole.
| Photo | Where it appears | Frame shape | Does the hotspot matter? |
|---|---|---|---|
| Service → Photo (Zdjęcie) | card on the services page | landscape 16:9 | yes |
| Service → Photo | banner at the top of the service page | wide strip 5:2 | yes |
| Blog Post → Main photo (Zdjęcie główne) | card on the post list | landscape 16:9 | yes |
| Blog Post → Main photo | banner at the top of the post | wide strip 5:2 | yes |
| Gallery Photo → Photo | gallery thumbnail | square 1:1 | yes |
| Gallery Photo → Photo | enlarged view after clicking | whole photo | no |
| Photo inserted into a Blog Post's Content | inside the post text | whole photo | no |
| Team Member → Photo | person's card on the About page | portrait 3:4, aligned to the top | no |
| Site Settings → Logo | site header | whole logo, 40 px high | no |
On wide monitors the service and post banners are at most 420 pixels tall, so the bottom strip of the photo sometimes gets trimmed as well. Keep the main subject in the middle or upper part of the shot rather than along the bottom edge.
Team photos work differently from the rest. The site doesn't frame them using the hotspot — it always sticks to the top edge of the photo, so faces don't slip out of the frame. If your team has just one person, their photo is shown whole, with no cropping at all. That's why with portraits what matters most is how the photo itself is taken — more in how do I add or edit a team member.
The rectangle crop, on the other hand, applies everywhere. If you cut something off, it won't come back in the thumbnail or in the enlarged view.
What size of photo to prepare
The panel gives specific dimensions in only two places. A Team Member's photo should be portrait, in a 3:4 ratio — 600 × 800 pixels, for example. The Favicon in Site Settings should be square, PNG or SVG, ideally at least 180 × 180 pixels.
For the other photos in the table, one simple rule is enough: make photos for services and the blog landscape and at least 1,400 pixels wide, because that's the size of the largest banner. Gallery photos work best with the important subject close to the centre, since the thumbnail is a square either way. Upload the sharing image in the SEO tab at exactly 1200 × 630 pixels — that field has no cropping tool.
Alt text
On some photos you'll see an extra field below the image: "Alt text" (Tekst alternatywny). It's on a Service's photo, a post's Main photo, every photo inserted into a post's content (where there's also "Caption" — Podpis pod zdjęciem) and every Gallery Photo. It's a short description of what's shown, like "Dr Anna Kowalska in her dental surgery".
Fill it in every time it appears, for two reasons. First, Google reads it when indexing images. Second, people using a screen reader — because they're blind or partially sighted — will hear that description instead of the photo itself. If the field stays empty, the site uses the title of the service, post or photo instead, which beats nothing but rarely describes what's actually in the picture.
A Team Member's photo and the Logo don't have this field. The site describes them on its own — with the person's name or your company name.
Before you upload a photo
A phone can take a photo weighing a dozen megabytes or more. The site always fetches a scaled-down version from the panel anyway, but very large files are slow to upload and take up space in your media library. Before uploading, it's worth shrinking the file to roughly 1–2 megabytes with any free online image compression tool. Also make sure the photo is the right way up (not lying on its side) and that the framing actually shows what you want, before you start cropping it in the panel.
That's the full set of basic panel skills — the rest is just getting comfortable with the individual content types, starting with Site Settings.