The images you add to your database BLOB columns might have different sizes. When you try to display these images in an interactive report, they appear in their original sizes causing an odd presentation of the interactive report. This tutorial will provide you a tip to scale these different-sized images on your interactive report. You will perform the instructions for this section on Page 3 (Products) in the Sample Database Application, which displays images of products.
1.
Open the Products page
(Page 3).
2.
Select the Products interactive report region, and modify the SQL
Query of this region
as follows. The change from the previous query is marked in bold.
select p.product_id, p.product_name, p.product_description, p.category,
decode(p.product_avail, 'Y','Yes','N','No') product_avail, p.list_price,
(select sum(quantity) from demo_order_items
where product_id = p.product_id) units,
(select sum(quantity * p.list_price) from demo_order_items
where product_id = p.product_id) sales,
(select count(o.customer_id) from demo_orders o, demo_order_items t
where o.order_id = t.order_id and t.product_id = p.product_id
group by p.product_id) customers,
(select max(o.order_timestamp) od from demo_orders o, demo_order_items i
where o.order_id = i.order_id and i.product_id = p.product_id) last_date_sold,
p.product_id img,
apex_util.prepare_url(p_url=>'f?p='||:app_id||':6:'||:app_session||'::::P6_PRODUCT_ID:'||p.product_id) icon_link,
DBMS_LOB.getlength(p.product_image) product_image,
decode(nvl(dbms_lob.getlength(p.product_image),0),0,null, apex_util.get_blob_file_src('P6_PRODUCT_IMAGE',p.product_id)) detail_img_no_style
from demo_product_info p
3. In the same Products interactive report region, scroll down to Header and Footer section, and enter the following CSS code in the Header Text property. Since version 5.0, APEX uses internal IDs in the ID
attributes of IR table header cells instead of column aliases. In the following
code, we used IMAGES as the internal ID to format the PRODUCT_IMAGE column.
<style type="text/css">
.a-IRR-table td[headers="IMAGES"] img
{
vertical-align:
middle;
border:4px
solid #CCC;
border-radius: 4px;
height:75px;
width:75px;
}
</style>
4.
Expand the Columns node, select the PRODUCT_IMAGE column, and set the following attributes for this
column.
|
Property |
Value |
|
Type |
Display
Image |
|
Heading |
Product
Image |
|
Column Alignment |
Center |
|
Table Name (under BLOB Attributes) |
DEMO_PRODUCT_INFO |
|
BLOB Column |
PRODUCT_IMAGE |
|
Primary Key Column 1 |
PRODUCT_ID |
|
Static ID |
IMAGES |
Save and run the page. Add images of different sizes to the products table and then call the interactive
report. All images will now be scaled alike, irrespective of their sizes.
For Visual Instruction Watch This Video
