Managing Projects

Projects allow you to create, manage, and showcase your portfolio using Timber. Each project can contain text, images, and videos, which means that you’ll be able to showcase your work in the format that fits best.

Adding a new project

To add a new project to your website, from your WordPress Dashboard, navigate to ProjectsAdd New. Once you’re there, you can add the title in the top bar and your project’s details in the text area below.

Adding images

You can add your media content right in the editor in the form of image galleries (we automatically insert an empty gallery when you create a new project just to get you started that much faster), regular images (we recommend keeping the images on separate lines), or video embeds.

Timber will only look at the image URL (or ID if it’s a gallery shortcode) and the caption, if present. So it will ignore any other settings you may use (like image alignment).

You can at any point insert regular content (text, shortcodes, and so on) between any of the three media types (images, videos, galleries) described above. All content added will be part of the project’s presentation, so nothing gets lost.

As you can see, by interpreting your content, Timber succeeds in giving you flexibility while at the same time making your content future-proof.

To add images, you need to click on the image icons from the text editor or the Add Media button. After you click it, a modal window will show up (the Media Uploader). Here you can drag-and-drop images from your computer or add already uploaded images to the project.

Note: In the same modal window, you can reorder images by simple drag-and-drop.

Here’s a video that shows how to add a new project with details and images.

How to create a new project and add images

Adding videos to a project

To add a video, you need to follow the same process as for adding images. Open your Project, click the Add Media button and select a video already uploaded to your website or upload one from your computer.

How to add a video to your project

Important note: We only support self-hosted images and videos, meaning media content uploaded to your site’s Media Library, not from other sites/domains. This is because we need to process and know this content pretty well, which is not feasible (performance-wise) with external images or videos.

Projects Specific Options

We know that each project has a different mood and attitude, as do you. When creating or editing each project, you can select the layout you wish to use from the Project Settings box under your editor.

There are three project layouts to choose from (ordered ascending by the size of images):

  • Thumbnails – your project will open up in a view displaying all of the project’s images in thumbnail form (text and videos are excluded); by clicking on any image thumbnail, your visitor will transition to the next layout, filmstrip;
  • Filmstrip – this layout will display your project content (text and videos included this time) as a full height film strip with horizontal scrolling; by clicking on any image, your visitor will transition to the Zoom & Pan view that will immerse him even more into your photography; one can switch freely between these three views (thumbnails, filmstrip, and Zoom & Pan);
  • Fullscreen – your project will be presented as a fullscreen slideshow with a transparent header and footer (giving your photos the maximum screen space).

You also have two options for how the images will load on your website. From the Fullscreen Image Scaling area you can choose between:

  • FILL – the image covers the entire screen and can be explored using an immersive panning effect;
  • FIT – the image is resized to fit inside the container, and it’s fully visible from the start.

That is all about creating projects. We hope you enjoy the tools we have designed to help you beautifully showcase your awesome creations.

Updated on March 24, 2021

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at hello@pixelgrade.com and we will give you a helping hand.