Multiple Topics pages: Editing SliderImageX Slider Content

For sites using a multiple Topics pages (SliderImage1, SliderImage2, SliderImage3, etc) to manage the slider content, the system combines the images & links into a single slider on your site. In the (Design) editor of each SliderImageX, there will be one image that is surrounded by its corresponding link. (URL)

To change the images/banners and target links (URLs) in a SliderImageX Topic:

  1. Login to the ASPDNSF Administrative Console via https://www.<your-website>/config
  2. Select Content >> Manage Topics from the main navigation 
  3. Select the appropriate SliderImageX from the listing on the left side of the page 
  4. In the editor window, select/highlight the image
  5. Click the Image Manager icon (sun over 2 mountains) in the top row of the toolbars in the editor 
  6. Click the Upload button (green circle w/white plus sign) 
  7. Click the Choose File button (light gray) and browse to the image you wish to upload (on your computer/network) 
  8. Double-click the file you wish to upload
  9. Click the Upload button (dark-gray) 
  10. If desired, type in Image Alt Text (which will appear when an individual hovers over the image on the site) 
  11. Click the Insert button 
  12. Select/highlight the newly uploaded/inserted image 
  13. Click the Hyperlink Manager icon (chain-links under a globe) in the top row of the toolbars
  14. Type (or paste) the target URL for the image (the page on which you want shoppers to land when they click the image) 
  15. Click the OK button 
  16. Scroll to the bottom of the page (under the editor window) 
  17. Click the Update Topic button (blue)

If after making changes, the slider ever "mis-behaves" and doesn't seem to work properly, here's the format of how the code should look in the HTML view of the editor: (Click the **HTML <>** button at the bottom of the editor to switch to this mode)

          <div class="slidercontent"><a href="m-45-bsn.aspx"><img alt="" src="/Images/slider-bsn.jpg" /></a></div> 

Here's what the various elements in the above code mean:

  • <div class="slidercontent"> is what classifies the image to appear in the slider
  • <a> designates a "link" to a "target url" (the url in the href="" designates the target ) and </a> ends each link 
  • <img> designates an image that will appear (and is what is "clicked" to get to the target url) NOTE: <img> tags to not have a "close" designator...they are "stand-alone" tags.
  • The bolded text indicates the page name (the target URL) of the hyperlink
  • The underlined text indicates the image (file) name that appears in the slider
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk