5 Replies Latest reply on Feb 13, 2019 5:47 PM by fac586

    Placing an icon at the top of a picture.

    Joshsmith10013

      I have a classic report displaying a picture in each row.  I want to be able to place an icon in the top corner of the picture to indicate that it is more important than the rest.  I'm assuming this would need to be done using JavaScript?

       

      Thank you all in advance!

        • 1. Re: Placing an icon at the top of a picture.
          fac586

          Joshsmith10013 wrote:

           

          I have a classic report displaying a picture in each row. I want to be able to place an icon in the top corner of the picture to indicate that it is more important than the rest. I'm assuming this would need to be done using JavaScript?

          No, I don't see any reason why JavaScript would be involved.

           

          APEX version? Theme? Report template?

           

          What is the purpose of the pictures? What image format(s) are involved? Where are they sourced from?

           

          For accessibility reasons, is the information transmitted by the pictures (and the proposed icon) available through other channels?

          • 2. Re: Placing an icon at the top of a picture.
            Joshsmith10013

            APEX version 18.2.  Theme: Desktop Standard.  Report Template: Standard.

             

            The pictures are being pulled directly from a table to show car parts.  Multiple pictures can be mapped to one car part, but I want to be able to click on a picture to designate it as the primary picture to be displayed on another page.  The icon in the upper corner of the picture would indicate which one is the primary picture after it was clicked on.  I was just planning on using one of the icons provided by Oracle to make things simpler.  The pictures have variable formats but are usually jpegs.

            • 3. Re: Placing an icon at the top of a picture.
              fac586

              Joshsmith10013 wrote:

               

              APEX version 18.2. Theme: Desktop Standard. Report Template: Standard.

               

              The pictures are being pulled directly from a table to show car parts.

              How are they displayed in the report?

              • 4. Re: Placing an icon at the top of a picture.
                Joshsmith10013

                Pic Report.PNGThe query looks like this:

                select 'Delete' Delete_button, ID, dbms_lob.getlength(defectpic) defectpic

                from dummy_defect_pics

                where ID = :P3_ID;

                • 5. Re: Placing an icon at the top of a picture.
                  fac586

                  Joshsmith10013 wrote:

                   

                  Pic Report.PNGThe query looks like this:

                  select 'Delete' Delete_button, ID, dbms_lob.getlength(defectpic) defectpic

                  from dummy_defect_pics

                  where ID = :P3_ID;

                  Declarative BLOB images do not offer much scope for customisation, so as demonstrated in this example, I would suggest changing the image source in the query to a hidden apex_util.get_blob_file_src column (PHOTO_URL):

                   

                  select
                      null photo
                    , apex_util.get_blob_file_src('P138_PRODUCT_IMAGE', p.product_id, null) photo_url
                    , p.product_name
                    , p.product_description
                    , p.category
                    , p.product_id
                  from
                      demo_product_info p
                  

                   

                  An HTML Expression applied to the empty PHOTO column contains the mark-up used to render the image and icon as accessibly as possible:

                   

                  <a class="photo">
                    <span><span class="fa fa-bookmark"></span></span>
                    <img src="#PHOTO_URL#" alt="#PRODUCT_DESCRIPTION#" />
                    <em class="u-VisuallyHidden">Primary photo</em>
                  </a>
                  

                   

                  Then a style sheet in the page Inline CSS attribute positions the icon overlay:

                   

                  .photo {
                    position: relative;
                  }
                  .photo span {
                    position: absolute;
                  }
                  .photo .fa {
                    top: -2px;
                    left: 6px;
                  }
                  .photo img {
                    border: 1px solid #ddd;
                    padding: 8px;
                    background: #fcfcfc;
                  }
                  

                   

                  However, that gives us an icon on every picture. How do we know which pictures are "mapped to one car part" so that only picture at a time is flagged as "primary"? How do we identify which pictures are primary? How do we change and store the selection?