Loading ...

Avatar to thumbnail | Communifire Support

Communifire Support

Leave Space :

Are you sure you want to leave this space?

Join this space:

Join this space?

Add a new tab

Add a hyperlink to the space navigation. You can link to internal or external web pages. Enter the Tab name and Tab URL. Upload or choose an icon. Then click Save.

The name that will appear in the space navigation.
The url can point to an internal or external web page.
Login to follow, share, and participate in this space.
Don’t have a support community login?Create your account now
Posted in: Communifire API & Developers

Avatar to thumbnail

Subscribe to RSS
  • cbunts

    Hi, 

    I have a custom Content List widget that displays space images in an avatar format.

    <li>
    <div class="axero-section-list-avatar">
    <a href="{{ContentURL}}" title="{{{Title}}}">
    <img src="{{ContentImageURL}}" alt="{{{Title}}}" />
    </a>
    </div>
    <div class="axero-section-list-content">
    <div class="axero-section-list-content-title">
    <a href="{{ContentURL}}" title="{{{Title}}}">{{{Title}}}</a>
    </div>
    <div class="axero-section-list-content-date">
    {{{Summary}}}
    </div>
    </div>
    </li>

      I have tried to change that to a small thumbnail view but my title and summary are placed below the image.  Is there size override that the avatar has that the thumbnail does not?

    Any advice?

     

  • gskamau

    Hey Chris,

    Could you clarify what you want to do? Do you want the title and summary to appear to the right of the thumbnail?

    Grace

  • cbunts

    Hi Grace,

    Yes, I would like to have the title and summary right of the thumbnail.  I created another template and copied the same code from that custom widget (the copied code in this message and only removed the avatar.  I was expecting the title and summary to show at the right as it did with the Avatar.  I got the desired square thumbnail but the text went below.  

  • gskamau

    Hey Chris,

    Could you provide the full HTML code of the template and any CSS overrides that are applied to the template or to the custom widget you copied the template code from?

    Grace

  • cbunts

    This is the code for the avatar widget.  I did not put in any CSS overides for either.

    <div class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
    <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    <div class="axero-widget-content">
    <div class="list">
    <ul>
    {{#each Contents}}
    <li>
    <div class="axero-section-list-avatar">
    <a href="{{ContentURL}}" title="{{{Title}}}">
    <img src="{{ContentImageURL}}" alt="{{{Title}}}" />
    </a>
    </div>
    <div class="axero-section-list-content">
    <div class="axero-section-list-content-title">
    <a href="{{ContentURL}}" title="{{{Title}}}">{{{Title}}}</a>
    </div>
    <div class="axero-section-list-content-date">
    {{{Summary}}}
    </div>
    </div>
    </li>
    {{/each}}
    </ul>
    </div>
    </div>
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">

    </div>
    {{/if}}
    </div>

    This is the modified code

    <div class="axero-widget {{CustomCSSClass}} {{#if HideContainerBorder}}axero-widget-no-border{{/if}}">
    {{#if ShowWidgetHeader}}
    <div class="axero-widget-header">
    <h3>{{{WidgetTitle}}}</h3>
    </div>
    {{/if}}
    <div class="axero-widget-content">
    <div class="list">
    <ul>
    {{#each Contents}}
    <li>
    <div class="axero-section-list-thumbnail">
    <a href="{{ContentURL}}" title="{{{Title}}}">
    <img src="{{ContentImageURL}}" alt="{{{Title}}}" />
    </a>
    </div>
    <div class="axero-section-list-content">
    <div class="axero-section-list-content-title">
    <a href="{{ContentURL}}" title="{{{Title}}}">{{{Title}}}</a>
    </div>
    <div class="axero-section-list-content-date">
    {{{Summary}}}
    </div>
    </div>
    </li>
    {{/each}}
    </ul>
    </div>
    </div>
    {{#if ShowWidgetFooter}}
    <div class="axero-widget-footer">

    </div>
    {{/if}}
    </div>

     

  • gskamau
    Answered

    Hey Chris,

    Follow the steps below.

    1. Go to Control Panel > System > Page Builder Templates and select the modified template.
    2. In line 1, add a space after axero-widget and enter axero-widget-avatar .
    3. Save the template.
    4. Add the following code to Control Panel > System > CSS Overrides :
      .axero-widget-avatar .axero-section-list-thumbnail {float: left;}
      .axero-widget-avatar .list ul li .axero-section-list-content {margin: 5px 0 0 220px;}
    5. Click Save CSS Overrides.

    You may need to increase or decrease 220px depending on the size of the thumbnail.

    Grace

  • cbunts

    Thanks Grace - your suggestion worked

Page 1 of 1 (7 items)