Announcement

Collapse
No announcement yet.

Background section image

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Background section image

    Hi,

    I have created a new section link layout and have used the variable <actinic:variable Name="SectionImageFileName"/> in the css as a backgound image. The image is showing up in ff and IE 7 & 8 but not in the Actinic preview pane.

    Can anyone explain why?

    I have used the following code for my new layout:

    <style type="text/css">
    .section-bg {
    padding: 0;
    margin: 0;
    border: 0;
    height: 100px;
    width: 150px;
    background: url('<actinic:variable Name="SectionImageFileName"/>') 0 0 no-repeat;
    }
    </style>

    <table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
    <td class="section-bg" align="center" valign="top" width="150" height="69">
    <a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self">
    <img src="thumbnail-swirlv2.png" alt="<actinic:variable name="SectionName" encoding="strip"/>" border="0"/>
    </a>
    </td>

    <td style="padding: 5px;" align="left" valign="top" width="90%">
    <b><a href="<actinic:block if="%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e" ><actinic:variable name="SectionPageName" /></actinic:block><actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsLoginPageSuppressed%22%20%2f%3e%20%3d%3d%20false%29%20OR%0d%28%3cactinic%3avariable%20name%3d%22UnregCustomersAreNotAllowed%22%20%2f%3e%20%3d%3d%20false%29" ><actinic:variable name="SectionURL" /></actinic:block>" target="_self"><actinic:variable name='SectionName'/></a></b><br />
    <actinic:variable name='SectionDescription'/>
    </td>
    </tr>
    </table>

    Thanks!!!!

    #2
    Is the image in the site folder?

    Does it appear if you hard code the filename?
    Alan Johnson

    Quality Parrot Cages & Accessories by Parrotize UK
    Pet Accessories by Animal Instinct

    Comment


      #3
      Originally posted by Ashley.Peters View Post
      Hi,

      I have created a new section link layout and have used the variable <actinic:variable Name="SectionImageFileName"/> in the css as a backgound image. The image is showing up in ff and IE 7 & 8 but not in the Actinic preview pane.

      Can anyone explain why?


      Thanks!!!!
      This is a common problem with Actinic and lies with the way it handles the code for preview, I have solved a lot of these problems by copying the external css files to the DesignPreview and Preview folders. You will also need to copy any images referenced in the external css files into the folders as well.

      When actinic generates the html code in the designpreview and preview folders it does not set the paths to the external css files correctly, it does sort out most other files including images referenced in the main code, but not those referenced in the external css files.

      Malcolm

      SellerDeck Accredited Partner,
      SellerDeck 2016 Extensions, and
      Custom Packages

      Comment


        #4
        Hi,

        I have used the actinic css which is already in the DesignPreview and Preview folders along with my images.

        Any other ideas?

        Comment


          #5
          Yep the images are in the site folder, and not even showing up in the preview pane when hardcoded.

          Comment


            #6
            Do you think contradicting size (css vs hard coded) and the image added into the cell as well as the background image may well be to blame?

            Comment


              #7
              I have removed the contradicting size as per you suggestion. Still no change.

              Using the ff extenstion firebug i have viewed the css and on one section where the background image is appearing correctly, the Section Image filename i have selected is showing the right filename. On the other sections the css is putting in the default section image filename in, even though i have specified otherwise!

              I'm starting to think this maybe impossible...

              Comment


                #8
                here is a link to the page it's working on....
                http://207.45.176.234/~teawamut/acat...UR_REGION.html

                here is a page its not working on....
                http://207.45.176.234/~teawamut/acat...O_AND_SEE.html

                Let me know if you guys have any ideas

                Thanks

                Comment


                  #9
                  I am not sure why you are adding the section image as a background and adding a default swirl.png over the top!!! .... surely you add the constant swirl.png as the background and drop the section image in on top as a straight <img>



                  Bikster
                  SellerDeck Designs and Responsive Themes

                  Comment


                    #10
                    In ff3 all I see is the default swirl.png on both linked pages


                    Bikster
                    SellerDeck Designs and Responsive Themes

                    Comment


                      #11
                      Try
                      Code:
                      background: url('<actinic:variable Name="SectionImageFileName" selectable="false" />') 0 0 no-repeat;
                      as this stops Actinic adding some extra code when generating the design preview HTML.

                      To see what's actually being generated look at the source of DesignPreviewHTML/P_index.html
                      Norman - www.drillpine.biz
                      Edinburgh, U K / Bitez, Turkey

                      Comment


                        #12
                        image is a png, i didn't think actinic supported png. try it with a gif or jpg

                        I must admit i am as confused as jont, i dont really understand why you are using a section image as a background image

                        Comment


                          #13
                          Ok guys, from a design point of view i am trying to add some fair the the ugly section links.

                          Yes it would be alot more straight forward to just have the background image and swirl as one image but I am designing this site for a client who has no understanding of the use of photoshop or any other graphic creating software, so I have to make this as easy for her to maintain as possible; which would be for the section image to show up as a background image and why shouldnt it work!

                          Also, since when has actinic not supported png's? As you can see in the header there is translucent swirl png over the header image (which is a variable so the image that can be changed by the client) and I am trying to recreate this sort of theme throughout the site.

                          Comment


                            #14
                            Hi again,

                            Still tinkering with the website. I have got the background image to show up in ff & IE but still not in the actinic preview pane. Unfortunately came across another problem...actinic is putting in the default section image which is specified in the site options opposed to on the section level itself where I have specified otherwise.

                            hmmmmm......

                            Comment


                              #15
                              I can see your reason for the background image specified at the section level so it shows beneath the transparent PNG. But you have 1 class of CSS declaring the images for the backgrounds in the stylesheet ... it will never change on a section by section basis if it is declared from the one style (it is part of the cascade).

                              As all the images are the same size set the section image into the <img> tag and in a surrounding <div> set the swirl.png using positioning to place it over the top of the section image. I use this method to drop a enlarge icon over product images using the lightbox effect to indicate it can be enlarged.


                              Bikster
                              SellerDeck Designs and Responsive Themes

                              Comment

                              Working...
                              X