CODEWITHSUNDEEP
oracle-apex-5.1
Coding Duchess
Coding Duchess

Reputation: 6919

Oracle APEX - Display card image from the dynamic list

I am displaying a list on my page in the format of cards but the image is not showing up - only a grey circle. Here is my query for the dynamic list:

SELECT null as level_value, 
   TITLE as label, 
   null astarget, 
   null as is_current, 
   IMG_PATH as image, 
   'width="40" height="40"' image_attribute, 
   TITLE as image_alt_attribute,
   DECRIPTION as attribute1
FROM  TABLE1
ORDER BY TITLE

I also tried:

SELECT null as level_value, 
   TITLE as label, 
   null astarget, 
   null as is_current, 
   '<img src="' || IMG_PATH || '"/>' as image, 
   'width="40" height="40"' image_attribute, 
   TITLE as image_alt_attribute,
   DECRIPTION as attribute1
FROM  TABLE1
ORDER BY TITLE

I have noticed when inspecting the page that APEX adds my image tag to the class of a span:

<span class="t-Icon <img src='my image path' />">

instead of just adding an image to the card

Upvotes: 0

Views: 6597

Answers (2)

Coding Duchess
Coding Duchess

Reputation: 6919

I found a solution. Actually two solutions.

1) Modify dynamic list to utilize CARD_INITIALS and attributes

SELECT null as level_value, 
  TITLE as label, 
  null astarget, 
  null as is_current, 
  IMG_PATH as CARD_INITIALS, 
  'width="40" height="40"' image_attribute, 
  TITLE as image_alt_attribute,
  DECRIPTION as attribute1,
  '' as attribute2,
  '<img src="' || IMG_PATH || '"/>' as attribute3
FROM  TABLE1
ORDER BY TITLE

Setting both CARD_INITIALS and attributes3 that way was necessary - other combinations did not work properly.

Then, in List region attributes, set List template to Cards, style to featured, and Icons to - Display Initials.

2) Classic report - setting its attributes to Cards template and using CARD_INITIALS, CARD_TITLE, and CARD_TEXT as aliases in the source query. Both methods produce desired results

Upvotes: 2

romeuBraga
romeuBraga

Reputation: 2165

The appearance and structure of these lists are pre-defined. I think this list template understands an image as a css class. To work, you need to provide a valid css class

list of icons/class: https://apex.oracle.com/pls/apex/f?p=42:icons

EDIT.

Maybe you can copy this list template that you are trying to use and make the modification needed to get the url of an image. To do this, you need to go to shared components >> Templates >> Find your template list >> click on the last column of the report to copy >> Edit the html to receive the url of an image. On this page you will find several substituition strings.

The one that receives the "image" is something like #ICON_CSS_CLASSES#, but it is by default used in a "span" class, its change would be to create an "img" and put that substituition string in the "src" of that "img", something like 

<img src="#ICON_CSS_CLASSES#">

Upvotes: 0

Related Questions