{"id":913,"date":"2026-11-09T08:14:38","date_gmt":"2026-11-09T08:14:38","guid":{"rendered":"https:\/\/coolmedialife.com\/?p=913"},"modified":"2026-11-09T08:43:39","modified_gmt":"2026-11-09T08:43:39","slug":"part-2-add-photos","status":"publish","type":"post","link":"https:\/\/coolmedialife.com\/index.php\/heic-image-viewer\/part-2-add-photos\/","title":{"rendered":"HEIC +Converter &#8211; Add Photos"},"content":{"rendered":"\n<style>\n\/* ==========================================================================\n   HEIC +Converter \u2014 User Guide for coolmedialife.com\n   Theme: Occasio. Everything is scoped to #hc-guide, and colors\/fonts are\n   taken from the theme's own CSS variables where they exist, so the guide\n   inherits the site's typography, navy headings and steel-blue links.\n   Prefix: hc-\n   ========================================================================== *\/\n\n#hc-guide {\n  \/* Theme tokens first, hard fallbacks second. *\/\n  --hc-ink: var(--text-color, rgba(0, 0, 0, .9));\n  --hc-ink2: var(--medium-text-color, rgba(0, 0, 0, .7));\n  --hc-ink3: var(--light-text-color, rgba(0, 0, 0, .5));\n  --hc-line: var(--light-border-color, rgba(0, 0, 0, .1));\n  --hc-line2: var(--medium-border-color, rgba(0, 0, 0, .22));\n  --hc-accent: var(--link-color, #5d7b94);\n  --hc-accent-hover: var(--link-hover-color, #2a4861);\n  --hc-accent-soft: #eff4f7;\n  --hc-title: var(--title-color, #2a4861);\n  --hc-head-bg: var(--light-gray-color, #ededef);\n  --hc-ok: var(--accent-color, #60945d);\n  --hc-ok-soft: #f0f6ef;\n  --hc-warn: #8a5300;\n  --hc-warn-soft: #fdf6e7;\n\n  \/* Product colors: the app's own accent, plus one mark per format family. *\/\n  --hc-brand: #e74c3c;\n  --hc-brand-soft: #fdeeeb;\n  --hc-fmt-jpeg: #c0392b;\n  --hc-fmt-png: #217346;\n  --hc-fmt-archive: #4a6b8a;\n  --hc-fmt-other: #5a5a5a;\n\n  --hc-mono: \"Cascadia Mono\", Consolas, \"Courier New\", monospace;\n\n  color: var(--hc-ink);\n  max-width: 100%;\n  text-align: left;\n}\n\n#hc-guide *,\n#hc-guide *::before,\n#hc-guide *::after {\n  box-sizing: border-box;\n}\n\n\/* ---------- Text ---------- *\/\n\n#hc-guide p {\n  margin: 0 0 1em;\n}\n\n#hc-guide h2 {\n  margin: 2.2em 0 .65em;\n  padding: 0 0 .35em;\n  font-size: 1.5rem;\n  line-height: 1.35;\n  letter-spacing: -.01em;\n  color: var(--hc-title);\n  border-bottom: 1px solid var(--hc-line);\n}\n\n#hc-guide h3 {\n  margin: 1.7em 0 .45em;\n  font-size: 1.15rem;\n  line-height: 1.45;\n  letter-spacing: 0;\n  color: var(--hc-title);\n}\n\n#hc-guide h2[id] {\n  \/* No sticky header on this theme; small offset keeps the heading off the edge. *\/\n  scroll-margin-top: 24px;\n}\n\n#hc-guide a {\n  color: var(--hc-accent);\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n\n#hc-guide a:hover,\n#hc-guide a:focus {\n  color: var(--hc-accent-hover);\n}\n\n#hc-guide strong {\n  color: var(--hc-ink);\n}\n\n#hc-guide ul,\n#hc-guide ol {\n  margin: 0 0 1em;\n  padding-left: 22px;\n}\n\n#hc-guide li {\n  margin: 0 0 .4em;\n}\n\n#hc-guide li:last-child {\n  margin-bottom: 0;\n}\n\n#hc-guide code {\n  font-family: var(--hc-mono);\n  font-size: .85em;\n  padding: .05em .32em;\n  color: #2b3138;\n  background: #f4f6f8;\n  border: 1px solid var(--hc-line);\n  border-radius: 3px;\n  white-space: nowrap;\n}\n\n#hc-guide kbd {\n  display: inline-block;\n  min-width: 22px;\n  padding: 1px 6px;\n  font-family: var(--hc-mono);\n  font-size: .78em;\n  line-height: 1.6;\n  text-align: center;\n  color: #2b3138;\n  background: #fafafa;\n  border: 1px solid var(--hc-line2);\n  border-bottom-width: 2px;\n  border-radius: 4px;\n}\n\n\/* ---------- Intro ---------- *\/\n\n#hc-guide .hc-lede {\n  font-size: 1.05em;\n  color: var(--hc-ink2);\n  margin-bottom: .6em;\n}\n\n#hc-guide .hc-meta {\n  margin: 0 0 1.2em;\n  font-size: .82em;\n  color: var(--hc-ink3);\n}\n\n#hc-guide .hc-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin: 0 0 .4em;\n}\n\n#hc-guide .hc-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 3px 11px 3px 4px;\n  font-size: .78em;\n  line-height: 1.6;\n  color: var(--hc-ink2);\n  background: #fff;\n  border: 1px solid var(--hc-line);\n  border-radius: 999px;\n}\n\n#hc-guide .hc-chip b {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n  height: 18px;\n  flex: 0 0 auto;\n  color: #fff;\n  font-size: 9.5px;\n  font-weight: 700;\n  border-radius: 5px;\n}\n\n#hc-guide .hc-chip.hc-jpeg b { background: var(--hc-fmt-jpeg); }\n#hc-guide .hc-chip.hc-png b { background: var(--hc-fmt-png); }\n#hc-guide .hc-chip.hc-archive b { background: var(--hc-fmt-archive); }\n#hc-guide .hc-chip.hc-tool b { background: var(--hc-fmt-other); }\n\n\/* ---------- Contents ---------- *\/\n\n#hc-guide .hc-toc {\n  margin: 1.6em 0 .4em;\n  padding: 16px 20px 14px;\n  background: #f7f9fa;\n  border: 1px solid var(--hc-line);\n  border-radius: 6px;\n}\n\n#hc-guide .hc-toc-title {\n  margin: 0 0 8px;\n  font-size: .72rem;\n  font-weight: 700;\n  letter-spacing: .08em;\n  text-transform: uppercase;\n  color: var(--hc-ink3);\n}\n\n#hc-guide .hc-toc-list {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 2px 26px;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n#hc-guide .hc-toc-list li {\n  margin: 0;\n  list-style: none;\n}\n\n#hc-guide .hc-toc-list a {\n  display: block;\n  padding: 3px 0;\n  font-size: .93em;\n  color: var(--hc-ink2);\n  text-decoration: none;\n}\n\n#hc-guide .hc-toc-list a:hover {\n  color: var(--hc-accent-hover);\n  text-decoration: underline;\n}\n\n\/* ---------- Feature cards ---------- *\/\n\n#hc-guide .hc-grid {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n  margin: 1.3em 0 1.5em;\n}\n\n#hc-guide .hc-card {\n  padding: 14px 16px;\n  background: #fff;\n  border: 1px solid var(--hc-line);\n  border-radius: 6px;\n}\n\n#hc-guide .hc-card-head {\n  display: flex;\n  align-items: center;\n  gap: 9px;\n  margin-bottom: 4px;\n}\n\n#hc-guide .hc-card-mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 22px;\n  flex: 0 0 auto;\n  color: #fff;\n  font-size: 10px;\n  font-weight: 700;\n  border-radius: 5px;\n}\n\n#hc-guide .hc-mark-jpeg { background: var(--hc-fmt-jpeg); }\n#hc-guide .hc-mark-png { background: var(--hc-fmt-png); }\n#hc-guide .hc-mark-archive { background: var(--hc-fmt-archive); }\n#hc-guide .hc-mark-other { background: var(--hc-fmt-other); }\n\n#hc-guide .hc-card h4 {\n  margin: 0;\n  font-size: 1em;\n  font-weight: 700;\n  line-height: 1.4;\n  color: var(--hc-ink);\n}\n\n#hc-guide .hc-card p {\n  margin: 0;\n  font-size: .88em;\n  line-height: 1.65;\n  color: var(--hc-ink2);\n}\n\n\/* ---------- Callouts ---------- *\/\n\n#hc-guide .hc-note {\n  display: grid;\n  grid-template-columns: 18px minmax(0, 1fr);\n  gap: 10px;\n  margin: 1.2em 0;\n  padding: 13px 15px;\n  font-size: .95em;\n  line-height: 1.7;\n  color: var(--hc-ink2);\n  background: var(--hc-accent-soft);\n  border: 1px solid var(--hc-line);\n  border-left: 3px solid var(--hc-accent);\n  border-radius: 4px;\n}\n\n#hc-guide .hc-note p {\n  margin: 0;\n}\n\n#hc-guide .hc-note p + p {\n  margin-top: .5em;\n}\n\n#hc-guide .hc-note-ico {\n  font-weight: 700;\n  line-height: 1.7;\n  text-align: center;\n  color: var(--hc-accent-hover);\n}\n\n#hc-guide .hc-note.hc-tip {\n  background: var(--hc-ok-soft);\n  border-left-color: var(--hc-ok);\n}\n\n#hc-guide .hc-note.hc-tip .hc-note-ico {\n  color: var(--hc-ok);\n}\n\n#hc-guide .hc-note.hc-warn {\n  background: var(--hc-warn-soft);\n  border-left-color: #b0761a;\n}\n\n#hc-guide .hc-note.hc-warn .hc-note-ico {\n  color: var(--hc-warn);\n}\n\n\/* ---------- Tables ---------- *\/\n\n#hc-guide .hc-table {\n  margin: 1.2em 0 1.5em;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n#hc-guide table {\n  width: 100%;\n  margin: 0;\n  border: 1px solid var(--hc-line);\n  border-collapse: collapse;\n  background: #fff;\n  font-size: .88em;\n  line-height: 1.6;\n}\n\n#hc-guide thead th {\n  padding: 8px 11px;\n  text-align: left;\n  font-size: .72em;\n  font-weight: 700;\n  letter-spacing: .05em;\n  text-transform: uppercase;\n  color: var(--hc-ink2);\n  background: #f4f5f6;\n  border: 0;\n  border-bottom: 1px solid var(--hc-line2);\n  white-space: nowrap;\n}\n\n#hc-guide tbody td {\n  padding: 9px 11px;\n  vertical-align: top;\n  color: var(--hc-ink2);\n  border: 0;\n  border-bottom: 1px solid var(--hc-line);\n}\n\n#hc-guide tbody tr:last-child td {\n  border-bottom: 0;\n}\n\n#hc-guide tbody td:first-child {\n  color: var(--hc-ink);\n}\n\n#hc-guide .hc-mono-list {\n  font-family: var(--hc-mono);\n  font-size: .86em;\n  line-height: 1.8;\n  overflow-wrap: anywhere;\n}\n\n\/* ---------- Numbered steps ---------- *\/\n\n#hc-guide ol.hc-steps {\n  margin: 1.1em 0 1.3em;\n  padding: 0;\n  list-style: none;\n  counter-reset: hc-step;\n}\n\n#hc-guide ol.hc-steps > li {\n  position: relative;\n  margin: 0 0 .65em;\n  padding-left: 32px;\n  list-style: none;\n  counter-increment: hc-step;\n}\n\n#hc-guide ol.hc-steps > li::before {\n  content: counter(hc-step);\n  position: absolute;\n  left: 0;\n  top: 3px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 21px;\n  height: 21px;\n  font-size: 11px;\n  font-weight: 700;\n  color: var(--hc-accent-hover);\n  background: var(--hc-accent-soft);\n  border: 1px solid var(--hc-line);\n  border-radius: 50%;\n}\n\n\/* ---------- Window diagram ---------- *\/\n\n#hc-guide .hc-wire {\n  margin: 1.3em 0 0;\n  overflow: hidden;\n  background: #fff;\n  border: 1px solid var(--hc-line2);\n  border-radius: 6px;\n}\n\n#hc-guide .hc-wire-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: 27px;\n  padding: 0 10px;\n  font-size: 10.5px;\n  color: var(--hc-ink2);\n  background: #fafbfb;\n  border-bottom: 1px solid var(--hc-line);\n}\n\n#hc-guide .hc-wire-btns {\n  display: flex;\n  gap: 9px;\n  color: var(--hc-ink3);\n  font-size: 10px;\n}\n\n#hc-guide .hc-wire-hero {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 76px;\n  background: var(--hc-brand);\n}\n\n#hc-guide .hc-wire-drop {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 3px;\n  width: 78%;\n  height: 54px;\n  font-size: 11px;\n  font-weight: 600;\n  color: #fff;\n  background: rgba(255, 255, 255, .06);\n  border: 1px dashed rgba(255, 255, 255, .75);\n  border-radius: 6px;\n}\n\n#hc-guide .hc-wire-drop span {\n  font-size: 9px;\n  font-weight: 400;\n  text-decoration: underline;\n  opacity: .9;\n}\n\n#hc-guide .hc-wire-head,\n#hc-guide .hc-wire-row {\n  display: grid;\n  grid-template-columns: minmax(0, 2.2fr) 58px 86px minmax(0, 1.2fr) 66px;\n  gap: 8px;\n  align-items: center;\n  padding: 0 10px;\n  font-size: 9.5px;\n  color: var(--hc-ink2);\n}\n\n#hc-guide .hc-wire-head {\n  height: 24px;\n  font-size: 9px;\n  letter-spacing: .04em;\n  text-transform: uppercase;\n  color: var(--hc-ink3);\n  background: #eeeef2;\n  border-bottom: 1px solid var(--hc-line);\n}\n\n#hc-guide .hc-wire-row {\n  height: 26px;\n  background: #fff;\n  border-bottom: 1px solid #f0f1f3;\n}\n\n#hc-guide .hc-wire-foot {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 7px 10px;\n  font-size: 9.5px;\n  color: var(--hc-ink2);\n  background: #f2f4f7;\n  border-top: 1px solid var(--hc-line);\n}\n\n#hc-guide .hc-wire-fields {\n  display: flex;\n  flex-direction: column;\n  gap: 3px;\n  min-width: 0;\n}\n\n#hc-guide .hc-wire-fields b {\n  font-weight: 600;\n  color: var(--hc-ink);\n}\n\n#hc-guide .hc-wire-cta {\n  flex: 0 0 auto;\n  padding: 7px 26px;\n  font-size: 10px;\n  font-weight: 700;\n  color: #fff;\n  background: var(--hc-brand);\n  border-radius: 4px;\n}\n\n#hc-guide .hc-wire-ok { color: #2f7d32; font-weight: 600; }\n#hc-guide .hc-wire-busy { color: var(--hc-accent-hover); font-weight: 600; }\n#hc-guide .hc-wire-ops { color: var(--hc-accent); }\n\n\/* Checkboxes in the diagram are drawn, not typed: the glyph at 9px is a\n   hairline. A filled square reads cleanly at any zoom. *\/\n#hc-guide .hc-box {\n  display: inline-block;\n  width: 7px;\n  height: 7px;\n  margin-right: 4px;\n  background: #fff;\n  border: 1px solid var(--hc-line2);\n  border-radius: 2px;\n  vertical-align: baseline;\n}\n\n#hc-guide .hc-box.hc-box-on {\n  background: var(--hc-accent-hover);\n  border-color: var(--hc-accent-hover);\n}\n\n#hc-guide .hc-caption {\n  margin: .6em 0 0;\n  font-size: .82em;\n  line-height: 1.6;\n  color: var(--hc-ink3);\n}\n\n\/* ---------- Small screens ---------- *\/\n\n@media (max-width: 700px) {\n  #hc-guide .hc-grid,\n  #hc-guide .hc-toc-list {\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  #hc-guide .hc-wire-head,\n  #hc-guide .hc-wire-row {\n    grid-template-columns: minmax(0, 1.6fr) 52px minmax(0, 1fr);\n  }\n\n  #hc-guide .hc-wire-head > :nth-child(3),\n  #hc-guide .hc-wire-head > :nth-child(5),\n  #hc-guide .hc-wire-row > :nth-child(3),\n  #hc-guide .hc-wire-row > :nth-child(5) {\n    display: none;\n  }\n}\n\n\/* ---------- Print ---------- *\/\n\n@media print {\n  #hc-guide {\n    color: #000;\n  }\n\n  #hc-guide .hc-toc {\n    display: none;\n  }\n\n  #hc-guide h2 {\n    break-after: avoid;\n    page-break-after: avoid;\n  }\n\n  #hc-guide .hc-table,\n  #hc-guide .hc-note,\n  #hc-guide .hc-card,\n  #hc-guide .hc-wire {\n    break-inside: avoid;\n    page-break-inside: avoid;\n  }\n\n  #hc-guide a {\n    color: #000;\n    text-decoration: none;\n  }\n}\n\n\/* --------------------------------------------------------------------------\n   Part kicker (pages 2-7) and the page-number pager.\n   The theme prints wp_link_pages() immediately after the_content(), inside\n   .entry-content but outside #hc-guide, so the pager rules below are scoped\n   to .entry-content instead of the guide wrapper.\n   -------------------------------------------------------------------------- *\/\n#hc-guide .hc-part {\n  margin: 0 0 1.1rem;\n  font-size: .72rem;\n  font-weight: 700;\n  letter-spacing: .09em;\n  text-transform: uppercase;\n  color: var(--hc-ink3);\n}\n\n.entry-content .post-nav-links {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  gap: 6px;\n  margin: 2.6rem 0 .2rem;\n  font-size: 0;\n  line-height: 1;\n}\n.entry-content .post-nav-links a,\n.entry-content .post-nav-links .post-page-numbers {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 34px;\n  height: 34px;\n  padding: 0 9px;\n  font-size: .85rem;\n  font-weight: 600;\n  line-height: 1;\n  color: #5d7b94;\n  background: #fff;\n  border: 1px solid rgba(0, 0, 0, .22);\n  border-radius: 6px;\n  text-decoration: none;\n  transition: background .15s ease, color .15s ease, border-color .15s ease;\n}\n.entry-content .post-nav-links a:hover,\n.entry-content .post-nav-links a:focus {\n  color: #fff;\n  background: #5d7b94;\n  border-color: #5d7b94;\n}\n.entry-content .post-nav-links .current {\n  color: #fff;\n  background: #2a4861;\n  border-color: #2a4861;\n  cursor: default;\n}\n\n\/* --------------------------------------------------------------------------\n   Multi-page layout: right rail with the seven parts, plus the bottom pager.\n   Each part is its own WordPress post, and the theme caps single-post content\n   at 800px, so #hc-guide is widened below to 800px body + 200px rail.\n   The rail comes *after* the body in the markup; it is moved to the second\n   column by source order, so no grid placement juggling is needed.\n   Links are sibling-relative (..\/part-3-convert\/), so they survive any\n   permalink structure.\n   -------------------------------------------------------------------------- *\/\n#hc-guide .hc-layout {\n  display: grid;\n  grid-template-columns: minmax(0, 800px) 200px;\n  gap: 40px;\n  \/* Body text starts at the very left edge of the post column instead of\n     floating in the middle: the leftover width goes to the right of the rail,\n     where there is nothing to look at. *\/\n  justify-content: start;\n  align-items: start;\n}\n#hc-guide .hc-body {\n  min-width: 0;\n}\n\n#hc-guide .hc-rail {\n  position: sticky;\n  top: 24px;\n  font-size: .82rem;\n  line-height: 1.4;\n}\n#hc-guide .hc-rail-title {\n  margin: 0 0 .75rem;\n  font-size: .7rem;\n  font-weight: 700;\n  letter-spacing: .09em;\n  text-transform: uppercase;\n  color: var(--hc-ink3);\n}\n#hc-guide .hc-rail-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-right: 2px solid var(--hc-line);\n}\n#hc-guide .hc-rail-list li {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\/* Right-hand rail: the list reads left-to-right (number, then label) and is\n   left-aligned with the rest of the guide; only the accent border sits on the\n   right edge, so the column still points back at the body text. *\/\n#hc-guide .hc-rail-list a {\n  display: block;\n  padding: 5px 11px 5px 10px;\n  margin-right: -2px;\n  border-right: 2px solid transparent;\n  color: var(--hc-ink2);\n  text-align: left;\n  text-decoration: none;\n  transition: color .15s ease, border-color .15s ease;\n}\n#hc-guide .hc-rail-list a:hover,\n#hc-guide .hc-rail-list a:focus {\n  color: var(--hc-accent);\n  border-right-color: var(--hc-line2);\n}\n#hc-guide .hc-rail-list a.is-current {\n  color: var(--hc-title);\n  font-weight: 600;\n  border-right-color: var(--hc-accent);\n}\n#hc-guide .hc-rail-num {\n  display: inline-block;\n  width: 1.1em;\n  margin-right: .25em;\n  color: var(--hc-ink3);\n  font-variant-numeric: tabular-nums;\n}\n\n\/* Hand-off card between the last section and the pager. One clear sentence\n   about the next part beats a row of bare page numbers. *\/\n#hc-guide .hc-cta {\n  position: relative;\n  display: block;\n  margin: 2.4rem 0 0;\n  padding: 16px 62px 16px 18px;\n  background: #fff;\n  border: 1px solid var(--hc-line2);\n  border-left: 3px solid var(--hc-brand);\n  border-radius: 8px;\n  text-decoration: none;\n  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;\n}\n#hc-guide .hc-cta:hover,\n#hc-guide .hc-cta:focus {\n  background: var(--hc-brand-soft);\n  border-color: var(--hc-brand);\n  box-shadow: 0 4px 14px rgba(231, 76, 60, .12);\n}\n#hc-guide .hc-cta-kicker {\n  display: block;\n  font-size: .68rem;\n  font-weight: 700;\n  letter-spacing: .09em;\n  line-height: 1.4;\n  text-transform: uppercase;\n  color: var(--hc-brand);\n}\n#hc-guide .hc-cta-title {\n  display: block;\n  margin: .25rem 0 .3rem;\n  font-size: 1.08rem;\n  font-weight: 700;\n  line-height: 1.3;\n  color: var(--hc-title);\n}\n#hc-guide .hc-cta-note {\n  display: block;\n  font-size: .88rem;\n  line-height: 1.5;\n  color: var(--hc-ink2);\n}\n#hc-guide .hc-cta-arrow {\n  position: absolute;\n  top: 50%;\n  right: 16px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  margin-top: -18px;\n  font-size: 1.5rem;\n  line-height: 1;\n  color: var(--hc-brand);\n  background: var(--hc-brand-soft);\n  border-radius: 50%;\n  transition: transform .15s ease, color .15s ease, background .15s ease;\n}\n#hc-guide .hc-cta:hover .hc-cta-arrow,\n#hc-guide .hc-cta:focus .hc-cta-arrow {\n  color: #fff;\n  background: var(--hc-brand);\n  transform: translateX(3px);\n}\n\n#hc-guide .hc-pager {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  margin: 1.6rem 0 .4rem;\n  padding-top: 1.4rem;\n  border-top: 1px solid var(--hc-line);\n}\n#hc-guide .hc-pager a,\n#hc-guide .hc-pager span {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 34px;\n  height: 34px;\n  padding: 0 9px;\n  font-size: .85rem;\n  font-weight: 600;\n  line-height: 1;\n  color: var(--hc-accent);\n  background: #fff;\n  border: 1px solid var(--hc-line2);\n  border-radius: 6px;\n  text-decoration: none;\n  transition: background .15s ease, color .15s ease, border-color .15s ease;\n}\n#hc-guide .hc-pager a:hover,\n#hc-guide .hc-pager a:focus {\n  color: #fff;\n  background: var(--hc-accent);\n  border-color: var(--hc-accent);\n}\n#hc-guide .hc-pager .is-current {\n  color: #fff;\n  background: #2a4861;\n  border-color: #2a4861;\n  cursor: default;\n}\n#hc-guide .hc-pager .is-disabled {\n  color: var(--hc-ink3);\n  border-color: var(--hc-line);\n  background: #fff;\n  opacity: .45;\n  cursor: default;\n}\n#hc-guide .hc-pager-link {\n  font-size: 1rem;\n  padding: 0 10px;\n}\n\n@media (max-width: 879px) {\n  #hc-guide .hc-layout {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 20px;\n  }\n  \/* The rail follows the body in the markup, so pull it back above the text\n     once the layout collapses to a single column. *\/\n  #hc-guide .hc-rail {\n    position: static;\n    order: -1;\n  }\n  #hc-guide .hc-rail-title {\n    margin-bottom: .5rem;\n  }\n  #hc-guide .hc-rail-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    border-right: 0;\n  }\n  #hc-guide .hc-rail-list a {\n    margin-right: 0;\n    padding: 4px 9px;\n    border: 1px solid var(--hc-line2);\n    border-radius: 6px;\n  }\n  #hc-guide .hc-rail-list a:hover,\n  #hc-guide .hc-rail-list a:focus {\n    border-color: var(--hc-accent);\n  }\n  #hc-guide .hc-rail-list a.is-current {\n    color: #fff;\n    background: #2a4861;\n    border-color: #2a4861;\n  }\n  #hc-guide .hc-rail-num {\n    color: inherit;\n  }\n}\n\n\/* --------------------------------------------------------------------------\n   Guide pages run wider than a normal post.\n   These seven parts are posts (so part 1 can keep the exact URL the app opens),\n   and the theme caps single-post content at 800px. :has(#hc-guide) keeps the\n   widening and the sidebar removal strictly scoped to pages carrying the guide,\n   so the rest of the blog is untouched.\n   -------------------------------------------------------------------------- *\/\n@media (min-width: 880px) {\n  body.single:has(#hc-guide) .site-content,\n  body.page:has(#hc-guide) .site-content {\n    display: block;\n  }\n  body.single:has(#hc-guide) .site-content .site-main,\n  body.page:has(#hc-guide) .site-content .site-main {\n    max-width: 1160px;\n    flex-basis: auto;\n  }\n  body.single:has(#hc-guide) .site-content .sidebar,\n  body.page:has(#hc-guide) .site-content .sidebar {\n    display: none;\n  }\n}\n<\/style>\n\n<div id=\"hc-guide\">\n  <div class=\"hc-layout\">\n    <div class=\"hc-body\">\n      <p class=\"hc-part\">Part 2 of 7 &middot; Install &amp; add photos<\/p>\n      <nav class=\"hc-toc\" aria-label=\"On this page\">\n        <p class=\"hc-toc-title\">On this page<\/p>\n        <ul class=\"hc-toc-list\">\n          <li><a href=\"#hc-getting-started\">Install &amp; first launch<\/a><\/li>\n          <li><a href=\"#hc-add\">Adding photos<\/a><\/li>\n          <li><a href=\"#hc-list\">Reviewing the list<\/a><\/li>\n        <\/ul>\n      <\/nav>\n\n<h2 id=\"hc-getting-started\">Install &amp; first launch<\/h2>\n\n  <p>HEIC +Converter is distributed through the Microsoft Store: <a href=\"https:\/\/apps.microsoft.com\/detail\/9MV2PLMHDGSS\" target=\"_blank\" rel=\"noopener\">apps.microsoft.com\/detail\/9MV2PLMHDGSS<\/a>. After installing, launch it from the Start menu &mdash; there is no separate runtime, codec or license step to sit through.<\/p>\n\n  <p>The very first time the app starts it opens this guide once in your default browser. That flag is stored in the app&#8217;s own settings, so it will not happen again. The same page is always one click away from the <em>Need help? Read the guide<\/em> link under the drop box.<\/p>\n\n  <h3>System requirements<\/h3>\n  <ul>\n    <li>Windows 10 or Windows 11, 64-bit. There is no 32-bit build.<\/li>\n    <li>No additional codecs, runtimes or components &mdash; the HEIC decoder ships inside the app.<\/li>\n    <li>No network connection is needed to convert; photos never leave your machine.<\/li>\n  <\/ul>\n\n<h2 id=\"hc-add\">Adding photos<\/h2>\n\n  <p>There are three ways in, and all of them feed the same list, so you can mix them freely.<\/p>\n\n  <h3>Drag and drop<\/h3>\n  <p>Select files in File Explorer and drop them on the dashed rectangle in the red band. Multi-selection works; a hundred files at once is fine.<\/p>\n\n  <h3>Add Files<\/h3>\n  <p>The first toolbar button opens a file picker filtered to HEIC and HEIF. Select one file or several with <kbd>Ctrl<\/kbd>&#8209;click and confirm.<\/p>\n\n  <h3>Add Folder<\/h3>\n  <p>The second toolbar button imports every HEIC \/ HEIF photo inside the folder you pick. Subfolders are not scanned &mdash; add them one by one if your library is nested.<\/p>\n\n  <div class=\"hc-note\">\n    <span class=\"hc-note-ico\" aria-hidden=\"true\">i<\/span>\n    <p><strong>Only HEIC and HEIF are accepted.<\/strong> Adding a JPG, PNG or a folder path has no visible effect: the file is skipped silently, and the list stays as it was. That is also why dropping a folder onto the drop zone appears to do nothing.<\/p>\n  <\/div>\n\n  <div class=\"hc-note hc-tip\">\n    <span class=\"hc-note-ico\" aria-hidden=\"true\">&#10003;<\/span>\n    <p><strong>Duplicates are filtered out.<\/strong> Each path can only sit in the list once, so dropping the same photo twice, or adding its folder after adding the file, never produces two rows. Photos with the same name in different folders are treated as two different files &mdash; because they are.<\/p>\n  <\/div>\n\n  <h3>Opening a photo straight from File Explorer<\/h3>\n  <p>When HEIC +Converter is your default app for <code>.heic<\/code>, double-clicking a photo in Explorer starts the app with that file already in the list &mdash; and opens it in the viewer at the same time. The list is not empty afterwards, so you can hit <em>Convert<\/em> immediately.<\/p>\n\n<h2 id=\"hc-list\">Reviewing the list<\/h2>\n\n  <p>Nothing is converted until you press the button, so the list is the place to get things right.<\/p>\n\n  <h3>Ticking rows<\/h3>\n  <ul>\n    <li>Click a row&#8217;s checkbox to include or skip it. New files arrive ticked.<\/li>\n    <li>The <strong>File name<\/strong> checkbox in the header ticks or unticks everything at once.<\/li>\n    <li>Only ticked rows are converted. Anything unticked stays in the list untouched.<\/li>\n  <\/ul>\n\n  <h3>Selecting and opening<\/h3>\n  <ul>\n    <li>Clicking anywhere on a row highlights it &mdash; a pale red band instead of the system blue. That selection is what <em>Show EXIF<\/em> reads.<\/li>\n    <li><strong>Double-click a row<\/strong> to open that photo in the viewer, exactly like clicking its <em>view<\/em> icon.<\/li>\n    <li>Double-click the checkbox or the two icons and you get that control&#8217;s action instead: tick, view, remove.<\/li>\n  <\/ul>\n\n  <h3>Removing rows<\/h3>\n  <ul>\n    <li><em>remove<\/em> on a row asks for confirmation, then takes that row out of the list.<\/li>\n    <li><em>Remove Selected<\/em> in the toolbar does the same for every ticked row at once.<\/li>\n    <li>Removing a row never deletes the file from disk. The list is a queue, not a file manager.<\/li>\n  <\/ul>\n\n  <div class=\"hc-note hc-warn\">\n    <span class=\"hc-note-ico\" aria-hidden=\"true\">!<\/span>\n    <p><strong>The list is locked while a conversion runs.<\/strong> Checkboxes, the toolbar, the output folder and the format list are all disabled until the last row finishes, and the <em>Convert<\/em> button reads <code>Converting &hellip;42%<\/code>. You can still open the viewer while it works.<\/p>\n  <\/div>\n\n      <a class=\"hc-cta\" href=\"..\/part-3-convert\/\">\n        <span class=\"hc-cta-kicker\">Next &middot; part 3 of 7<\/span>\n        <span class=\"hc-cta-title\">Converting photos<\/span>\n        <span class=\"hc-cta-note\">Choose an output format and folder, press Convert, and watch each row go from Wait to Conversion succeed!<\/span>\n        <span class=\"hc-cta-arrow\" aria-hidden=\"true\">&rsaquo;<\/span>\n      <\/a>\n\n      <nav class=\"hc-pager\" aria-label=\"Guide pages\">\n        <a class=\"hc-pager-link\" href=\"..\/converter-what-you-want\/\" aria-label=\"Previous page\">&lsaquo;<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/converter-what-you-want\/\">1<\/a>\n        <span class=\"hc-pager-num is-current\" aria-current=\"page\">2<\/span>\n        <a class=\"hc-pager-num\" href=\"..\/part-3-convert\/\">3<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/part-4-viewer\/\">4<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/part-5-exif\/\">5<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/part-6-settings-formats\/\">6<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/part-7-troubleshooting-faq\/\">7<\/a>\n        <a class=\"hc-pager-link\" href=\"..\/part-3-convert\/\" aria-label=\"Next page\">&rsaquo;<\/a>\n      <\/nav>\n    <\/div>\n\n    <aside class=\"hc-rail\">\n      <p class=\"hc-rail-title\">User guide<\/p>\n      <ol class=\"hc-rail-list\">\n        <li><a href=\"..\/converter-what-you-want\/\"><span class=\"hc-rail-num\">1<\/span>Why &amp; overview<\/a><\/li>\n        <li><a href=\"..\/part-2-add-photos\/\" class=\"is-current\" aria-current=\"page\"><span class=\"hc-rail-num\">2<\/span>Install &amp; add photos<\/a><\/li>\n        <li><a href=\"..\/part-3-convert\/\"><span class=\"hc-rail-num\">3<\/span>Converting photos<\/a><\/li>\n        <li><a href=\"..\/part-4-viewer\/\"><span class=\"hc-rail-num\">4<\/span>Viewing photos<\/a><\/li>\n        <li><a href=\"..\/part-5-exif\/\"><span class=\"hc-rail-num\">5<\/span>EXIF info<\/a><\/li>\n        <li><a href=\"..\/part-6-settings-formats\/\"><span class=\"hc-rail-num\">6<\/span>Settings &amp; reference<\/a><\/li>\n        <li><a href=\"..\/part-7-troubleshooting-faq\/\"><span class=\"hc-rail-num\">7<\/span>Troubleshooting &amp; FAQ<\/a><\/li>\n      <\/ol>\n    <\/aside>\n  <\/div>\n\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Part 2 of 7 &middot; Install &amp; add photos On this page Install &amp; first launch Adding photos Reviewing the list Install &amp; first launch [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-913","post","type-post","status-publish","format-standard","hentry","category-heic-image-viewer"],"_links":{"self":[{"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/posts\/913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/comments?post=913"}],"version-history":[{"count":2,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/posts\/913\/revisions"}],"predecessor-version":[{"id":926,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/posts\/913\/revisions\/926"}],"wp:attachment":[{"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/media?parent=913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/categories?post=913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/tags?post=913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}