blog implementation: image as content item rendering with black border; suggestions?

Options
Rachel Hassinger
Rachel Hassinger
Ancient Membership First Comment Facilitator Level 1
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions

ello,

We created a new "blog" content type, which contains an "image" SelectList property.

The SelectList pulls a set of content items based on an image-only folder in our WSM.

I want one of the list display templates to call that "image" field, and to display the image, linking to the URL of the "blog" content item. The image is appearing and linking, however, it is rendering with a black border. I have tried adding inline CSS to specify no border in the <a> tag but it is not working.

Is there a way to control the border of an image when it is used as a content item?

(Prior to this, when we called a word-limited excerpt of the body for the list template, the image in the <<body>> field automatically appeared in the list template. However, we want to go with a separate <<description>> field for the list template, and therefore need the option for an image select (that is borderless) in the list template.

Any suggestions?

Thank you!

Rachel Hassinger

Tagged:

Comments

  • Elizabeth Makayed
    Elizabeth Makayed
    Ancient Membership 100 Comments Photogenic Facilitator Level 3

    Rachel,

    There are two ways that you can address your problem:

    1. Add style in your css file for image and assign it border to be none. Ex: .blog img {border: none}, to set border to 0 for all images on your site img {border: none} will do the trick
    2. Update the source of your list template to look something like this <a href="${url}"><t:list id="name-of-image-field"><img src="${url}" alt="${name-of-alt-text-field}" border="0" /></t:list></a>

    Sincerely,

    Elizabeth

  • Rachel Hassinger
    Rachel Hassinger
    Ancient Membership First Comment Facilitator Level 1
    Elizabeth M:

    Rachel,

    There are two ways that you can address your problem:

    1. Add style in your css file for image and assign it border to be none. Ex: .blog img {border: none}, to set border to 0 for all images on your site img {border: none} will do the trick
    2. Update the source of your list template to look something like this <a href="${url}"><t:list id="name-of-image-field"><img src="${url}" alt="${name-of-alt-text-field}" border="0" /></t:list></a>

    Sincerely,

    Elizabeth

    Thank you, Elizabeth!

Categories