Google Drive show image

  • 1
  • Question
  • Updated 1 year ago
  • Answered
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.  
Photo of Alec Elmore

Alec Elmore

  • 120 Points 100 badge 2x thumb

Posted 1 year ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,426 Points 10k badge 2x thumb
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>