Readme
Image placeholders
This page tells doc authors how to swap empty image slots for real screenshots in WordPress. A placeholder is a reserved filename: the docs mention it before the picture exists, so every page agrees on the same name. Keep filenames identical when you upload replacements so Gutenberg pages and this table stay in sync.
Words used on this page
| Word | Everyday meaning | Meaning in CROForge docs |
|---|---|---|
| Placeholder | A reserved parking space with a name on it, waiting for the real car. | A PNG (or JPG) filename listed below. Until you add the screenshot, the Media Library slot is empty and previews may show a broken-image icon—that is expected. |
| Filename | The exact name of the file, including extension (for example login-screen.png). | Must match this table character-for-character. Do not rename to Login Screen.png or the docs will point at the wrong asset. |
| Screenshot | A picture of the real product UI. | Capture the screen named in the “Used in” column, export PNG/JPG with the listed filename, then replace the placeholder in WordPress. |
How to replace a placeholder in WordPress
- Take the screenshot for the row in the table (use the “Used in” column to know which product screen).
- Save the file with the exact filename in the first column (for example
architecture-diagram.png). - In WordPress, open Media → Add New and upload that file.
- Open the matching Gutenberg page (the “Used in” guide). Find the paragraph that says “Suggested screenshot filename: …”.
- Insert an Image block (or replace the note) and pick the uploaded file from the Media Library. Do not change the filename.
Until you add images, broken-image icons in preview are expected. Keep filenames identical so existing references keep working.
Filename table
Suggested captures (create empty PNG/JPG with these names, or drop screenshots here / in the Media Library):
| Filename | Used in |
|---|---|
product-overview.png | getting-started/overview |
quick-start.png | getting-started/quick-start |
dashboard-overview.png | docs README |
app-sidebar.png | getting-started/overview |
login-screen.png | account/authentication |
forgot-password.png | account/authentication |
profile-settings.png | account/profile |
invite-user.png | account/invitations |
accept-invite.png | account/invitations |
workspace-overview.png | workspace/overview |
create-workspace-modal.png | workspace/create-manage |
workspace-users.png | workspace/users-roles |
settings-hub.png | workspace/settings |
activity-log.png | workspace/activity-logs |
smart-code-overview.png | installation/smart-code-overview |
install-html.png | installation/install-html |
install-platforms.png | installation/install-platforms |
verify-installation.png | installation/verify-installation |
ab-test-list.png | ab-testing/overview |
create-ab-test-modal.png | ab-testing/create-experiment |
url-targeting-editor.png | ab-testing/pages-url-targeting |
url-validator.png | ab-testing/pages-url-targeting |
variations-panel.png | ab-testing/variations |
traffic-split.png | ab-testing/traffic-split |
experiment-audience.png | ab-testing/audience |
experiment-metrics.png | ab-testing/experiment-metrics |
experiment-statuses.png | ab-testing/lifecycle-statuses |
preview-mode.png | ab-testing/preview-mode |
variation-code-editor.png | ab-testing/code-editor |
campaign-report.png | ab-testing/reports |
campaign-report-filters.png | ab-testing/reports |
profile-2fa.png | account/profile |
data-vista-hub.png | data-vista/overview |
attributes-list.png | data-vista/attributes |
segments-list.png | data-vista/segments |
metrics-list.png | data-vista/metrics |
events-list.png | events/overview |
standard-events.png | events/standard-events |
custom-events.png | events/custom-events |
websites-apps.png | configurations/websites-apps |
conditions-builder.png | conditions/overview |
match-type-select.png | conditions/match-types |
url-rules.png | conditions/url-rules |
architecture-diagram.png | developer/architecture |
local-setup.png | developer/local-setup |
smartcode-flow.png | developer/smartcode-runtime |
event-pipeline.png | developer/event-pipeline |
frontend-structure.png | developer/frontend-structure |
Filename reminder
In the old Markdown set, placeholders looked like an image pointing at ../assets/placeholders/filename.png. In Gutenberg, use an Image block and the same filename from the table. Example filename in a code note:
architecture-diagram.pngRelated reading
- Documentation taxonomy
- Documentation hub
