Using Images in Cards
This tutorial aims to instruct you on referencing application static files as card images in Oracle APEX. In Oracle APEX, static files encompass uploaded and internally stored resources within your application, serving multiple functions, including images, CSS stylesheets, JavaScript files, and other static assets essential for your application. These static files enable the presentation of card images within your APEX application. By utilizing the image source property, you can indicate the static file path using the suitable substitution string. This is the process for establishing and employing static files for card images in Oracle APEX.
SQL Query
==========================================
select 'fa-apex' icon_class,
:APP_IMAGES || file_name image_url
from apex_application_static_files
where file_name = 'apex-mountain-range_light.png'
and application_id = :APP_ID
CSS Inline Code
==========================================
.urlImages .a-CardView-media--widescreen:before {
padding-top: 20%;
}
.urlImages .a-CardView-iconWrap {
margin-top: calc(var(--a-cv-icon-container-size) / 2 * -1 - var(--a-cv-header-padding-y));
}
.urlImages .a-CardView-icon {
box-shadow: #fff 0 0 0 4px;
}
.apex-theme-redwood-light .urlImages .a-CardView-icon {
background-color: #508223;
color: #fff;
}
HTML Expression (Title)
==========================================
h3 class="a-CardView-title " What is Oracle APEX? /h3
Media URL
=========================================
&IMAGE_URL!ATTR.
