How to Search, Download, Rename, and Upload Stock Images to HWP

March 3, 2025

Overview

For these steps, assume you are building a residential general contractor website. You need to add stock images for the hero sections of the following pages:

  • Homepage (general home-related image)
  • Roofing page
  • Siding page
  • Gutter page

Additionally, the hero images from all core pages (roofing, siding, gutters) will also be displayed as the homepage copy block image.  These steps will guide you through finding, downloading, renaming, and uploading stock images to the website.

Step 1: Search and Download Stock Images

  1. Visit Hibu ResourceSpace.
  2. Use the search bar to find images for the first page topic (e.g., roofing).
  3. Select 5 to 10 images by checking the small box in the lower-left corner of each image.
  4. Click the "Actions" dropdown at the top of the page and select "Download."
  5. On the "Download collection as an archive" page, click the blue download button in the center.
  6. A pop-up will appear—click OK.
  7. Repeat steps 2-6 for each category (siding, gutters, windows, doors, outdoor patios).
  8. Once all selections are complete, go to the Messages section (click the person icon in the upper-right corner).
  9. Click the "Messages" tab and find the downloads listed.
  10. Click "Link" for each download to retrieve the ZIP files.
  11. Tip: After downloading, delete the messages containing download links to keep your workspace clean.

Step 2: Rename and Organize Images (QAF 624 Guidelines)

1. Locate the ZIP Folder

  • Open File Explorer (Win + E).
  • Navigate to Downloads (or the folder where the ZIP files were saved).

2. Rename the ZIP Folder (Optional for Organization)

  • Right-click the ZIP file.
  • Click Rename.
  • Name it according to the image category (e.g., Roofing Images.zip, Siding Images.zip).
  • Press Enter.

3. Extract the ZIP Folder

  • Right-click the ZIP file.
  • Click Extract All.
  • Choose a destination folder (default is the same location).
  • Click Extract.

4. Rename the Extracted Folder

  • If you didn’t rename the ZIP folder earlier, do it now.
  • Right-click the extracted folder.
  • Click Rename.
  • Enter the category name (e.g., Roofing Images, Siding Images).
  • Press Enter.

5. Follow the Official Naming Guidelines

6. Bulk Rename Images

  • Open the unzipped folder.
  • Select all images (Ctrl + A).
  • Press F2 (or right-click and select Rename).
  • Type the new name following the QAF 624 format.
  • Example: this-is-okay (1).jpg
  • Press Enter.
  • Windows will add a space before the number (e.g., this-is-okay (1).jpg), but HWP will automatically correct this upon upload.

Step 3: Upload Images to HWP

Open Media Manager

  • Log in to HWP.
  • Navigate to Content → Media Manager.

2. Create a New Folder

  • Click +Add Folder.
  • Enter the name of the folder matching your zip folder names (e.g., Gutters, Homes, Roofs, Siding).
  • Click OK or Save.

3. Upload Images

  • Open the newly created folder.
  • Drag and drop the images from your computer’s corresponding folder (e.g., Gutter images → Gutter folder in HWP).

4. Repeat for All Categories

  • Repeat Steps 2 and 3 until all images are uploaded.

Editor 2.0 - Size and Units

By Hibu Sections • April 9, 2025
In this section, you’ll learn how to control the size of elements using different types of units in Editor 2.0. We’ll break down how viewport width (vw) and height (vh) respond to the browser window, how the auto unit allows containers to resize based on their content, and how min/max values help you keep your elements within practical size limits. Together, these tools give you greater control over how your site adapts across devices—without relying on fixed pixel values.

Editor 2.0 - Flexbox: Columns and Inner Columns

April 9, 2025
Flexbox is the foundation for how columns behave in Editor 2.0. It controls how elements stack, align, and space themselves inside containers, giving you full control over layout across different screen sizes. By adjusting properties like stacking direction, content alignment, and wrap, you can create clean, organized designs that adapt smoothly to any device. These features help prevent layout issues, make better use of space, and simplify how you manage rows and individual elements. Learning how to use Flexbox effectively leads to faster builds and more consistent, responsive websites.

Editor 2.0 - Layouts Elements & Layers Panel

By Hibu Sections • April 9, 2025
Understanding layout elements and the Layers Panel is key to building clean, responsive websites. Layout elements help you control structure—how widgets are grouped, how content stacks, and how different parts of the page respond across breakpoints. The Layers Panel gives you a clear view of that structure, making it easier to manage complex sections, find hidden elements, and keep your layout organized. Together, these tools let you build with more precision, troubleshoot faster, and maintain consistency across the entire site.

Editor 2.0 - Breakpoints

By Hibu Sections • April 8, 2025
Breakpoints are specific screen widths where your website layout shifts to fit different devices, like phones, tablets, and desktops. They’re a key part of responsive design, allowing you to adjust styles so your site looks and works well on any screen. In the editor, you can see how styles behave at each breakpoint, apply universal styles, and override them when needed. You can also preview your site at different screen sizes to make sure everything looks right.
Show More →