Announcement

Collapse
No announcement yet.

Adding custom 'Alt-tags' (alt attributes) to product images

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

    Adding custom 'Alt-tags' (alt attributes) to product images

    The image 'Alt-tag' in HTML (strictly speaking, the alt attribute) is primarily designed for screen readers used by the blind and partially sited. However, they are also used by search engines in assigning rank to pages. By default, SellerDeck uses the name of the associated object for image alt attributes (eg the product name for product images). Using custom variables and conditions, however, it is fairly easily to add the ability to modify them.

    Adding a new variable for the Alt-tag text
    1. From the SellerDeck v8 Design menu, select ‘Library’
    2. Click the ‘Variable’ tab
    3. Right-click on ‘Product’ and select ‘New Variable’
    4. Against ‘Name’, type ‘ProductImageAlt-tag’
    5. Against ‘Description’, enter something like this: ‘Define content for the product image alt-tag.’
    6. Against ‘Prompt’, type ‘Enter an image description for the alt-tag’
    7. For ‘Place of Setting’, tick ‘Product’
    8. Remove the tick against ‘Allow <Use Parent> as an Option’
    9. Check that ‘Tab Name’ is set to ‘Properties’
    10. Click ‘OK’ and ‘Close’

      In the Content tab, click on the ‘Starter Computer Bundle’ in the Content Tree and click on its Properties tab. You will see that you can now enter text for the alt attribute for the product. Enter something different from the product name, eg ‘Entry-level Computer Package’

      Displaying the new variable with each product

      To make SellerDeck use this variable for the product image alt attribute, instead of the product name (which is the default), do the following.

    11. Click on the ‘Design’ tab
    12. Click on a product image in the ‘Page Preview’ pane
    13. In the Layout Code pane, find BOTH lines that say alt="ProductName" />
      (If the code reads alt="<actinic:variable name="ProductName" />" />, click the icon to toggle the Layout Code pane to Basic view)
    14. Delete ‘ProductName’, leaving the cursor between the quotes that surrounded it, and type ‘ProductImageAlt-tag’ (the variable you just created).
    15. Click Apply

      Preview the page in Internet Explorer and move the mouse over the image of the Starter Computer Bundle. You should see the text you entered for the Alt-tag.

      Retaining the original default as an option

      So far we have simply replaced the default with a custom Alt-tag. Now, if the user does not explicitly enter some custom Alt-tag text, none will appear.

      We can arrange for the Product Name to still appear as the default if nothing is specified by the user, using SellerDeck v8’s powerful 'Block if' feature.

    16. Highlight the first instance in the code of alt="ProductImageAlt-tag", delete it, and press Enter to add a new line
    17. Place the cursor on the new line and click the ‘Insert Block’ button
    18. Click the ‘Insert Variable…’ button
    19. In the pop-up list, find and double-click on the ProductImageAlt-tag variable
    20. Click the drop-down, and select ‘Is Empty’
    21. Click ‘OK’
    22. Between the 'block if' and '/block' tags, Type alt="ProductName"
    23. Place the cursor after the '/block if' tag and press Enter to insert a new line
    24. Place the cursor on the new line and click the ‘Insert Block’ button
    25. Click the ‘Insert Variable…’ button
    26. In the pop-up list, find and double-click on the ProductImageAlt-tag variable
    27. Click the drop-down, and select ‘Is Not Empty’
    28. Click ‘OK’
    29. Between the 'block if' and '/block' tags, Type alt="ProductImageAlt-tag"
    30. Click ‘Apply’


    You have now defined conditions specifying that if the ProductImageAlt-tag is empty (no text has been entered), the Product Name will be displayed for the alt-tag; but if ProductImageAlt-tag is not empty, then whatever has been entered for it will be used.

    To see this in action, preview the page in Internet Explorer and move the mouse over the image of the Starter Computer Bundle. You should still see the text you entered for the Alt-tag. Move the cursor over the Professional Computer Bundle (for which no Alt-tag has been defined), and you should see the product name ' Professional Computer Bundle' appear.
    Attached Files
Working...
X