{"id":917,"date":"2026-11-09T08:17:03","date_gmt":"2026-11-09T08:17:03","guid":{"rendered":"https:\/\/coolmedialife.com\/?p=917"},"modified":"2026-11-09T08:44:11","modified_gmt":"2026-11-09T08:44:11","slug":"part-4-viewer","status":"publish","type":"post","link":"https:\/\/coolmedialife.com\/index.php\/heic-image-viewer\/part-4-viewer\/","title":{"rendered":"HEIC +Converter\u00a0\u2013 Viewing 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 4 of 7 &middot; Viewing 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-viewer-open\">Opening the viewer<\/a><\/li>\n          <li><a href=\"#hc-viewer-toolbar\">The viewer toolbar<\/a><\/li>\n          <li><a href=\"#hc-viewer-input\">Mouse &amp; keyboard<\/a><\/li>\n        <\/ul>\n      <\/nav>\n\n<h2 id=\"hc-viewer-open\">Opening the viewer<\/h2>\n\n  <p>Two identical ways in: <strong>double-click the row<\/strong>, or click its <em>view<\/em> icon. Either opens the built-in viewer on that photo, with the rest of the list as the gallery &mdash; the arrow buttons walk the list in order.<\/p>\n\n  <ul>\n    <li>The viewer works on <strong>HEIC directly<\/strong>. Nothing has to be converted first, and the viewer never writes a file.<\/li>\n    <li>The title bar reads <code>HEIC Viewer &ndash; IMG_0421.heic<\/code>; the counter next to the arrows shows <code>3 \/ 12<\/code>.<\/li>\n    <li>A photo opens fitted to the window. Resize the window and it keeps fitting, until you zoom in yourself.<\/li>\n    <li><kbd>Esc<\/kbd> closes the viewer. Your conversion list is exactly as you left it.<\/li>\n  <\/ul>\n\n<h2 id=\"hc-viewer-toolbar\">The viewer toolbar<\/h2>\n\n  <p>One strip across the top: navigation on the left, zoom in the middle-right, rotate and full screen at the far right.<\/p>\n\n  <div class=\"hc-table\">\n    <table>\n      <thead>\n        <tr><th>Control<\/th><th>What it does<\/th><\/tr>\n      <\/thead>\n      <tbody>\n        <tr><td>&lsaquo; &nbsp; &rsaquo;<\/td><td>Previous \/ next photo in the list. Disabled at the first and last photo.<\/td><\/tr>\n        <tr><td>3 \/ 12<\/td><td>Position in the list: this photo, out of the total.<\/td><\/tr>\n        <tr><td>&minus; &nbsp; % &nbsp; +<\/td><td>Zoom out \/ current zoom level \/ zoom in. The percentage updates live.<\/td><\/tr>\n        <tr><td>Fit<\/td><td>Scale the photo to the window, and keep re-fitting whenever the window is resized.<\/td><\/tr>\n        <tr><td>1:1<\/td><td>One image pixel per screen pixel, centred, with panning as soon as it overflows.<\/td><\/tr>\n        <tr><td>&#8634; &nbsp; &#8635;<\/td><td>Rotate 90&deg; left \/ right. Display only &mdash; the file on disk is untouched.<\/td><\/tr>\n        <tr><td>Full screen<\/td><td>Hide the toolbar and status bar so the photo fills the screen. Press <kbd>F11<\/kbd> or <kbd>Esc<\/kbd> to come back.<\/td><\/tr>\n      <\/tbody>\n    <\/table>\n  <\/div>\n\n  <p>A photo smaller than the window stays centred and cannot be dragged around; once it is larger than the window, dragging pans it, and the edges stop where the image ends.<\/p>\n\n<h2 id=\"hc-viewer-input\">Mouse &amp; keyboard<\/h2>\n\n  <p>The viewer is built for browsing a shoot without touching the toolbar.<\/p>\n\n  <div class=\"hc-table\">\n    <table>\n      <thead>\n        <tr><th>Do this<\/th><th>Result<\/th><\/tr>\n      <\/thead>\n      <tbody>\n        <tr><td>Mouse wheel<\/td><td>Zoom in \/ out anchored on the cursor &mdash; the detail you point at stays put.<\/td><\/tr>\n        <tr><td>Drag the photo<\/td><td>Pan. When the photo is smaller than the window it snaps back to the centre.<\/td><\/tr>\n        <tr><td>Double-click the photo<\/td><td>Toggle between <em>Fit<\/em> and <em>1:1<\/em>.<\/td><\/tr>\n      <\/tbody>\n    <\/table>\n  <\/div>\n\n  <div class=\"hc-table\">\n    <table>\n      <thead>\n        <tr><th>Shortcut<\/th><th>Action<\/th><\/tr>\n      <\/thead>\n      <tbody>\n        <tr><td><kbd>&larr;<\/kbd> \/ <kbd>&rarr;<\/kbd><\/td><td>Previous \/ next photo (also <kbd>Page Up<\/kbd> \/ <kbd>Page Down<\/kbd>).<\/td><\/tr>\n        <tr><td><kbd>+<\/kbd> \/ <kbd>&minus;<\/kbd><\/td><td>Zoom in \/ out.<\/td><\/tr>\n        <tr><td><kbd>0<\/kbd><\/td><td>Fit to window.<\/td><\/tr>\n        <tr><td><kbd>1<\/kbd><\/td><td>Actual size (100%).<\/td><\/tr>\n        <tr><td><kbd>Ctrl<\/kbd>+<kbd>L<\/kbd> \/ <kbd>Ctrl<\/kbd>+<kbd>R<\/kbd><\/td><td>Rotate left \/ right by 90&deg;.<\/td><\/tr>\n        <tr><td><kbd>Ctrl<\/kbd>+<kbd>C<\/kbd><\/td><td>Copy the photo to the clipboard, including the rotation you applied.<\/td><\/tr>\n        <tr><td><kbd>F11<\/kbd><\/td><td>Full screen on \/ off.<\/td><\/tr>\n        <tr><td><kbd>Esc<\/kbd><\/td><td>Exit full screen, or close the viewer when not in full screen.<\/td><\/tr>\n      <\/tbody>\n    <\/table>\n  <\/div>\n\n  <p>The status bar at the bottom always shows the pixel dimensions, the file size and the current zoom, plus the rotation angle once you have turned the photo. In full screen the bar disappears with the toolbar; a small hint reminds you that <em>Esc<\/em> or <em>F11<\/em> brings the window back.<\/p>\n\n  <div class=\"hc-note hc-tip\">\n    <span class=\"hc-note-ico\" aria-hidden=\"true\">&#10003;<\/span>\n    <p><strong>Copy instead of convert.<\/strong> <kbd>Ctrl<\/kbd>+<kbd>C<\/kbd> puts the current photo on the clipboard as a normal bitmap, rotated exactly as displayed &mdash; the quickest way to paste one shot into a chat or a document without producing a file.<\/p>\n  <\/div>\n\n      <a class=\"hc-cta\" href=\"..\/part-5-exif\/\">\n        <span class=\"hc-cta-kicker\">Next &middot; part 5 of 7<\/span>\n        <span class=\"hc-cta-title\">EXIF info<\/span>\n        <span class=\"hc-cta-note\">Keep or strip the metadata, and read every tag the camera recorded.<\/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=\"..\/part-3-convert\/\" aria-label=\"Previous page\">&lsaquo;<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/converter-what-you-want\/\">1<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/part-2-add-photos\/\">2<\/a>\n        <a class=\"hc-pager-num\" href=\"..\/part-3-convert\/\">3<\/a>\n        <span class=\"hc-pager-num is-current\" aria-current=\"page\">4<\/span>\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-5-exif\/\" 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\/\"><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\/\" class=\"is-current\" aria-current=\"page\"><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 4 of 7 &middot; Viewing photos On this page Opening the viewer The viewer toolbar Mouse &amp; keyboard Opening the viewer Two identical ways [&#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-917","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\/917","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=917"}],"version-history":[{"count":2,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/posts\/917\/revisions"}],"predecessor-version":[{"id":928,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/posts\/917\/revisions\/928"}],"wp:attachment":[{"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/media?parent=917"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/categories?post=917"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coolmedialife.com\/index.php\/wp-json\/wp\/v2\/tags?post=917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}