{"id":2233,"date":"2026-03-26T20:50:20","date_gmt":"2026-03-26T20:50:20","guid":{"rendered":"https:\/\/dornsife.usc.edu\/website\/?page_id=2233"},"modified":"2026-05-11T17:03:17","modified_gmt":"2026-05-11T17:03:17","slug":"image-tool","status":"publish","type":"page","link":"https:\/\/dornsife.usc.edu\/website\/image-tool\/","title":{"rendered":"Image Resizing Tool"},"content":{"rendered":"\n\n \n \n\n\n\n\n\n\n\n
\n\n \n \n \n
\n\n \n

Need to resize an image for your USC Dornsife website? Our image resizing tool makes it easy. Follow the prompts below to resize images to the specifications of the design components you plan to use on your website.<\/p>\n\n\n\n<\/div>\n \n\n <\/div><\/div>\n\n\n \n \n\n\n\n\n\n\n\n

\n\n \n \n
\n\n \n

\n USC Dornsife WordPress Image Resizer\n <\/h2>\n\n\n<\/div>\n \n\n
\n \r\n\r\n\r\n\r\n\r\nDornsife Image Prep Tool<\/title>\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500;600&display=swap');\r\n\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --gold: #a2813a;\r\n --gold-light: #c9a85c;\r\n --cardinal: #990000;\r\n --cardinal-dark: #6b0000;\r\n --off-white: #f7f4ef;\r\n --warm-gray: #e8e3da;\r\n --mid-gray: #1c1916;\r\n --dark: #1c1916;\r\n --panel: #ffffff;\r\n --border: #ddd8cf;\r\n --radius: 8px;\r\n --shadow: 0 2px 16px rgba(28,25,22,0.08);\r\n }\r\n\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--off-white);\r\n color: var(--dark);\r\n min-height: 100vh;\r\n }\r\n\r\n\r\n\r\n .app {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 32px 24px 64px;\r\n display: grid;\r\n grid-template-columns: 360px 1fr;\r\n gap: 24px;\r\n align-items: start;\r\n }\r\n\r\n .panel {\r\n background: var(--panel);\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius);\r\n box-shadow: var(--shadow);\r\n overflow: hidden;\r\n }\r\n .panel-header {\r\n background: var(--dark);\r\n color: white;\r\n padding: 14px 20px;\r\n font-size: 0.7rem;\r\n font-weight: 600;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n }\r\n .panel-body { padding: 20px; }\r\n\r\n .step-label {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 12px;\r\n margin-top: 20px;\r\n }\r\n .step-label:first-child { margin-top: 0; }\r\n .step-num {\r\n width: 24px; height: 24px;\r\n background: var(--cardinal);\r\n color: white;\r\n border-radius: 50%;\r\n font-size: 0.72rem;\r\n font-weight: 600;\r\n display: flex; align-items: center; justify-content: center;\r\n flex-shrink: 0;\r\n }\r\n .step-label span {\r\n font-size: 0.78rem;\r\n font-weight: 600;\r\n letter-spacing: 0.05em;\r\n text-transform: uppercase;\r\n color: var(--dark);\r\n }\r\n\r\n select, input[type=\"text\"] {\r\n width: 100%;\r\n padding: 10px 12px;\r\n border: 1.5px solid var(--border);\r\n border-radius: 6px;\r\n font-family: 'DM Sans', sans-serif;\r\n font-size: 0.88rem;\r\n color: var(--dark);\r\n background: white;\r\n transition: border-color 0.15s;\r\n appearance: none;\r\n }\r\n select:focus, input:focus {\r\n outline: none;\r\n border-color: var(--gold);\r\n box-shadow: 0 0 0 3px rgba(162,129,58,0.12);\r\n }\r\n .select-wrap { position: relative; }\r\n .select-wrap::after {\r\n content: '\u25be';\r\n position: absolute; right: 12px; top: 50%; transform: translateY(-50%);\r\n color: var(--mid-gray); pointer-events: none; font-size: 0.85rem;\r\n }\r\n\r\n .component-info {\r\n background: var(--off-white);\r\n border: 1px solid var(--border);\r\n border-radius: 6px;\r\n padding: 12px 14px;\r\n margin-top: 12px;\r\n font-size: 0.82rem;\r\n line-height: 1.6;\r\n display: none;\r\n }\r\n .component-info.visible { display: block; }\r\n .component-info strong { color: var(--cardinal); }\r\n .info-row { display: flex; justify-content: space-between; gap: 8px; }\r\n .info-label { color: var(--mid-gray); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }\r\n\r\n .filename-preview {\r\n background: var(--dark);\r\n border-radius: 6px;\r\n padding: 12px 14px;\r\n margin-top: 12px;\r\n font-family: 'Courier New', monospace;\r\n font-size: 0.82rem;\r\n color: var(--gold-light);\r\n word-break: break-all;\r\n min-height: 40px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n .filename-placeholder { color: rgba(255,255,255,0.55); font-style: italic; font-family: 'DM Sans', sans-serif; font-size: 0.8rem; }\r\n\r\n .drop-zone {\r\n border: 2px dashed var(--border);\r\n border-radius: var(--radius);\r\n padding: 40px 20px;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n background: white;\r\n }\r\n .drop-zone:hover, .drop-zone.dragover {\r\n border-color: var(--gold);\r\n background: rgba(162,129,58,0.04);\r\n }\r\n .drop-icon { font-size: 2.5rem; margin-bottom: 12px; }\r\n .drop-zone p { font-size: 0.88rem; color: var(--mid-gray); }\r\n .drop-zone:focus {\r\n outline: 2px solid var(--gold);\r\n outline-offset: -2px;\r\n border-color: var(--gold);\r\n }\r\n .browse-btn {\r\n background: none;\r\n border: none;\r\n padding: 0;\r\n font-family: inherit;\r\n font-size: inherit;\r\n font-weight: bold;\r\n color: var(--cardinal);\r\n cursor: pointer;\r\n display: inline;\r\n }\r\n #file-input { display: none; }\r\n\r\n .canvas-area {\r\n position: relative;\r\n background: #111;\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n min-height: 300px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .canvas-area-placeholder {\r\n color: rgba(255,255,255,0.7);\r\n font-size: 0.88rem;\r\n text-align: center;\r\n padding: 40px;\r\n }\r\n #crop-canvas {\r\n display: block;\r\n cursor: crosshair;\r\n max-width: 100%;\r\n }\r\n .crop-overlay {\r\n position: absolute;\r\n border: 2px solid var(--gold-light);\r\n box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);\r\n pointer-events: none;\r\n }\r\n\r\n #output-preview-wrap {\r\n margin-top: 16px;\r\n display: none;\r\n }\r\n #output-preview-wrap.visible { display: block; }\r\n #output-canvas { display: none; }\r\n #output-preview {\r\n width: 100%;\r\n border-radius: 6px;\r\n border: 1px solid var(--border);\r\n display: block;\r\n }\r\n .output-meta {\r\n display: flex; gap: 12px; margin-top: 8px;\r\n font-size: 0.78rem; color: var(--mid-gray);\r\n }\r\n\r\n .btn {\r\n display: inline-flex; align-items: center; gap: 8px;\r\n padding: 11px 20px;\r\n border: none; border-radius: 6px;\r\n font-family: 'DM Sans', sans-serif;\r\n font-size: 0.88rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.15s;\r\n }\r\n .btn-primary {\r\n background: var(--cardinal);\r\n color: white;\r\n width: 100%;\r\n justify-content: center;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n letter-spacing: 0.03em;\r\n padding: 13px 20px;\r\n margin-top: 16px;\r\n }\r\n .btn-primary:hover { background: var(--cardinal-dark); }\r\n .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }\r\n .btn-secondary {\r\n background: var(--off-white);\r\n color: var(--dark);\r\n border: 1.5px solid var(--border);\r\n font-size: 0.82rem;\r\n }\r\n .btn-secondary:hover { background: var(--warm-gray); }\r\n .btn-gold {\r\n background: #7a5e1e;\r\n color: white;\r\n width: 100%;\r\n justify-content: center;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n padding: 13px 20px;\r\n margin-top: 12px;\r\n }\r\n .btn-gold:hover { background: #5c4615; }\r\n .btn-gold:disabled { opacity: 0.4; cursor: not-allowed; }\r\n\r\n .crop-controls {\r\n display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap;\r\n }\r\n\r\n \/* Zoom controls *\/\r\n .zoom-controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 12px;\r\n padding: 10px 14px;\r\n background: rgba(162,129,58,0.06);\r\n border: 1px solid rgba(162,129,58,0.2);\r\n border-radius: 6px;\r\n }\r\n .zoom-label-text {\r\n font-size: 0.72rem;\r\n font-weight: 600;\r\n letter-spacing: 0.07em;\r\n text-transform: uppercase;\r\n color: var(--mid-gray);\r\n flex-shrink: 0;\r\n }\r\n .zoom-btn {\r\n width: 30px;\r\n height: 30px;\r\n padding: 0;\r\n flex-shrink: 0;\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n line-height: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 4px;\r\n }\r\n #zoom-slider {\r\n flex: 1;\r\n height: 4px;\r\n appearance: none;\r\n background: var(--border);\r\n border-radius: 2px;\r\n border: none;\r\n padding: 0;\r\n cursor: pointer;\r\n accent-color: var(--gold);\r\n }\r\n #zoom-slider::-webkit-slider-thumb {\r\n appearance: none;\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 50%;\r\n background: var(--gold);\r\n cursor: pointer;\r\n box-shadow: 0 1px 4px rgba(0,0,0,0.2);\r\n }\r\n #zoom-slider::-moz-range-thumb {\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 50%;\r\n background: var(--gold);\r\n cursor: pointer;\r\n border: none;\r\n box-shadow: 0 1px 4px rgba(0,0,0,0.2);\r\n }\r\n #zoom-slider:focus {\r\n outline: 2px solid var(--gold);\r\n outline-offset: 2px;\r\n }\r\n\r\n \/* Quality slider \u2014 mirrors zoom slider *\/\r\n .quality-controls {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 14px;\r\n padding: 10px 14px;\r\n background: rgba(162,129,58,0.06);\r\n border: 1px solid rgba(162,129,58,0.2);\r\n border-radius: 6px;\r\n }\r\n #quality-slider {\r\n flex: 1;\r\n height: 4px;\r\n appearance: none;\r\n background: var(--border);\r\n border-radius: 2px;\r\n border: none;\r\n padding: 0;\r\n cursor: pointer;\r\n accent-color: var(--gold);\r\n }\r\n #quality-slider::-webkit-slider-thumb {\r\n appearance: none;\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 50%;\r\n background: var(--gold);\r\n cursor: pointer;\r\n box-shadow: 0 1px 4px rgba(0,0,0,0.2);\r\n }\r\n #quality-slider::-moz-range-thumb {\r\n width: 16px;\r\n height: 16px;\r\n border-radius: 50%;\r\n background: var(--gold);\r\n cursor: pointer;\r\n border: none;\r\n box-shadow: 0 1px 4px rgba(0,0,0,0.2);\r\n }\r\n #quality-slider:focus {\r\n outline: 2px solid var(--gold);\r\n outline-offset: 2px;\r\n }\r\n\r\n .zoom-pct {\r\n font-size: 0.82rem;\r\n font-weight: 600;\r\n color: var(--dark);\r\n min-width: 40px;\r\n text-align: right;\r\n flex-shrink: 0;\r\n }\r\n\r\n .hint {\r\n font-size: 0.76rem;\r\n color: var(--mid-gray);\r\n margin-top: 6px;\r\n line-height: 1.5;\r\n }\r\n\r\n .right-col { display: flex; flex-direction: column; gap: 20px; }\r\n .right-col .panel-body { padding: 20px; }\r\n\r\n .crop-instructions {\r\n background: rgba(162,129,58,0.08);\r\n border: 1px solid rgba(162,129,58,0.2);\r\n border-radius: 6px;\r\n padding: 10px 14px;\r\n font-size: 0.78rem;\r\n color: #6b5a2e;\r\n line-height: 1.6;\r\n margin-bottom: 12px;\r\n }\r\n\r\n @media (max-width: 800px) {\r\n .app { grid-template-columns: 1fr; }\r\n }\r\n\r\n \/* Filter toggle buttons *\/\r\n .filter-group {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n flex-wrap: wrap;\r\n margin-bottom: 12px;\r\n }\r\n .filter-label-text {\r\n font-size: 0.75rem;\r\n font-weight: 600;\r\n letter-spacing: 0.05em;\r\n text-transform: uppercase;\r\n color: var(--mid-gray);\r\n flex-shrink: 0;\r\n margin-right: 2px;\r\n }\r\n .filter-btn {\r\n padding: 5px 12px;\r\n border-radius: 4px;\r\n font-family: 'DM Sans', sans-serif;\r\n font-size: 0.8rem;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.15s;\r\n background: var(--off-white);\r\n color: var(--dark);\r\n border: 1.5px solid var(--border);\r\n }\r\n .filter-btn:hover { background: var(--warm-gray); }\r\n .filter-btn[aria-pressed=\"true\"] {\r\n background: var(--cardinal);\r\n color: white;\r\n border-color: var(--cardinal);\r\n }\r\n .filter-btn:focus {\r\n outline: 2px solid var(--gold);\r\n outline-offset: 2px;\r\n }\r\n \/* Multi-slot component info (flyers, PowerPoint) *\/\r\n .slot-list { display: flex; flex-direction: column; gap: 2px; }\r\n .slot-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 4px 0;\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .slot-row:last-child { border-bottom: none; }\r\n .slot-name {\r\n font-size: 0.75rem;\r\n color: var(--mid-gray);\r\n text-transform: uppercase;\r\n letter-spacing: 0.04em;\r\n }\r\n .slot-dims {\r\n font-size: 0.82rem;\r\n font-weight: 600;\r\n color: var(--cardinal);\r\n }\r\n .component-preview-img {\r\n width: 100%;\r\n border-radius: 4px;\r\n border: 1px solid var(--border);\r\n margin-top: 10px;\r\n display: block;\r\n }\r\n .mydornsife-link {\r\n display: inline-block;\r\n margin-top: 10px;\r\n font-size: 0.82rem;\r\n color: var(--cardinal);\r\n font-weight: 600;\r\n text-decoration: none;\r\n }\r\n .mydornsife-link:hover { text-decoration: underline; }\r\n .mydornsife-path {\r\n font-size: 0.72rem;\r\n color: var(--mid-gray);\r\n margin-top: 3px;\r\n line-height: 1.5;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div class=\"app\">\r\n\r\n <div class=\"left-col\">\r\n <div class=\"panel\">\r\n <h2 class=\"panel-header\"><span aria-hidden=\"true\">\u2699<\/span> Settings<\/h2>\r\n <div class=\"panel-body\">\r\n\r\n <div class=\"step-label\">\r\n <div class=\"step-num\">1<\/div>\r\n <span id=\"component-select-label\">Choose Component<\/span>\r\n <\/div>\r\n <div role=\"group\" aria-label=\"Filter components by type\" class=\"filter-group\">\r\n <span class=\"filter-label-text\" aria-hidden=\"true\">Show:<\/span>\r\n <button type=\"button\" class=\"filter-btn\" data-filter=\"all\" aria-pressed=\"true\">All<\/button>\r\n <button type=\"button\" class=\"filter-btn\" data-filter=\"website\" aria-pressed=\"false\">Website<\/button>\r\n <button type=\"button\" class=\"filter-btn\" data-filter=\"powerpoint\" aria-pressed=\"false\">PowerPoint<\/button>\r\n <button type=\"button\" class=\"filter-btn\" data-filter=\"flyer\" aria-pressed=\"false\">Flyer<\/button>\r\n <\/div>\r\n <div class=\"select-wrap\">\r\n <select id=\"component-select\" aria-labelledby=\"component-select-label\">\r\n <option value=\"\">\u2014 Select a component \u2014<\/option>\r\n <optgroup label=\"Hero Components\">\r\n <option value=\"article-hero\" data-category=\"website\">Article: Hero<\/option>\r\n <option value=\"dci-overlay-hero\" data-category=\"website\">DCI Overlay Hero<\/option>\r\n <option value=\"hero-with-featured-story\" data-category=\"website\">Hero with Featured Story<\/option>\r\n <option value=\"program-overlay-hero\" data-category=\"website\">Program Overlay Hero<\/option>\r\n <option value=\"minisite-homepage-hero-image\" data-category=\"website\">Minisite Homepage Hero: Image<\/option>\r\n <option value=\"minisite-program-hero\" data-category=\"website\">Minisite Program Hero<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Homepage Heroes\">\r\n <option value=\"homepage-hero-card-flip\" data-category=\"website\">Homepage Hero: Card Flip<\/option>\r\n <option value=\"homepage-hero-cta-with-image\" data-category=\"website\">Homepage Hero: CTA with Image<\/option>\r\n <option value=\"homepage-hero-fw-video\" data-category=\"website\">Homepage Hero: FW Video (Poster)<\/option>\r\n <option value=\"homepage-hero-sequence-intro\" data-category=\"website\">Homepage Hero: Sequence Intro (Poster)<\/option>\r\n <option value=\"homepage-hero-story-carousel\" data-category=\"website\">Homepage Hero: Story Carousel<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Body Components\">\r\n <option value=\"article-image-gallery\" data-category=\"website\">Article: Image Gallery<\/option>\r\n <option value=\"articles-carousel\" data-category=\"website\">Articles Carousel<\/option>\r\n <option value=\"editorial-cards-horizontal\" data-category=\"website\">Editorial Cards \u2013 Landscape<\/option>\r\n <option value=\"editorial-cards-vertical\" data-category=\"website\">Editorial Cards \u2013 Portrait<\/option>\r\n <option value=\"exceptional-featured-story\" data-category=\"website\">Exceptional Featured Story<\/option>\r\n <option value=\"featured-block\" data-category=\"website\">Featured Block<\/option>\r\n <option value=\"full-width-image-with-text\" data-category=\"website\">Full-Width Image with Text<\/option>\r\n <option value=\"interactive-content-pane\" data-category=\"website\">Interactive Content Pane<\/option>\r\n <option value=\"interactive-quotes-pane\" data-category=\"website\">Interactive Quotes Pane<\/option>\r\n <option value=\"news-events-promo-instagram\" data-category=\"website\">News & Events Promo: Instagram<\/option>\r\n <option value=\"news-events-promo-event\" data-category=\"website\">News & Events Promo: Event<\/option>\r\n <option value=\"people-profile\" data-category=\"website\">People Profile<\/option>\r\n <option value=\"photo-wall\" data-category=\"website\">Photo Wall<\/option>\r\n <option value=\"rich-text-embedded\" data-category=\"website\">Rich Text: Left\/Right Embedded<\/option>\r\n <option value=\"scrolling-image-with-text\" data-category=\"website\">Scrolling Image with Text<\/option>\r\n <option value=\"sign-up-block\" data-category=\"website\">Sign Up Block<\/option>\r\n <option value=\"spotlight-quote\" data-category=\"website\">Spotlight Quote<\/option>\r\n <option value=\"stacking-elements-landscape\" data-category=\"website\">Stacking Elements: Landscape<\/option>\r\n <option value=\"stacking-elements-portrait\" data-category=\"website\">Stacking Elements: Portrait<\/option>\r\n <option value=\"minisite-news-events-promo\" data-category=\"website\">Minisite News & Events Promo: Events<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Social Media\">\r\n <option value=\"social-media-promo-facebook\" data-category=\"website\">Social Media Promo: Facebook<\/option>\r\n <option value=\"social-media-promo-instagram\" data-category=\"website\">Social Media Promo: Instagram<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Video\">\r\n <option value=\"video-listing-poster\" data-category=\"website\">Video Listing: Poster Image<\/option>\r\n <option value=\"video-pane-portrait-poster\" data-category=\"website\">Video Pane: Portrait Poster<\/option>\r\n <option value=\"video-pane-landscape-poster\" data-category=\"website\">Video Pane: Landscape Poster<\/option>\r\n <option value=\"video-with-text-poster\" data-category=\"website\">Video with Text: Poster Image<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Other\">\r\n <option value=\"contact-us-map\" data-category=\"website\">Contact Us: Map<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"USC Central\">\r\n <option value=\"usc-central-news\" data-category=\"website\">USC Central News<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"Flyer Templates\">\r\n <option value=\"flyer-top-image-speakers\" data-category=\"flyer\">Flyer: Top Image with Speakers<\/option>\r\n <option value=\"flyer-full-side-image\" data-category=\"flyer\">Flyer: Full Side Image<\/option>\r\n <option value=\"flyer-small-side-image\" data-category=\"flyer\">Flyer: Small Side Image with Detail Panel<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"PowerPoint Standard\">\r\n <option value=\"ppt-std-title-photo\" data-category=\"powerpoint\">Presentation Slide with Photo<\/option>\r\n <option value=\"ppt-std-section-header\" data-category=\"powerpoint\">Section Header Full Screen<\/option>\r\n <option value=\"ppt-std-bullet-photo\" data-category=\"powerpoint\">Bullet Slide with Photo on the Right<\/option>\r\n <option value=\"ppt-std-gold-two-images\" data-category=\"powerpoint\">Left Gold Box with Two Images<\/option>\r\n <option value=\"ppt-std-our-people\" data-category=\"powerpoint\">Our People<\/option>\r\n <option value=\"ppt-std-three-col\" data-category=\"powerpoint\">Three Columns with Photos<\/option>\r\n <option value=\"ppt-std-four-col\" data-category=\"powerpoint\">Four Columns with Photos<\/option>\r\n <\/optgroup>\r\n <optgroup label=\"PowerPoint Widescreen\">\r\n <option value=\"ppt-ws-title-photo\" data-category=\"powerpoint\">Presentation Slide with Photo<\/option>\r\n <option value=\"ppt-ws-section-header\" data-category=\"powerpoint\">Section Header Full Screen<\/option>\r\n <option value=\"ppt-ws-bullet-photo\" data-category=\"powerpoint\">Bullet Slide with Photo on the Right<\/option>\r\n <option value=\"ppt-ws-gold-two-images\" data-category=\"powerpoint\">Left Gold Box with Two Images<\/option>\r\n <option value=\"ppt-ws-our-people\" data-category=\"powerpoint\">Our People<\/option>\r\n <option value=\"ppt-ws-three-col\" data-category=\"powerpoint\">Three Columns with Photos<\/option>\r\n <option value=\"ppt-ws-four-col\" data-category=\"powerpoint\">Four Columns with Photos<\/option>\r\n <\/optgroup>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"component-info\" id=\"component-info\" aria-live=\"polite\">\r\n <div class=\"info-row\">\r\n <div>\r\n <div class=\"info-label\">Upload Size<\/div>\r\n <strong id=\"info-upload\"><\/strong>\r\n <\/div>\r\n <div>\r\n <div class=\"info-label\">Ratio<\/div>\r\n <strong id=\"info-ratio\"><\/strong>\r\n <\/div>\r\n <div>\r\n <div class=\"info-label\">Display Size<\/div>\r\n <span id=\"info-display\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <div style=\"margin-top:8px; font-size:0.76rem; color: var(--dark)\" id=\"info-note\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"step-label\">\r\n <div class=\"step-num\">2<\/div>\r\n <span id=\"slug-input-label\">Name Your File<\/span>\r\n <\/div>\r\n <input type=\"text\" id=\"slug-input\" aria-labelledby=\"slug-input-label\" placeholder=\"e.g. chemistry or earth-sciences-news\" \/>\r\n <div class=\"hint\">Use lowercase with hyphens. The component name will be appended automatically.<\/div>\r\n <div class=\"filename-preview\" id=\"filename-preview\">\r\n <span class=\"filename-placeholder\">Filename will appear here\u2026<\/span>\r\n <\/div>\r\n\r\n <div class=\"step-label\">\r\n <div class=\"step-num\">3<\/div>\r\n <span>Upload Your Image<\/span>\r\n <\/div>\r\n <div class=\"drop-zone\" id=\"drop-zone\">\r\n <div class=\"drop-icon\" aria-hidden=\"true\">\ud83d\uddbc<\/div>\r\n <p>Drag & drop an image here<br>or <button type=\"button\" class=\"browse-btn\" onclick=\"document.getElementById('file-input').click()\">browse to upload<\/button><\/p>\r\n <input type=\"file\" id=\"file-input\" accept=\"image\/*\">\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"right-col\">\r\n <div class=\"panel\">\r\n <h2 class=\"panel-header\"><span aria-hidden=\"true\">\u2702<\/span> Crop & Preview<\/h2>\r\n <div class=\"panel-body\">\r\n <div class=\"crop-instructions\" id=\"crop-instructions\" style=\"display:none\">\r\n Drag to reposition the crop box. The gold box shows exactly what will be exported. Use the zoom slider to zoom in and crop a tighter region.\r\n <\/div>\r\n <div class=\"canvas-area\" id=\"canvas-area\">\r\n <div class=\"canvas-area-placeholder\" id=\"canvas-placeholder\">\r\n <div style=\"font-size:2rem;margin-bottom:12px;\" aria-hidden=\"true\">\ud83d\udcd0<\/div>\r\n Select a component and upload an image to begin\r\n <\/div>\r\n <canvas id=\"crop-canvas\" style=\"display:none\"><\/canvas>\r\n <div class=\"crop-overlay\" id=\"crop-overlay\" style=\"display:none\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"zoom-controls\" id=\"zoom-controls\" style=\"display:none\">\r\n <span class=\"zoom-label-text\">Zoom<\/span>\r\n <button class=\"btn btn-secondary zoom-btn\" onclick=\"adjustZoom(-5)\" title=\"Zoom out\">\u2212<\/button>\r\n <input type=\"range\" id=\"zoom-slider\" min=\"100\" max=\"300\" value=\"100\" step=\"5\" aria-label=\"Zoom\">\r\n <button class=\"btn btn-secondary zoom-btn\" onclick=\"adjustZoom(5)\" title=\"Zoom in\">+<\/button>\r\n <span class=\"zoom-pct\" id=\"zoom-pct\">100%<\/span>\r\n <\/div>\r\n\r\n <div class=\"crop-controls\" id=\"crop-controls\" style=\"display:none\">\r\n <button class=\"btn btn-secondary\" onclick=\"moveCrop(-10, 0)\">\u2190 Shift Left<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"moveCrop(10, 0)\">\u2192 Shift Right<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"moveCrop(0, -10)\">\u2191 Shift Up<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"moveCrop(0, 10)\">\u2193 Shift Down<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"centerCrop()\">\u229e Center<\/button>\r\n <\/div>\r\n\r\n <button class=\"btn btn-primary\" id=\"apply-btn\" disabled onclick=\"applyAndPreview()\">\r\n <span aria-hidden=\"true\">\u2726<\/span> Apply Crop & Preview\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"panel\" id=\"output-panel\" style=\"display:none\">\r\n <h2 class=\"panel-header\"><span aria-hidden=\"true\">\u2b07<\/span> Output<\/h2>\r\n <div class=\"panel-body\">\r\n <div id=\"output-preview-wrap\" class=\"visible\">\r\n <img id=\"output-preview\" alt=\"Output preview\" \/>\r\n <div class=\"output-meta\">\r\n <span id=\"out-size\" aria-live=\"polite\"><\/span>\r\n <span id=\"out-filename\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <canvas id=\"output-canvas\"><\/canvas>\r\n <div class=\"quality-controls\">\r\n <label class=\"zoom-label-text\" id=\"quality-label\" for=\"quality-slider\">Quality<\/label>\r\n <input type=\"range\" id=\"quality-slider\" min=\"50\" max=\"100\" value=\"92\" step=\"1\" aria-labelledby=\"quality-label\">\r\n <span class=\"zoom-pct\" id=\"quality-pct\" aria-live=\"polite\">92%<\/span>\r\n <\/div>\r\n <button class=\"btn btn-gold\" id=\"download-btn\" onclick=\"downloadImage()\">\r\n <span aria-hidden=\"true\">\u2b07<\/span> Download Image\r\n <\/button>\r\n <div class=\"hint\" style=\"text-align:center; margin-top:8px\">File will be exported at the recommended upload size for retina displays.<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst COMPONENTS = {\r\n 'article-hero': { name: 'article-hero', w: 2000, h: 1150, ratio: '16:9', display: '900\u00d7506', note: 'Promotes articles site-wide.' },\r\n 'article-image-gallery': { name: 'article-image-gallery', w: 1950, h: 1097, ratio: '16:9', display: '650\u00d7365', note: '' },\r\n 'articles-carousel': { name: 'articles-carousel', w: 1050, h: 591, ratio: '16:9', display: '350\u00d7197', note: '' },\r\n 'contact-us-map': { name: 'contact-us-map', w: 1650, h: 1650, ratio: '1:1', display: '550\u00d7550', note: '' },\r\n 'dci-overlay-hero': { name: 'dci-overlay-hero', w: 2000, h: 1150, ratio: '16:9', display: '1000\u00d7563', note: '' },\r\n 'editorial-cards-horizontal': { name: 'editorial-cards-horizontal', w: 1050, h: 591, ratio: '16:9', display: '350\u00d7197', note: '' },\r\n 'editorial-cards-vertical': { name: 'editorial-cards-vertical', w: 975, h: 1365, ratio: '5:7', display: '325\u00d7455', note: '' },\r\n 'exceptional-featured-story': { name: 'exceptional-featured-story', w: 2000, h: 1150, ratio: '16:9', display: '1200\u00d7675', note: '' },\r\n 'featured-block': { name: 'featured-block', w: 1800, h: 1800, ratio: '1:1', display: '600\u00d7600', note: '' },\r\n 'full-width-image-with-text': { name: 'full-width-image-with-text', w: 2000, h: 1150, ratio: '16:9', display: '1200\u00d7675', note: 'Keep image focus to left or right.' },\r\n 'hero-with-featured-story': { name: 'hero-with-featured-story', w: 2000, h: 1000, ratio: '2:1', display: '1200\u00d7600', note: '' },\r\n 'homepage-hero-card-flip': { name: 'homepage-hero-card-flip', w: 1500, h: 1500, ratio: '1:1', display: '500\u00d7500', note: '' },\r\n 'homepage-hero-cta-with-image': { name: 'homepage-hero-cta-with-image', w: 2000, h: 2000, ratio: '1:1', display: '400\u00d7400', note: 'On tablet, images appear at 2:1 and crop towards middle.' },\r\n 'homepage-hero-fw-video': { name: 'homepage-hero-fw-video', w: 2000, h: 1150, ratio: '16:9', display: '100vw\u00d7100vw',note: 'Poster image fills viewport, crops toward center.' },\r\n 'homepage-hero-sequence-intro': { name: 'homepage-hero-sequence-intro', w: 2000, h: 1150, ratio: '16:9', display: '100vw\u00d7100vw',note: 'Poster image fills viewport, crops toward center.' },\r\n 'homepage-hero-story-carousel': { name: 'homepage-hero-story-carousel', w: 1050, h: 591, ratio: '16:9', display: '350\u00d7197', note: '' },\r\n 'interactive-content-pane': { name: 'interactive-content-pane', w: 2000, h: 1150, ratio: '16:9', display: '100% vw', note: 'Use textural imagery. Crops toward center.' },\r\n 'interactive-quotes-pane': { name: 'interactive-quotes-pane', w: 2000, h: 1150, ratio: '16:9', display: '100% vw', note: 'Use textural imagery. Crops toward center.' },\r\n 'news-events-promo-instagram': { name: 'news-events-promo-instagram', w: 1800, h: 1800, ratio: '1:1', display: '600\u00d7600', note: '' },\r\n 'news-events-promo-event': { name: 'news-events-promo-event', w: 1800, h: 1013, ratio: '16:9', display: '600\u00d7337', note: '' },\r\n 'people-profile': { name: 'people-profile', w: 975, h: 1365, ratio: '5:7', display: '325\u00d7455', note: '' },\r\n 'photo-wall': { name: 'photo-wall', w: 1500, h: 0, ratio: 'Variable', display: '500px wide', note: 'Any height. Use original image height.' },\r\n 'program-overlay-hero': { name: 'program-overlay-hero', w: 2000, h: 1150, ratio: '16:9', display: '1000\u00d7563', note: '' },\r\n 'minisite-homepage-hero-image': { name: 'minisite-homepage-hero', w: 2000, h: 1150, ratio: '16:9', display: '1200\u00d7675', note: 'Page title appears centered over image.' },\r\n 'minisite-program-hero': { name: 'minisite-program-hero', w: 2000, h: 1150, ratio: '16:9', display: '1200\u00d7500', note: '' },\r\n 'minisite-news-events-promo': { name: 'minisite-news-events-promo', w: 600, h: 338, ratio: '16:9', display: '200\u00d7113', note: '' },\r\n 'rich-text-embedded': { name: 'rich-text-embedded', w: 1050, h: 0, ratio: 'Flexible', display: '350px wide', note: 'Height is flexible \u2014 use original proportions.' },\r\n 'scrolling-image-with-text': { name: 'scrolling-image-with-text', w: 1800, h: 2400, ratio: '3:4', display: '50vw\u00d7100vh', note: 'Image crops toward center to fill half viewport.' },\r\n 'sign-up-block': { name: 'sign-up-block', w: 1350, h: 900, ratio: '3:2', display: '450px wide', note: 'Keep focus in center or use textural imagery.' },\r\n 'social-media-promo-facebook': { name: 'social-media-facebook', w: 1500, h: 844, ratio: '16:9', display: '500\u00d7281', note: '' },\r\n 'social-media-promo-instagram': { name: 'social-media-instagram', w: 900, h: 900, ratio: '1:1', display: '300\u00d7300', note: '' },\r\n 'spotlight-quote': { name: 'spotlight-quote', w: 975, h: 975, ratio: '1:1', display: '325\u00d7325', note: '' },\r\n 'stacking-elements-landscape': { name: 'stacking-elements-landscape', w: 900, h: 506, ratio: '16:9', display: '300\u00d7169', note: '' },\r\n 'stacking-elements-portrait': { name: 'stacking-elements-portrait', w: 900, h: 1125, ratio: '3:4', display: '300\u00d7375', note: '' },\r\n 'video-listing-poster': { name: 'video-listing-poster', w: 1950, h: 1097, ratio: '16:9', display: '650\u00d7365', note: '' },\r\n 'video-pane-portrait-poster': { name: 'video-pane-portrait-poster', w: 900, h: 1600, ratio: '9:16', display: '300\u00d7533', note: '' },\r\n 'video-pane-landscape-poster': { name: 'video-pane-landscape-poster', w: 1200, h: 675, ratio: '16:9', display: '400\u00d7225', note: '' },\r\n 'video-with-text-poster': { name: 'video-with-text-poster', w: 2000, h: 1150, ratio: '16:9', display: '900\u00d7506', note: '' },\r\n 'usc-central-news': { name: 'usc-central-news', w: 2400, h: 1350, ratio: '16:9', display: '2400\u00d71350', note: 'USC Central News image' },\r\n\r\n 'flyer-top-image-speakers': {\r\n name: 'flyer-top-image-speakers',\r\n slots: [\r\n { label: 'Top Image', w: 2394, h: 678 },\r\n { label: 'Portrait', w: 372, h: 372 }\r\n ],\r\n note: 'Available via MyDornsife. See Templates section for download instructions.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/flyer-top-image-with-speakers.jpg',\r\n mydornsife: true\r\n },\r\n 'flyer-full-side-image': {\r\n name: 'flyer-full-side-image',\r\n slots: [\r\n { label: 'Side Image', w: 1065, h: 3156 }\r\n ],\r\n note: 'Available via MyDornsife. See Templates section for download instructions.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/flyer-full-side-image.jpg',\r\n mydornsife: true\r\n },\r\n 'flyer-small-side-image': {\r\n name: 'flyer-small-side-image',\r\n slots: [\r\n { label: 'Side Image', w: 744, h: 1350 }\r\n ],\r\n note: 'Available via MyDornsife. See Templates section for download instructions.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/flyer-small-side-image-with-detail-panel.jpg',\r\n mydornsife: true\r\n },\r\n\r\n 'ppt-std-title-photo': {\r\n name: 'ppt-std-title-photo',\r\n slots: [{ label: 'Image', w: 1137, h: 2250 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/presentation-title-slide-with-photo.jpg',\r\n mydornsife: true\r\n },\r\n 'ppt-std-section-header': {\r\n name: 'ppt-std-section-header',\r\n slots: [{ label: 'Image', w: 3000, h: 2250 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/section-header-fullscreen.jpg',\r\n mydornsife: true\r\n },\r\n 'ppt-std-bullet-photo': {\r\n name: 'ppt-std-bullet-photo',\r\n slots: [{ label: 'Image', w: 1239, h: 2097 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/bullet-slide-one-photo.jpg',\r\n mydornsife: true\r\n },\r\n 'ppt-std-gold-two-images': {\r\n name: 'ppt-std-gold-two-images',\r\n slots: [{ label: 'Image', w: 1209, h: 900 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/right-gold-box-with-two-images-right.jpg',\r\n mydornsife: true\r\n },\r\n 'ppt-std-our-people': {\r\n name: 'ppt-std-our-people',\r\n slots: [{ label: 'Image', w: 900, h: 1362 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/our-people.jpg',\r\n mydornsife: true\r\n },\r\n 'ppt-std-three-col': {\r\n name: 'ppt-std-three-col',\r\n slots: [{ label: 'Image', w: 780, h: 531 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/three-column-with-photos.jpg',\r\n mydornsife: true\r\n },\r\n 'ppt-std-four-col': {\r\n name: 'ppt-std-four-col',\r\n slots: [{ label: 'Image', w: 585, h: 531 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/four-column-with-photos.jpg',\r\n mydornsife: true\r\n },\r\n\r\n 'ppt-ws-title-photo': {\r\n name: 'ppt-ws-title-photo',\r\n slots: [{ label: 'Image', w: 1515, h: 2250 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/presentation-title-slide-with-photo-widescreen.jpg',\r\n mydornsife: true\r\n },\r\n 'ppt-ws-section-header': {\r\n name: 'ppt-ws-section-header',\r\n slots: [{ label: 'Image', w: 3999, h: 2250 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/section-header-fullscreen-widescreen.jpg',\r\n mydornsife: true\r\n },\r\n 'ppt-ws-bullet-photo': {\r\n name: 'ppt-ws-bullet-photo',\r\n slots: [{ label: 'Image', w: 1650, h: 2097 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/bullet-slide-one-photo-widescreen.jpg',\r\n mydornsife: true\r\n },\r\n 'ppt-ws-gold-two-images': {\r\n name: 'ppt-ws-gold-two-images',\r\n slots: [{ label: 'Image', w: 1611, h: 900 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/right-gold-box-with-two-images-right-widescreen.jpg',\r\n mydornsife: true\r\n },\r\n 'ppt-ws-our-people': {\r\n name: 'ppt-ws-our-people',\r\n slots: [{ label: 'Image', w: 1200, h: 1524 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/our-people-widescreen.jpg',\r\n mydornsife: true\r\n },\r\n 'ppt-ws-three-col': {\r\n name: 'ppt-ws-three-col',\r\n slots: [{ label: 'Image', w: 1041, h: 531 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/three-column-with-photos-widescreen.jpg',\r\n mydornsife: true\r\n },\r\n 'ppt-ws-four-col': {\r\n name: 'ppt-ws-four-col',\r\n slots: [{ label: 'Image', w: 780, h: 531 }],\r\n note: 'Download via MyDornsife.',\r\n previewUrl: 'https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2026\/05\/four-column-with-photos-widescreen.jpg',\r\n mydornsife: true\r\n },\r\n};\r\n\r\nlet sourceImg = null;\r\nlet cropX = 0, cropY = 0;\r\nlet cropW = 0, cropH = 0;\r\nlet baseCropW = 0, baseCropH = 0; \/\/ crop dimensions at zoom 1.0\r\nlet zoomLevel = 1.0;\r\nlet canvasDisplayScale = 1;\r\nlet isDragging = false;\r\nlet dragStartX = 0, dragStartY = 0;\r\nlet dragStartCropX = 0, dragStartCropY = 0;\r\nlet currentComponent = null;\r\nlet outputBlob = null;\r\n\r\nconst compSelect = document.getElementById('component-select');\r\nconst slugInput = document.getElementById('slug-input');\r\nconst fileInput = document.getElementById('file-input');\r\nconst dropZone = document.getElementById('drop-zone');\r\nconst cropCanvas = document.getElementById('crop-canvas');\r\nconst cropOverlay = document.getElementById('crop-overlay');\r\nconst canvasPlaceholder = document.getElementById('canvas-placeholder');\r\nconst applyBtn = document.getElementById('apply-btn');\r\nconst outputPanel = document.getElementById('output-panel');\r\nconst outputPreview = document.getElementById('output-preview');\r\nconst outSize = document.getElementById('out-size');\r\nconst outFilename = document.getElementById('out-filename');\r\nconst downloadBtn = document.getElementById('download-btn');\r\nconst outputCanvas = document.getElementById('output-canvas');\r\nconst compInfo = document.getElementById('component-info');\r\nconst cropControls = document.getElementById('crop-controls');\r\nconst cropInstructions = document.getElementById('crop-instructions');\r\nconst filenamePreview = document.getElementById('filename-preview');\r\nconst zoomControls = document.getElementById('zoom-controls');\r\nconst zoomSlider = document.getElementById('zoom-slider');\r\nconst zoomPct = document.getElementById('zoom-pct');\r\nconst qualitySlider = document.getElementById('quality-slider');\r\nconst qualityPct = document.getElementById('quality-pct');\r\n\r\nlet qualityDebounceTimer = null;\r\nlet qualityGeneration = 0; \/\/ incremented each encode; stale callbacks self-discard\r\nlet currentPreviewUrl = null;\r\n\r\nfunction setPreviewUrl(url) {\r\n if (currentPreviewUrl) URL.revokeObjectURL(currentPreviewUrl);\r\n currentPreviewUrl = url;\r\n outputPreview.src = url;\r\n}\r\n\r\n\/\/ Quality slider event\r\nqualitySlider.addEventListener('input', () => {\r\n qualityPct.textContent = qualitySlider.value + '%';\r\n if (outputCanvas.width > 0 && outputCanvas.height > 0) {\r\n clearTimeout(qualityDebounceTimer);\r\n qualityDebounceTimer = setTimeout(updateOutputQuality, 180);\r\n }\r\n});\r\n\r\nfunction updateOutputQuality() {\r\n const q = parseInt(qualitySlider.value) \/ 100;\r\n const gen = ++qualityGeneration;\r\n outputCanvas.toBlob(blob => {\r\n if (gen !== qualityGeneration) return; \/\/ a newer encode is already running; discard\r\n outputBlob = blob;\r\n setPreviewUrl(URL.createObjectURL(blob));\r\n const outW = outputCanvas.width;\r\n const outH = outputCanvas.height;\r\n if (blob.size >= 1024 * 1024) {\r\n outSize.textContent = `${outW}\u00d7${outH}px \u00b7 ${(blob.size \/ (1024 * 1024)).toFixed(1)} MB`;\r\n } else {\r\n outSize.textContent = `${outW}\u00d7${outH}px \u00b7 ${Math.round(blob.size \/ 1024)} KB`;\r\n }\r\n }, 'image\/jpeg', q);\r\n}\r\n\r\n\/\/ Zoom slider event\r\nzoomSlider.addEventListener('input', () => {\r\n zoomLevel = parseInt(zoomSlider.value) \/ 100;\r\n applyZoom();\r\n});\r\n\r\nfunction adjustZoom(delta) {\r\n const newVal = Math.max(100, Math.min(300, parseInt(zoomSlider.value) + delta));\r\n zoomSlider.value = newVal;\r\n zoomLevel = newVal \/ 100;\r\n applyZoom();\r\n}\r\n\r\nfunction applyZoom() {\r\n zoomPct.textContent = Math.round(zoomLevel * 100) + '%';\r\n if (!sourceImg || !baseCropW) return;\r\n\r\n \/\/ Remember center of current crop to zoom around it\r\n const centerX = cropX + cropW \/ 2;\r\n const centerY = cropY + cropH \/ 2;\r\n\r\n \/\/ Shrink the sampled region as zoom increases\r\n cropW = Math.round(baseCropW \/ zoomLevel);\r\n cropH = Math.round(baseCropH \/ zoomLevel);\r\n\r\n \/\/ Keep crop centered on the same point, clamped to image bounds\r\n cropX = Math.round(centerX - cropW \/ 2);\r\n cropY = Math.round(centerY - cropH \/ 2);\r\n cropX = Math.max(0, Math.min(sourceImg.width - cropW, cropX));\r\n cropY = Math.max(0, Math.min(sourceImg.height - cropH, cropY));\r\n\r\n positionOverlay();\r\n}\r\n\r\nfunction resetZoom() {\r\n zoomLevel = 1.0;\r\n zoomSlider.value = 100;\r\n zoomPct.textContent = '100%';\r\n}\r\n\r\ncompSelect.addEventListener('change', () => {\r\n const key = compSelect.value;\r\n currentComponent = key ? COMPONENTS[key] : null;\r\n updateComponentInfo();\r\n updateFilename();\r\n resetZoom();\r\n if (sourceImg && currentComponent) setupCrop();\r\n updateApplyBtn();\r\n});\r\n\r\nfunction applyFilter(category) {\r\n document.querySelectorAll('.filter-btn').forEach(function(btn) {\r\n btn.setAttribute('aria-pressed', btn.dataset.filter === category ? 'true' : 'false');\r\n });\r\n compSelect.querySelectorAll('optgroup').forEach(function(group) {\r\n let hasVisible = false;\r\n group.querySelectorAll('option').forEach(function(opt) {\r\n const cat = opt.dataset.category || '';\r\n opt.hidden = category !== 'all' && cat !== category;\r\n if (!opt.hidden) hasVisible = true;\r\n });\r\n group.hidden = !hasVisible;\r\n });\r\n if (compSelect.value) {\r\n const selected = compSelect.querySelector('option[value=\"' + compSelect.value + '\"]');\r\n if (selected && selected.hidden) {\r\n compSelect.value = '';\r\n currentComponent = null;\r\n updateComponentInfo();\r\n updateFilename();\r\n }\r\n }\r\n}\r\n\r\ndocument.querySelectorAll('.filter-btn').forEach(function(btn) {\r\n btn.addEventListener('click', function() { applyFilter(btn.dataset.filter); });\r\n});\r\n\r\nfunction updateComponentInfo() {\r\n if (!currentComponent) { compInfo.classList.remove('visible'); return; }\r\n const c = currentComponent;\r\n let html;\r\n if (c.slots) {\r\n html = '<div class=\"slot-list\">';\r\n c.slots.forEach(function(slot) {\r\n html += '<div class=\"slot-row\"><span class=\"slot-name\">' + slot.label + '<\/span><span class=\"slot-dims\">' + slot.w + '\u00d7' + slot.h + ' px<\/span><\/div>';\r\n });\r\n html += '<\/div>';\r\n if (c.previewUrl) {\r\n const optText = compSelect.options[compSelect.selectedIndex] ? compSelect.options[compSelect.selectedIndex].text : c.name;\r\n html += '<img decoding=\"async\" class=\"component-preview-img\" src=\"' + c.previewUrl + '\" alt=\"Preview of ' + optText + ' template\">';\r\n }\r\n if (c.mydornsife) {\r\n html += '<a class=\"mydornsife-link\" href=\"https:\/\/mydornsife.usc.edu\/\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Download template on MyDornsife, opens in new tab\">Download template on MyDornsife \u2197<\/a>';\r\n if (c.name.startsWith('flyer-')) {\r\n html += '<p class=\"mydornsife-path\">USC Dornsife Graphic Identity Downloads \u203a USC Dornsife Files \u203a Event and Class Flyer Templates<\/p>';\r\n } else if (c.name.startsWith('ppt-')) {\r\n html += '<p class=\"mydornsife-path\">USC Dornsife Graphic Identity Downloads \u203a USC Dornsife Files \u203a PowerPoint Templates<\/p>';\r\n }\r\n }\r\n if (c.note) {\r\n html += '<div style=\"margin-top:8px; font-size:0.76rem; color: var(--dark)\">' + c.note + '<\/div>';\r\n }\r\n } else {\r\n const uploadSize = c.h > 0 ? c.w + '\u00d7' + c.h + ' px' : c.w + 'px wide';\r\n html = '<div class=\"info-row\">'\r\n + '<div><div class=\"info-label\">Upload Size<\/div><strong>' + uploadSize + '<\/strong><\/div>'\r\n + '<div><div class=\"info-label\">Ratio<\/div><strong>' + c.ratio + '<\/strong><\/div>'\r\n + '<div><div class=\"info-label\">Display Size<\/div><span>' + c.display + '<\/span><\/div>'\r\n + '<\/div>'\r\n + '<div style=\"margin-top:8px; font-size:0.76rem; color: var(--dark)\">' + c.note + '<\/div>';\r\n }\r\n compInfo.innerHTML = html;\r\n compInfo.classList.add('visible');\r\n}\r\n\r\nfunction slugify(str) {\r\n return str.toLowerCase().replace(\/[^a-z0-9\\s-]\/g, '').trim().replace(\/[\\s]+\/g, '-');\r\n}\r\n\r\nfunction updateFilename() {\r\n const slug = slugify(slugInput.value);\r\n if (!slug && !currentComponent) {\r\n filenamePreview.innerHTML = '<span class=\"filename-placeholder\">Filename will appear here\u2026<\/span>';\r\n return;\r\n }\r\n const compName = currentComponent ? currentComponent.name : '[component]';\r\n const parts = [slug, compName].filter(Boolean);\r\n const ext = 'jpg';\r\n const filename = parts.join('-') + '.' + ext;\r\n filenamePreview.textContent = filename;\r\n}\r\n\r\nslugInput.addEventListener('input', updateFilename);\r\n\r\nfunction getFilename() {\r\n const slug = slugify(slugInput.value);\r\n const compName = currentComponent ? currentComponent.name : 'image';\r\n const parts = [slug, compName].filter(Boolean);\r\n return parts.join('-') + '.jpg';\r\n}\r\n\r\ndropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('dragover'); });\r\ndropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));\r\ndropZone.addEventListener('drop', e => {\r\n e.preventDefault(); dropZone.classList.remove('dragover');\r\n const file = e.dataTransfer.files[0];\r\n if (file && file.type.startsWith('image\/')) loadImageFile(file);\r\n});\r\nfileInput.addEventListener('change', () => {\r\n if (fileInput.files[0]) loadImageFile(fileInput.files[0]);\r\n});\r\ndropZone.addEventListener('click', () => fileInput.click());\r\ndropZone.addEventListener('keydown', e => {\r\n if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); fileInput.click(); }\r\n});\r\n\r\nfunction loadImageFile(file) {\r\n const reader = new FileReader();\r\n reader.onload = e => {\r\n const img = new Image();\r\n img.onload = () => {\r\n sourceImg = img;\r\n resetZoom();\r\n if (currentComponent) {\r\n setupCrop();\r\n updateApplyBtn();\r\n } else {\r\n renderCropCanvas();\r\n updateApplyBtn();\r\n }\r\n };\r\n img.src = e.target.result;\r\n };\r\n reader.readAsDataURL(file);\r\n}\r\n\r\nfunction setupCrop() {\r\n if (!sourceImg || !currentComponent) return;\r\n const c = currentComponent;\r\n\r\n let aspectW, aspectH;\r\n if (c.slots) {\r\n aspectW = c.slots[0].w;\r\n aspectH = c.slots[0].h;\r\n } else {\r\n aspectW = c.w;\r\n aspectH = c.h;\r\n if (c.h === 0) {\r\n aspectW = sourceImg.width; aspectH = sourceImg.height;\r\n }\r\n }\r\n\r\n const imgAspect = sourceImg.width \/ sourceImg.height;\r\n const cropAspect = aspectW \/ aspectH;\r\n\r\n if (imgAspect > cropAspect) {\r\n cropH = sourceImg.height;\r\n cropW = Math.round(cropH * cropAspect);\r\n } else {\r\n cropW = sourceImg.width;\r\n cropH = Math.round(cropW \/ cropAspect);\r\n }\r\n\r\n \/\/ Store base (zoom 1.0) dimensions\r\n baseCropW = cropW;\r\n baseCropH = cropH;\r\n\r\n cropX = Math.round((sourceImg.width - cropW) \/ 2);\r\n cropY = Math.round((sourceImg.height - cropH) \/ 2);\r\n\r\n renderCropCanvas();\r\n cropControls.style.display = 'flex';\r\n zoomControls.style.display = 'flex';\r\n cropInstructions.style.display = 'block';\r\n outputPanel.style.display = 'none';\r\n outputBlob = null;\r\n}\r\n\r\nfunction renderCropCanvas() {\r\n if (!sourceImg) return;\r\n const maxW = document.getElementById('canvas-area').clientWidth - 0;\r\n const maxH = 520;\r\n const scale = Math.min(maxW \/ sourceImg.width, maxH \/ sourceImg.height, 1);\r\n canvasDisplayScale = scale;\r\n\r\n cropCanvas.width = Math.round(sourceImg.width * scale);\r\n cropCanvas.height = Math.round(sourceImg.height * scale);\r\n\r\n const ctx = cropCanvas.getContext('2d');\r\n ctx.drawImage(sourceImg, 0, 0, cropCanvas.width, cropCanvas.height);\r\n\r\n canvasPlaceholder.style.display = 'none';\r\n cropCanvas.style.display = 'block';\r\n\r\n if (currentComponent && cropW > 0) {\r\n const ox = Math.round(cropX * scale);\r\n const oy = Math.round(cropY * scale);\r\n const ow = Math.round(cropW * scale);\r\n const oh = Math.round(cropH * scale);\r\n\r\n cropOverlay.style.display = 'block';\r\n cropOverlay.style.left = (cropCanvas.offsetLeft + ox) + 'px';\r\n cropOverlay.style.top = (cropCanvas.offsetTop + oy) + 'px';\r\n cropOverlay.style.width = ow + 'px';\r\n cropOverlay.style.height = oh + 'px';\r\n }\r\n}\r\n\r\nfunction positionOverlay() {\r\n if (!currentComponent || !sourceImg) return;\r\n const rect = cropCanvas.getBoundingClientRect();\r\n const canvasAreaRect = document.getElementById('canvas-area').getBoundingClientRect();\r\n const scale = canvasDisplayScale;\r\n const ox = Math.round(cropX * scale);\r\n const oy = Math.round(cropY * scale);\r\n const ow = Math.round(cropW * scale);\r\n const oh = Math.round(cropH * scale);\r\n const relLeft = rect.left - canvasAreaRect.left;\r\n const relTop = rect.top - canvasAreaRect.top;\r\n cropOverlay.style.left = (relLeft + ox) + 'px';\r\n cropOverlay.style.top = (relTop + oy) + 'px';\r\n cropOverlay.style.width = ow + 'px';\r\n cropOverlay.style.height = oh + 'px';\r\n}\r\n\r\nif (window.ResizeObserver) {\r\n new ResizeObserver(positionOverlay).observe(document.getElementById('canvas-area'));\r\n}\r\n\r\ncropCanvas.addEventListener('mousedown', e => {\r\n if (!currentComponent) return;\r\n isDragging = true;\r\n dragStartX = e.clientX;\r\n dragStartY = e.clientY;\r\n dragStartCropX = cropX;\r\n dragStartCropY = cropY;\r\n e.preventDefault();\r\n});\r\nwindow.addEventListener('mousemove', e => {\r\n if (!isDragging) return;\r\n const dx = Math.round((e.clientX - dragStartX) \/ canvasDisplayScale);\r\n const dy = Math.round((e.clientY - dragStartY) \/ canvasDisplayScale);\r\n cropX = Math.max(0, Math.min(sourceImg.width - cropW, dragStartCropX + dx));\r\n cropY = Math.max(0, Math.min(sourceImg.height - cropH, dragStartCropY + dy));\r\n positionOverlay();\r\n});\r\nwindow.addEventListener('mouseup', () => { isDragging = false; });\r\n\r\ncropCanvas.addEventListener('touchstart', e => {\r\n if (!currentComponent) return;\r\n isDragging = true;\r\n dragStartX = e.touches[0].clientX;\r\n dragStartY = e.touches[0].clientY;\r\n dragStartCropX = cropX; dragStartCropY = cropY;\r\n e.preventDefault();\r\n}, { passive: false });\r\nwindow.addEventListener('touchmove', e => {\r\n if (!isDragging) return;\r\n const dx = Math.round((e.touches[0].clientX - dragStartX) \/ canvasDisplayScale);\r\n const dy = Math.round((e.touches[0].clientY - dragStartY) \/ canvasDisplayScale);\r\n cropX = Math.max(0, Math.min(sourceImg.width - cropW, dragStartCropX + dx));\r\n cropY = Math.max(0, Math.min(sourceImg.height - cropH, dragStartCropY + dy));\r\n positionOverlay();\r\n});\r\nwindow.addEventListener('touchend', () => { isDragging = false; });\r\n\r\nfunction moveCrop(dx, dy) {\r\n if (!sourceImg) return;\r\n cropX = Math.max(0, Math.min(sourceImg.width - cropW, cropX + dx));\r\n cropY = Math.max(0, Math.min(sourceImg.height - cropH, cropY + dy));\r\n positionOverlay();\r\n}\r\nfunction centerCrop() {\r\n if (!sourceImg) return;\r\n cropX = Math.round((sourceImg.width - cropW) \/ 2);\r\n cropY = Math.round((sourceImg.height - cropH) \/ 2);\r\n positionOverlay();\r\n}\r\n\r\nfunction updateApplyBtn() {\r\n applyBtn.disabled = !(sourceImg && currentComponent);\r\n}\r\n\r\nfunction applyAndPreview() {\r\n if (!sourceImg || !currentComponent) return;\r\n const c = currentComponent;\r\n let outW, outH;\r\n\r\n if (c.slots) {\r\n outW = c.slots[0].w;\r\n outH = c.slots[0].h;\r\n } else {\r\n outW = c.w;\r\n outH = c.h;\r\n if (outH === 0) {\r\n const scale = outW \/ cropW;\r\n outH = Math.round(cropH * scale);\r\n }\r\n }\r\n\r\n outputCanvas.width = outW;\r\n outputCanvas.height = outH;\r\n const ctx = outputCanvas.getContext('2d');\r\n ctx.drawImage(sourceImg, cropX, cropY, cropW, cropH, 0, 0, outW, outH);\r\n\r\n const q = parseInt(qualitySlider.value) \/ 100;\r\n const gen = ++qualityGeneration;\r\n outputCanvas.toBlob(blob => {\r\n if (gen !== qualityGeneration) return;\r\n outputBlob = blob;\r\n setPreviewUrl(URL.createObjectURL(blob));\r\n if (blob.size >= 1024 * 1024) {\r\n outSize.textContent = `${outW}\u00d7${outH}px \u00b7 ${(blob.size \/ (1024 * 1024)).toFixed(1)} MB`;\r\n } else {\r\n outSize.textContent = `${outW}\u00d7${outH}px \u00b7 ${Math.round(blob.size \/ 1024)} KB`;\r\n }\r\n outFilename.textContent = getFilename();\r\n outputPanel.style.display = 'block';\r\n document.getElementById('output-preview-wrap').classList.add('visible');\r\n outputPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n }, 'image\/jpeg', q);\r\n}\r\n\r\nfunction downloadImage() {\r\n if (!outputBlob) return;\r\n const url = URL.createObjectURL(outputBlob);\r\n const a = document.createElement('a');\r\n a.href = url;\r\n a.download = getFilename();\r\n a.click();\r\n URL.revokeObjectURL(url);\r\n}\r\n\r\nwindow.addEventListener('resize', () => {\r\n if (sourceImg) renderCropCanvas();\r\n positionOverlay();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\n <\/div>\n \n\n <\/div><\/div>\n\n\n\n \n \n \n\n\n\n\n\n\n<div\n class=\"cc--component-container cc--link-list \"\n\n \n \n \n \n \n \n >\n <div class=\"c--component c--link-list\"\n \n >\n\n \n <div class=\"header-container\">\n\n \n<div class=\"f--field f--section-title\">\n\n \n <h2>\n Photo Resources & Best Practices\n <\/h2>\n\n\n<\/div>\n \n<div class=\"f--field f--description\">\n\n \n <p>All images and videos used on USC Dornsife websites must follow and respect copyright laws. For information about copyright law and to download the USC image release form, please visit\u00a0<a href=\"https:\/\/identity.usc.edu\/identity\/imagery\/\" target=\"_blank\" rel=\"noopener\">identity.usc.edu<\/a>.<\/p>\n<p>Please email\u00a0<a href=\"mailto:webproject@dornsife.usc.edu\">webproject@dornsife.usc.edu<\/a>\u00a0if you have any questions or need assistance.<\/p>\n\n\n\n<\/div>\n <\/div>\n \n <div class=\"links-container\">\n\n \n \n \n <div class=\"column\">\n <ul>\n <li>\n \n<div class=\"f--field f--link\">\n\n \n \n \n<a \n class=\"link\"\n href= https:\/\/dornsife.usc.edu\/website\/content-design\/#chapter=chapter3\n target=\"_blank\" aria-label=\"Read more about USC Dornsife Photo Libraries & Image Resources\" \n>\n USC Dornsife Photo Libraries & Image Resources \n <svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" width=\"25\" height=\"25\" xml:space=\"preserve\"><polygon fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#000\" points=\"19.3,27.5 29.3,17.5,19.3,7.5 16.3,10.4 21.4,15.4 6.7,15.4 6.7,19.6 21.4,19.6 16.3,24.6 \"\/><\/svg>\n<\/a>\n\n\n<\/div>\n\n <\/li>\n <\/ul>\n <\/div>\n\n \n \n \n \n <div class=\"column\">\n <ul>\n <li>\n \n<div class=\"f--field f--link\">\n\n \n \n \n<a \n class=\"link\"\n href= https:\/\/dornsife.usc.edu\/components\/\n target=\"_blank\" aria-label=\"Read more about Design Component Library\" \n>\n Design Component Library \n <svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 35 35\" enable-background=\"new 0 0 35 35\" width=\"25\" height=\"25\" xml:space=\"preserve\"><polygon fill-rule=\"evenodd\" clip-rule=\"evenodd\" fill=\"#000\" points=\"19.3,27.5 29.3,17.5,19.3,7.5 16.3,10.4 21.4,15.4 6.7,15.4 6.7,19.6 21.4,19.6 16.3,24.6 \"\/><\/svg>\n<\/a>\n\n\n<\/div>\n\n <\/li>\n <\/ul>\n <\/div>\n\n \n \n \n\n\n\n <\/div>\n \n\n <\/div><\/div>\n\n\n \n \n\n\n\n\n\n\n<div\n class=\"cc--component-container cc--spacer \"\n\n \n \n \n \n \n \n >\n <div class=\"c--component c--spacer\"\n \n >\n\n \n\n <\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":11,"featured_media":1642,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2233","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Image Resizing Tool - USC Dornsife Website Resources & Support<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dornsife.usc.edu\/website\/image-tool\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Resizing Tool - USC Dornsife Website Resources & Support\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dornsife.usc.edu\/website\/image-tool\/\" \/>\n<meta property=\"og:site_name\" content=\"USC Dornsife Website Resources & Support\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-11T17:03:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/07\/camera-g78ed75cc4_1920.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1280\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/dornsife.usc.edu\/website\/image-tool\/\",\"url\":\"https:\/\/dornsife.usc.edu\/website\/image-tool\/\",\"name\":\"Image Resizing Tool - USC Dornsife Website Resources & Support\",\"isPartOf\":{\"@id\":\"https:\/\/dornsife.usc.edu\/website\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/dornsife.usc.edu\/website\/image-tool\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/dornsife.usc.edu\/website\/image-tool\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/07\/camera-g78ed75cc4_1920.jpg\",\"datePublished\":\"2026-03-26T20:50:20+00:00\",\"dateModified\":\"2026-05-11T17:03:17+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/dornsife.usc.edu\/website\/image-tool\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/dornsife.usc.edu\/website\/image-tool\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/dornsife.usc.edu\/website\/image-tool\/#primaryimage\",\"url\":\"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/07\/camera-g78ed75cc4_1920.jpg\",\"contentUrl\":\"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/07\/camera-g78ed75cc4_1920.jpg\",\"width\":1920,\"height\":1280,\"caption\":\"Closeup of a person looking through the lens of a camera.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/dornsife.usc.edu\/website\/image-tool\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/dornsife.usc.edu\/website\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image Resizing Tool\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/dornsife.usc.edu\/website\/#website\",\"url\":\"https:\/\/dornsife.usc.edu\/website\/\",\"name\":\"USC Dornsife Website Resources & Support\",\"description\":\"USC Dornsife Website Resources & Support\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/dornsife.usc.edu\/website\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Image Resizing Tool - USC Dornsife Website Resources & Support","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/dornsife.usc.edu\/website\/image-tool\/","og_locale":"en_US","og_type":"article","og_title":"Image Resizing Tool - USC Dornsife Website Resources & Support","og_url":"https:\/\/dornsife.usc.edu\/website\/image-tool\/","og_site_name":"USC Dornsife Website Resources & Support","article_modified_time":"2026-05-11T17:03:17+00:00","og_image":[{"width":1920,"height":1280,"url":"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/07\/camera-g78ed75cc4_1920.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dornsife.usc.edu\/website\/image-tool\/","url":"https:\/\/dornsife.usc.edu\/website\/image-tool\/","name":"Image Resizing Tool - USC Dornsife Website Resources & Support","isPartOf":{"@id":"https:\/\/dornsife.usc.edu\/website\/#website"},"primaryImageOfPage":{"@id":"https:\/\/dornsife.usc.edu\/website\/image-tool\/#primaryimage"},"image":{"@id":"https:\/\/dornsife.usc.edu\/website\/image-tool\/#primaryimage"},"thumbnailUrl":"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/07\/camera-g78ed75cc4_1920.jpg","datePublished":"2026-03-26T20:50:20+00:00","dateModified":"2026-05-11T17:03:17+00:00","breadcrumb":{"@id":"https:\/\/dornsife.usc.edu\/website\/image-tool\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dornsife.usc.edu\/website\/image-tool\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dornsife.usc.edu\/website\/image-tool\/#primaryimage","url":"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/07\/camera-g78ed75cc4_1920.jpg","contentUrl":"https:\/\/dornsife.usc.edu\/website\/wp-content\/uploads\/sites\/136\/2025\/07\/camera-g78ed75cc4_1920.jpg","width":1920,"height":1280,"caption":"Closeup of a person looking through the lens of a camera."},{"@type":"BreadcrumbList","@id":"https:\/\/dornsife.usc.edu\/website\/image-tool\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dornsife.usc.edu\/website\/"},{"@type":"ListItem","position":2,"name":"Image Resizing Tool"}]},{"@type":"WebSite","@id":"https:\/\/dornsife.usc.edu\/website\/#website","url":"https:\/\/dornsife.usc.edu\/website\/","name":"USC Dornsife Website Resources & Support","description":"USC Dornsife Website Resources & Support","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dornsife.usc.edu\/website\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/pages\/2233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/comments?post=2233"}],"version-history":[{"count":19,"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/pages\/2233\/revisions"}],"predecessor-version":[{"id":2308,"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/pages\/2233\/revisions\/2308"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/media\/1642"}],"wp:attachment":[{"href":"https:\/\/dornsife.usc.edu\/website\/wp-json\/wp\/v2\/media?parent=2233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}