Loading ...

Tile to show an image (which is also an uploaded file/asset) | Communifire Support

Home » Spaces » Communifire Support » forum » Features and Functionality » Tile to show an image (which is also an uploaded file/asset)
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: Features and Functionality

Tile to show an image (which is also an uploaded file/asset)

Subscribe to RSS
  • cconnors

    Tile to show an image (which is also an uploaded file/asset).  This seems like an easy one, but I don’t think I’ve seen it yet.  Although I have made a work-around with the HTML tile, but that required a link to the image somewhere else – if it could show a file that was uploaded in our community, that would be ideal.

  • gskamau
    Answered

    Hey Corey,

    You can do this by using the Photos content type and creating a custom Page Builder template based on the Stacked 4 Across Template . Follow the steps below.

    1. Edit your photo and add a unique tag
    2. Go to Control Panel > System > Page Builder Templates 
    3. Click Add a new template
    4. Enter a template name
    5. Under Widget Type, select Content List
    6. In Resource Keys CSV, enter GlobalAllSmallText
    7. In the editor, paste the following code (This is the Stacked 4 Across template without the details section)
    <div class="axero-widget {{CustomCSSClass}} axero-widget-no-border">
        
        {{#if ShowWidgetHeader}}
        <div class="axero-widget-header">
            <h3>{{{WidgetTitle}}}</h3>
        </div>
        {{/if}}
        
        <div class="axero-widget-content">
        <div class="ax-entity-rel-content">
            <ul class="thumbnails">
            
                {{#each Contents}}
                <li class="span3">
                
                    {{#if ContentFeaturedImage }}
                        <div class="thumbnail has-image">
                            <a class="img-container" href="{{ContentURL}}" title="{{{Title}}}" style="background-image: url({{ContentImageURL}})">
                                <img class="hide" src="{{ContentImageURL}}" />
                            </a>
                        </div>
                        
                    {{else}}
                    
                        <div class="thumbnail no-image">
                        </div>
                    {{/if}}
                    
                </li>
                {{/each}}
                
            </ul>
            </div>
        </div>
        
        {{#if ShowWidgetFooter}}
        <div class="axero-widget-footer">
            <a class="small hide" href="#">{{Resources.GlobalAllSmallText}} <i class="icon-double-angle-right"></i></a>
        </div>
        {{/if}}
        
    </div>
    1. Click Save Template
    2. Go to System > Page Builder
    3. Edit a page
    4. Click the Widgets tab
    5. Drag a Content List widget onto the page
    6. On the widget, click the gear icon > Edit Properties
    7. Under Content Types, select Photo
    8. Under Tags, enter the unique tag you used in step 1
    9. Click the Template tab
    10. Select the Page Builder template you created
    11. Click the Advanced Tab
    12. Uncheck Show Header
    13. Click Save Widget
    14. Click Publish changes

    Here's how the widget will look on the page when there are multiple photos with the unique tag:

    Grace

  • cconnors

    Thank you for these insights.  I believe this to be an area of really big potential for Communifire.  What you've shown me is a 21-step process to share a photo.  It would be great if your devs could boil this down to a more common 4- or 5-step upload scenario.  Having that will undoubtedly be much more useful and easy to a wider audience of users.  I'm happy to discuss my vision if that would be helpful.

    I accomplished the below with the HTML tile, but it was still really too many steps, and too much coding (just to put the Berkshire United logo in the page).

    Nicole Gavarrette 

  • tim-eisenhauer

    Hi  Corey Connors , would you be available for a call today? We would love to hear your vision. Let me know a time that works for you, and we'll make it happen. Thanks.

  • cconnors

    Absolutely.  I can be available at 11am, 2.30pm, or 3pm today.

  • tim-eisenhauer

    Great. We'd love to have a call. Are you in central timezone?

  • cconnors

    No.  I sit in our San Francisco office, so I'm just "right up the coast" from you.  PDT.

  • tim-eisenhauer

    Looking forward to talking. I just sent you an email with the details for the call. Thanks.

    Tim

  • mtrujillo
    Answered

    Hey Corey,

    Check out these helpful guides we just published that will help you add an image to your Page Builder page as well as create a quicklinks list. 

    How to add an image to a Page Builder page 

    How to add quicklinks to a Page Builder page 

Page 1 of 1 (9 items)