Single Topics Page: Editing the HomeImages Slider Content

For sites using a single Topics page (HomeImages) to manage the slider, the images/banners and links are in an "un-ordered list" (in the HTML code) that is programmed to "slide" and display properly on your site. In the (Design) editor, the images will appear in a "stack," and each image is surrounded by its corresponding link, (URL) which in turn is surrounded by the "list item" designation. (possibly more than you wanted to know, but important to note, none the less!)

To change the images/banners and target links (URLs) in the HomeImages 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 HomeImages from the page listing on the left side of the page 
  4. In the editor window, select/highlight the image to be replaced 
  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 should look in the HTML: (Click the **HTML <>** button at the bottom of the editor to switch to this mode)

<ul> 
     <li> 
          <div class="slidercontent"><a href="m-45-bsn.aspx"><img alt="" src="/Images/slider-bsn.jpg" /></a></div> 
     </li> 
     <li> 
          <div class="slidercontent"><a href="m-258-dymatize.aspx"><img alt="Dymatize" src="/images/slider-dymatize.jpg" /></a></div> 
     </li> 
     <li> 
          <div class="slidercontent"><a href="m-54-gaspari-nutrition.aspx"><img alt="GN" src="/images/slider-gn.jpg" /></a></div> 
     </li> 
     <li> 
          <div class="slidercontent"><a href="m-6-iss.aspx"><img alt="BSN" src="/images/slider-iss.jpg" /></a></div> 
     </li> 
     <li> 
          <div class="slidercontent"><a href="m-80-axis-labs.aspx"><img alt="BSN" src="/images/slider-slingshot.jpg" /></a></div> 
     </li> 
</ul>

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

  • <ul> designates an un-ordered list (</ul> closes the un-ordered list) 
  • <li> designates a "list item" and </li> closes each list item 
  • <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

Article is closed for comments.
Powered by Zendesk