Google Drive show image

Alec ElmoreAlec Elmore Member
edited October 2017 in Questions
I have successfully set-up a data source for Google Drive and am able to pull in the meta data to a card component.  Now i am trying to show a "thumbnail" of the file which then i can click on to see the image - would operate similar to wordpress media component.  thx for ideas.  

Comments

  • edited October 2017
    Alec,

    Add the Image component to your card.  You'll just need the 'path' (URL) to your file.  Here is an example based on Users in Salesforce.

    Thanks,

    Bill
    <skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true">
        <models>
            <model id="Users" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="User">
                <fields>
                    <field id="AboutMe"/>
                    <field id="IsActive"/>
                    <field id="Name"/>
                    <field id="SmallPhotoUrl"/>
                </fields>
                <conditions/>
                <actions/>
            </model>
        </models>
        <components>
            <deck searchmethod="server" searchbox="true" columngutter=".75em" rowgutter=".75em" model="Users" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="350px" uniqueid="sk-1JIRU5-118" buttonposition="" pagesize="10">
                <components>
                    <grid uniqueid="sk-1JIU9g-130">
                        <divisions>
                            <division behavior="specified" verticalalign="top" width="100px">
                                <components>
                                    <image source="url" uniqueid="sk-1JIYkw-142" datasource="salesforce" behavior="none" model="Users" url="{{SmallPhotoUrl}}">
                                        <styles>
                                            <styleitem type="itemsize"/>
                                            <styleitem type="border"/>
                                        </styles>
                                    </image>
                                </components>
                            </division>
                            <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                                <components>
                                    <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Users" buttonposition="" uniqueid="sk-1JId6G-157" mode="read">
                                        <columns>
                                            <column width="100%">
                                                <sections>
                                                    <section title="{{Name}}" collapsible="no">
                                                        <fields>
                                                            <field uniqueid="sk-1JIk0p-189" id="AboutMe"/>
                                                        </fields>
                                                    </section>
                                                </sections>
                                            </column>
                                        </columns>
                                    </basicfieldeditor>
                                </components>
                            </division>
                        </divisions>
                        <styles>
                            <styleitem type="background" bgtype="none"/>
                        </styles>
                    </grid>
                </components>
                <massactions/>
                <interactions/>
                <actions/>
                <styles>
                    <styleitem type="border"/>
                </styles>
            </deck>
        </components>
        <resources>
            <labels/>
            <javascript/>
            <css/>
        </resources>
        <styles>
            <styleitem type="background" bgtype="none"/>
        </styles>
    </skuidpage>
Sign In or Register to comment.