{"id":15490,"date":"2026-11-04T16:26:48","date_gmt":"2026-11-04T16:26:48","guid":{"rendered":"https:\/\/academy.filio.io\/?p=15490"},"modified":"2026-11-04T16:26:48","modified_gmt":"2026-11-04T16:26:48","slug":"filio-web-app-before-and-after","status":"publish","type":"post","link":"https:\/\/academy.filio.io\/filio-web-app-before-and-after\/","title":{"rendered":"How to Create Before &#038; After Sequences in Filio Web App"},"content":{"rendered":"\n<style>.filio-academy-motion{width:100%;max-width:800px;margin:1rem auto 1.75rem}.filio-academy-motion.filio-management-still{max-width:352px}.filio-academy-motion video,.filio-academy-motion img{display:block;width:100%;height:auto;border:1px solid #e3e3e3;box-sizing:border-box;border-radius:6px}.filio-academy-motion figcaption{font-size:.9em;margin-top:.5rem}.filio-academy-motion .motion-still{display:none}@media(prefers-reduced-motion:reduce){.filio-academy-motion video{display:none}.filio-academy-motion .motion-still{display:block}}<\/style>\n<div class=\"filio-academy-before-after-web\">\n<nav class=\"filio-academy-step-toc\" aria-label=\"In this guide\" hidden><\/nav>\n<h2>1. Open the Project and Select the Before Photo<\/h2>\n<p>Open your project, go to <strong>Media<\/strong>, and open the photo you want to use as the Before reference.<\/p>\n<figure class=\"filio-academy-motion\">\n  <video autoplay muted loop playsinline preload=\"none\" poster=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/01-open-project-and-before.jpg\" aria-hidden=\"true\" width=\"1280\" height=\"720\">\n    <source src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/01-open-project-and-before.mp4\" type=\"video\/mp4\" media=\"(prefers-reduced-motion: no-preference)\">\n  <\/video>\n  <img decoding=\"async\" class=\"motion-still\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/01-open-project-and-before.jpg\" alt=\"\" loading=\"lazy\">\n  <figcaption>The Building and Renovation project opens, and the reference photo appears in the media viewer.<\/figcaption>\n<\/figure>\n\n<h2>2. Open Before &amp; After<\/h2>\n<p>Select <strong>Before &amp; After<\/strong> in the media viewer.<\/p>\n<figure class=\"filio-academy-motion\">\n  <video autoplay muted loop playsinline preload=\"none\" poster=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/02-open-before-after-clean.jpg\" aria-hidden=\"true\" width=\"1280\" height=\"588\">\n    <source src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/02-open-before-after-clean.mp4\" type=\"video\/mp4\" media=\"(prefers-reduced-motion: no-preference)\">\n  <\/video>\n  <img decoding=\"async\" class=\"motion-still\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/02-open-before-after-clean.jpg\" alt=\"\" loading=\"lazy\">\n  <figcaption>The Before &amp; After action opens the After photo picker.<\/figcaption>\n<\/figure>\n\n<h2>3. Select an After Photo<\/h2>\n<p>Select a project photo that shows the same area at another stage, then choose <strong>Use Selected Media<\/strong>.<\/p>\n<figure class=\"filio-academy-motion\">\n  <video autoplay muted loop playsinline preload=\"none\" poster=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/03-select-after-photo-wide.jpg\" aria-hidden=\"true\" width=\"1280\" height=\"612\">\n    <source src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/03-select-after-photo-wide.mp4\" type=\"video\/mp4\" media=\"(prefers-reduced-motion: no-preference)\">\n  <\/video>\n  <img decoding=\"async\" class=\"motion-still\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/03-select-after-photo-wide.jpg\" alt=\"\" loading=\"lazy\">\n  <figcaption>The selected project photo is highlighted before Use Selected Media is chosen.<\/figcaption>\n<\/figure>\n\n<h2>4. Compare the Images and Save<\/h2>\n<p>Drag the golden slider across the images to inspect the difference, then select <strong>Save<\/strong>.<\/p>\n<figure class=\"filio-academy-motion\">\n  <video autoplay muted loop playsinline preload=\"none\" poster=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/04-compare-and-save.jpg\" aria-hidden=\"true\" width=\"1280\" height=\"720\">\n    <source src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/04-compare-and-save.mp4\" type=\"video\/mp4\" media=\"(prefers-reduced-motion: no-preference)\">\n  <\/video>\n  <img decoding=\"async\" class=\"motion-still\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/04-compare-and-save.jpg\" alt=\"\" loading=\"lazy\">\n  <figcaption>The golden handle reveals both storefront views before the comparison is saved.<\/figcaption>\n<\/figure>\n\n<h2>5. Add Another After Sequence<\/h2>\n<p>In the saved comparison, choose <strong>Add Sequence<\/strong>. Select another project photo, choose <strong>Use Selected Media<\/strong>, and select <strong>Save<\/strong>. Repeat for each additional After photo. Select a sequence thumbnail to compare that update with the original Before photo.<\/p>\n<figure class=\"filio-academy-motion\">\n  <video autoplay muted loop playsinline preload=\"none\" poster=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/05-add-sequence-wide.jpg\" aria-hidden=\"true\" width=\"1280\" height=\"612\">\n    <source src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/05-add-sequence-wide.mp4\" type=\"video\/mp4\" media=\"(prefers-reduced-motion: no-preference)\">\n  <\/video>\n  <img decoding=\"async\" class=\"motion-still\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/05-add-sequence-wide.jpg\" alt=\"\" loading=\"lazy\">\n  <figcaption>Add Sequence opens the photo picker, and the saved comparison shows Sequence 2 of 2.<\/figcaption>\n<\/figure>\n\n<h2>6. Replace or Manage an Existing Sequence<\/h2>\n<p>Select an After sequence. <strong>Replace Current Sequence<\/strong> changes its After photo. <strong>Remove Sequence<\/strong> removes the selected sequence from the comparison. The panel also shows <strong>Delete All Sequences<\/strong>. This guide covers reviewing and adding updates.<\/p>\n<figure class=\"filio-academy-motion filio-management-still\">\n  <img decoding=\"async\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/06-manage-sequence.jpg\" alt=\"\" loading=\"lazy\">\n  <figcaption>The saved comparison shows Replace Current Sequence, Remove Sequence, and Delete All Sequences.<\/figcaption>\n<\/figure>\n\n<h2>7. Review the Saved Before &amp; After Set<\/h2>\n<p>Return to project <strong>Media<\/strong> and open a photo linked to the comparison. In <strong>Details<\/strong>, find <strong>Before &amp; After Set<\/strong> and select <strong>Before &amp; After<\/strong> to reopen it. This simulated project shows <strong>2 After Updates Linked<\/strong>.<\/p>\n<figure class=\"filio-academy-motion\">\n  <video autoplay muted loop playsinline preload=\"none\" poster=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/07-review-saved-set.jpg\" aria-hidden=\"true\" width=\"1280\" height=\"720\">\n    <source src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/07-review-saved-set.mp4\" type=\"video\/mp4\" media=\"(prefers-reduced-motion: no-preference)\">\n  <\/video>\n  <img decoding=\"async\" class=\"motion-still\" src=\"https:\/\/academy.filio.io\/wp-content\/uploads\/2026\/11\/07-review-saved-set.jpg\" alt=\"\" loading=\"lazy\">\n  <figcaption>The Details panel shows the Before &amp; After Set and two linked After updates.<\/figcaption>\n<\/figure>\n\n<p><strong>Related guide<\/strong><\/p>\n<p>For the mobile capture workflow, see <a href=\"https:\/\/www.filio.io\/academy\/how-to-create-and-compare-before-after-photos-in-filio-data-collector\/\" target=\"_blank\" rel=\"noopener\">How to Create and Compare Before &amp; After Photos in Filio Data Collector?<\/a><\/p>\n<div class=\"elementor-button-wrapper\">\n  <a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/app.filio.io\/login\/?tab=register\" target=\"_blank\" rel=\"noopener\">\n    <span class=\"elementor-button-content-wrapper\"><span class=\"elementor-button-text\">Sign Up For Filio<\/span><\/span>\n  <\/a>\n<\/div>\n<\/div>\n<script>\n(() => {\n  const guide = document.querySelector('.filio-academy-before-after-web');\n  const nav = guide.querySelector('.filio-academy-step-toc');\n  const steps = [...guide.querySelectorAll(':scope > h2')].filter(heading => \/^[1-7]\\.\/.test(heading.textContent.trim()));\n  if (steps.length !== 7) return;\n  const label = document.createElement('strong');\n  label.textContent = 'In this guide';\n  const list = document.createElement('ol');\n  steps.forEach((heading, index) => {\n    heading.id ||= 'filio-before-after-step-' + (index + 1);\n    const item = document.createElement('li');\n    const link = document.createElement('a');\n    link.href = '#' + heading.id;\n    link.textContent = heading.textContent.trim().replace(\/^\\d+\\.\\s*\/, '');\n    item.append(link);\n    list.append(item);\n  });\n  nav.append(label, list);\n  nav.hidden = false;\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Create a Before &#038; After comparison in the Filio Web App, then use Add Sequence to link more After photos to the original Before reference.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[131,232],"tags":[],"class_list":["post-15490","post","type-post","status-publish","format-standard","hentry","category-filio-web-app","category-media-management-and-editing"],"acf":[],"_links":{"self":[{"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/posts\/15490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/comments?post=15490"}],"version-history":[{"count":5,"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/posts\/15490\/revisions"}],"predecessor-version":[{"id":15514,"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/posts\/15490\/revisions\/15514"}],"wp:attachment":[{"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/media?parent=15490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/categories?post=15490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/academy.filio.io\/wp-json\/wp\/v2\/tags?post=15490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}