Overview

This is the website of photographer Iris Calloway: a portfolio of photographs, a journal of field notes and a way for people to get in touch. Everything on it is managed from the Studio admin: you upload photographs, write journal posts, arrange the home and about pages by dragging blocks, and answer the comments and messages visitors send.

The admin has seven parts: Dashboard, Pages, Journal, Works, Comments, Messages and Settings. What you change shows on the website as soon as you save.

How the pieces fit together

What you manage in the admin, and where it shows on the website.

Reading it from the left: Pages builds the home and about pages from blocks, Works holds your photographs and series, Journal holds your posts, and Settings sets the name, colour, theme and social links used on every page. Two blocks on the home page fill themselves: Selected works from your photographs and Latest posts from the journal. Visitors send things back: comments wait in Comments until you approve them, and contact messages arrive in Messages, where you answer by email.

Where to go next

Start with 1. Getting Started. To change the home page go to 3. Pages; to add photographs, 4. Works; to write, 5. Journal. For a quick fact use the search box, 11. Reference or 12. Quick Answers.

1. Getting Started

1.1 Signing in

Click Admin at the bottom of any page of the website, or go straight to /AdminLogin. Enter your user name and password and press Sign in. The Dashboard opens.

The Studio admin sign-in page.

• A wrong user name or password shows a message and nothing else. After several wrong tries the page asks you to wait a few minutes.
• You stay signed in for 8 hours, renewed while you work. When it ends you come back to this page.
• Sign out is at the top right of every admin page.
• To change the password, see 8.4 Admin password.

1.2 The layout

The parts of the admin screen.

1.3 Saving and Restore last version

Nothing changes on the website until you press a Save button. A short message at the bottom of the screen confirms each save.

Every save keeps the version before it.

• Restore last version is on the Dashboard and on the Pages screen. It puts back the whole site as it was before your last save.
• Restoring is itself a save, so pressing it twice brings your newer version back.

1.4 On a phone or tablet

The admin and the website both work on phones and tablets. On a narrow screen the admin menu folds into the ☰ button at the top.

The Pages editor and the website's menu on a phone.

2. Dashboard

2.1 At a glance

The Dashboard.

2.2 Shortcuts

• Write a post opens a new journal post; Upload photos opens Works.
• Waiting for review lists new comments; All comments opens Comments.
• Latest messages lists the newest messages, with a dot on unread ones; Inbox opens Messages.
• Your site links to Pages, Settings and the website itself.
• Versions has Restore last version (see 1.3).

3. Pages

3.1 How the editor works

The Home and About pages are built from blocks stacked one under another. The editor shows them the way they look on the website: what you see is the page.

The Home page in the editor.

• Pick Home or About with the tabs at the top.
• Each block has a bar with its type, a drag handle (⠿), Photo (and Flip) where it applies, up and down arrows and Remove.
• The buttons on the right: Restore last version, View page (opens it on the website) and Save page.

3.2 Editing text in place

Click any heading, paragraph, caption or quote and type. Empty boxes show a grey hint of what goes there, such as Headline or Caption (optional).

Typing in a heading. "Unsaved changes" appears beside the buttons.

• In text blocks, leave an empty line between paragraphs.
• Text is kept as plain words; formatting such as bold belongs in the journal.

3.3 Moving blocks

• Drag a block by its handle (⠿). The other blocks make room as you move; near the top or bottom of the window the page scrolls.
• Or use the up and down arrows on the block's bar.

3.4 Adding and removing blocks

Scroll to Add a block under the last block and press one of the nine types. The new block is added at the end; move it where you want it.

The nine block types under the page.

The nine block types.

To take a block off the page, press Remove on its bar. It leaves the website when you save. Until then you can get it back by leaving the page without saving; after saving, use Restore last version.

3.5 Photos in blocks

Hero photo, Wide photo and Photo and text blocks have a Photo button. It opens your photo library: every photograph in Works, plus the site's own pictures (hero, portrait and studio). Click one to use it.

Choosing a photo for the hero block.

On a Photo and text block, Flip puts the photo on the other side.

3.6 Selected works and Latest posts

• Selected works: choose From — Featured photos (the ones you starred in Works), Newest photos or one series — and how many to Show, from 3 to 24. The editor previews the first six.
• Latest posts: choose how many of the newest published posts to show, from 1 to 9.
• Both update by themselves when you add photographs or publish posts.

3.7 Saving a page

• Any change shows Unsaved changes beside the buttons. Press Save page to put it on the website.
• If you try to leave the page with unsaved changes, the browser asks you first.
• View page opens the saved page on the website in a new tab.

3.8 The About page

The About page works the same way, with the same block types.

The About tab: a Photo and text block with the portrait.

4. Works

4.1 The photo grid

All your photographs in the order they appear on the website's Works page.

Works: the drop zone at the top and the photographs below.

Each photograph shows its title, series and year, with a drag handle (⠿), a star (★), arrows to move it, and Edit. View works opens the Works page on the website.

4.2 Uploading photographs

What happens to a photograph you upload.

1. Drag photos from your computer onto Drop photos here, or press Choose photos.
2. A line for each file shows its progress and ends with added, or a reason in red.
3. New photographs go first in the grid. Press Edit to give each a proper title, series, year and caption.

One photograph added, first in the grid.

4.3 Order and featured photos

• Order: drag a photograph by its handle (⠿) to a new place, or use the ‹ › arrows. The new order is saved straight away and is the order on the website.
• Featured: press the star (★) to feature a photograph. A filled star means featured. Featured photos fill Selected works blocks set to Featured photos.

4.4 Editing a photograph

Edit photograph.

Change the Title, Series, Year and Caption, tick Featured in Selected works if you like, and press Save. The caption shows under the photo in the full-screen viewer.

4.5 Series

Series are the filters on the website's Works page. Each has a title, a short description and a count of its photos.

Series under the photo grid.

• Change a title or description and press Save series.
• Add series adds an empty row; fill it in and save.
• A series can be removed once no photos are in it: clear its title and save.

4.6 Deleting a photograph

Open Edit and press Delete. A photograph that is used as a journal cover, inside a post or in a page block can't be deleted; the message says so. Choose another photo there first.

5. Journal

5.1 The post list

Posts with their date, tags, likes and comments.

• Filter with All, Published and Drafts, or type in Find a post.
• Edit opens a post; Delete removes it and its comments after you confirm.
• New post starts a new one.

5.2 Writing a post

The post editor: title, text and toolbar on the left, settings on the right.

1. Type the title at the top.
2. Write in the big box below the toolbar.
3. Fill in the cover, excerpt, date and tags on the right.
4. Tick Published when it's ready, and press Save. View opens it on the website.

5.3 The toolbar

5.4 Cover, excerpt, date and tags

The settings beside the text.

• Cover photo: press Choose cover and pick a photograph. It heads the post and its card in the journal.
• Excerpt: one or two sentences for the journal list, under 200 characters.
• Date: the post's date; posts are listed newest first.
• Tags: words separated by commas. They become the filter chips on the Journal page.
• Web address: the end of the post's address, made from the title. Use at least 3 letters or numbers; each post needs its own.

5.5 Published and drafts

• Untick Published to keep a post as a draft. Drafts are only visible in the admin.
• To publish, a post needs a title, a cover photo, an excerpt and enough text; the editor tells you what is missing.

5.6 What the editor keeps

Only ordinary formatting is kept. When you save, the site removes scripts, hidden code, unsafe links and pictures from other websites. Pasting from another page is fine; anything that isn't text, headings, quotes, lists, links or your own photos is cleaned out.

6. Comments

6.1 The life of a comment

Comments wait for you before anyone else sees them.

6.2 Reviewing comments

The Waiting tab, with Approve all at the top.

• The tabs Waiting, Approved and Hidden show how many comments each holds.
• Each comment shows the name, date, the post it belongs to (click to open it) and the text.
• Approve puts it on the website, Hide keeps it out of sight, Delete removes it for good. Approve all approves everything waiting.

Approved comments can still be hidden or deleted.

7. Messages

7.1 The inbox

Messages from the Contact page arrive here.

The inbox, with a message open on the right.

• The tabs Open, Done and All sort messages by whether you have dealt with them. A dot marks one you haven't read.
• Click a message to read it: name, email, date, topic (commission, print, workshop or just hello) and the message.

7.2 Answering

The life of a message.

• Reply by email opens your email program with the visitor's address and the subject filled in.
• Mark as done moves the message to Done; Mark as open moves it back.
• Delete removes it for good.

8. Settings

Settings change the whole website as soon as you press Save settings.

8.1 Site and look

Site, Look and the live Preview.

• Name: shown in the header, the footer and the browser tab. Tagline: the line under the name in the footer.
• Accent colour: pick one of the swatches or the square to choose any colour. It colours buttons and links.
• Theme: Light or Dark for the whole site. Visitors can still switch with the moon button.

8.2 Contact and social links

Contact details and social links.

• Contact: the email address and studio location shown on the Contact page.
• Social links: Instagram, YouTube, X, Facebook, LinkedIn, TikTok, Pinterest, Threads, Behance, Flickr and Vimeo. Type the full address of your profile, starting with https://, and tick the box to show it.
• Unticked or empty links are hidden. Shown links appear as icons under the footer menu, in the Follow list on the Contact page and in Follow links blocks. They open your profile in a new tab.

8.3 Preview

The Preview on the right shows the name, tagline, accent colour, theme and social icons as you change them, before you save.

8.4 Admin password

The Admin password box creates the code for a new password.

1. Type the new password in New password and press Create hash.
2. Copy the 64-character code that appears.
3. Paste it into appConfig/application.cfg as app.admin.passhash on the web server (see 10.1).
4. From then on, sign in with the new password.

9. The Public Website

What visitors see. The menu has Works, Journal, About and Contact, plus the moon button to switch between light and dark.

9.1 Home

The hero block at the top of the home page.

A text block and Selected works further down.

The Contact call block and the footer with the menu, social icons and Admin link.

9.2 Works

All photographs in a masonry grid. The chips at the top filter by series.

The Works page.

Clicking a photograph opens the full-screen viewer with its title, caption, series and year. Use the arrows or the keyboard's ← → keys to move, and Esc to close.

The full-screen viewer.

9.3 Journal and posts

Posts as cards, newest first. Tag chips filter them, the search box finds words as you type, and Load more shows older posts.

The Journal page.

A post has its cover, date, reading time and tags, then the text. Below are a heart to like it, the approved comments and a form to add one, Older and Newer links and related posts.

The top of a post.

After posting, the visitor is told the comment will appear once it's approved.

9.4 About

The About page, built in Pages.

9.5 Contact

A form with name, email, topic and message (at least 10 characters), the contact details and the Follow list of social links.

The Contact page.

The thank-you note after sending. The message is now in Messages.

9.6 On a phone

On a phone the menu folds into the ☰ button, and grids become one or two columns.

The home page and the menu on a phone.

10. Installation & Setup

For the person who installs and looks after the site.

10.1 Sign-in settings

1. Make a password hash: in the admin use Settings → Admin password, or in PowerShell:

   $p = Read-Host "Password"; [BitConverter]::ToString([Security.Cryptography.SHA256]::Create().ComputeHash([Text.Encoding]::UTF8.GetBytes($p))).Replace("-","").ToLower()

2. Edit appConfig/application.cfg:

   app.app.runmode | 1
   app.admin.user | iris
   app.admin.passhash | <the 64-character hash>

3. Sign in with that user name and password.

10.2 Folder permissions

Give the site write access to three folders. On IIS, give the application pool identity Modify permission.

10.3 HTTPS

Serve the site over HTTPS. The sign-in token travels in a cookie and with each admin request.

10.4 Redeploying

11. Reference

11.1 Block types

11.2 Upload rules

11.3 Comment and message statuses

11.4 Social networks

Instagram, YouTube, X, Facebook, LinkedIn, TikTok, Pinterest, Threads, Behance, Flickr and Vimeo. Addresses must start with https://.

12. Quick Answers