<% user.full_name %>
<% util.level ? util.level.title : '' %>
Explorer Pioneer Apollo Viking Voyager Pathfinder Orion
Points
<% user.points ? user.points.toLocaleString() : 0 %>
Badges
<% util.badgeCount %>
Streaks
Congratulations You've <% util.newestBadge.isCurriculum ? 'completed' : 'earned' %> the
<% util.newestBadge.title %> <% util.newestBadge.isCurriculum ? 'curriculum' : 'badge' %>!
previous
next
Share to Social Media
Linked In Facebook
Status
<% util.level ? util.level.title : '' %>
<% util.level ? util.level.points : '' %>
<% util.nextLevel ? util.nextLevel.title : '' %>
<% util.nextLevel ? util.nextLevel.points : '' %>
Level up! <% util.levelPointsRemaining %> points to go
Level up! <% util.levelPointsRemaining %> points to go
Badges
Completed Hitchhikers Program Track Completed Knowledge Graph Track Completed Pages Track Completed Page Builder Track Completed Search Track Completed Search: Advanced Track Completed Search UI React Track Completed Solution Templates and the Admin Console Track Completed Technical Skills Track Completed Platform Basics Track Completed Listings Track Completed Reviews Track Completed Industry Overview Track Completed Analytics Track Completed Industry Overview & Product Basics Track Completed Knowledge Assistant Track Completed Multi-Language Experiences Track Completed Fall '22 Release Highlights Track Completed Spring '23 Release Highlights Track
<% util.expandBadges ? 'Less' : 'More' %>
Playground Accounts
New +
No Playground Accounts
Create Playground +
View Profile
Log Out loading
Mission Complete! 🚀
Congratulations, you’ve completed your first module!

We hope you enjoy exploring the rest of the site. Please don’t forget to leave us feedback - we are constantly looking to improve. Happy Hitchhiking!
Home
Welcome to Hitchhikers! 👋
To learn more about the platform we encourage you to get started by completing the Hitchhikers Program Track and earning your first badge!
Start Here
Close notification
Core Frontend - Adding Pages & Cards
Arrow Back
Unit 1
Frontend UI Refresher
completed
Unit 2
Global Settings & Locale Configuration
completed
Unit 3
Adding & Updating Pages
completed
Unit 4
Customizing Your Pages
completed
Unit 5
Configuring No Results
completed
Unit 6
Adding & Updating Cards
completed
Unit 7
Adding Images
completed
Unit 8
Putting it All Together
completed
assessment assessment
Module Assessment
completed completed
home

Adding Images | Yext Hitchhikers Platform

What You’ll Learn

In this section, you will learn:

  • How to add and reference images in your pages and cards
  • How to add static files on your site

Adding Images

You might want to add custom imagery for the standard icons on your site: for example, the search bar icon, the title bar icons, or icons that appear on your cards.

In order to do this, you’ll need to add the images to your site so that they can be referenced.

  1. Upload an image file to your /static/assets/images folder. Your images will have a path of /static/assets/images/filename.extension. searchbar icon

  2. Reference the image with the following structure static/assets/images/filename.extension. You can use this wherever the library is expecting an image URL. Below is an example of referencing a custom icon replacing the Search Bar magnifying glass.

Code

"SearchBar": {
  "placeholderText": "Search", // The placeholder text in the search bar
  "customIconUrl": "static/assets/images/magnifying_glass.svg"
}

Result searchbar icon

Note - you must place images in the specific folder path (static/assets/images), otherwise they will not be accessible for use on your site.

unit Quiz
+20 points
Daily Quiz Streak Daily Quiz Streak: 0
Quiz Accuracy Streak Quiz Accuracy Streak: 0
    Error Success Question 1 of 2

    True or False: You can add custom images to your Search experience.

    Error Success Question 2 of 2

    What folder do images need to live in?

    A Hitchhiker in the making! 🔥

    You've already completed this quiz, so you can't earn more points.You completed this quiz in 1 attempt and earned 0 points! Feel free to review your answers and move on when you're ready.
1st attempt
0 incorrect
Feedback
<% elem.innerText %>