Community > Answers

How can we help you today?

Ask Question
Manage notifications
Subscribe to this question
97 views

Live Visualizer Display Images and Files Help

I am looking for more detailed information such as some sort of documentation that shows exactly how things can work inside the template files.

I am most interested in creating a simple gallery for example.  I am just not finding the support I need to get much done here beyond the basics.  Some bugs I believe I am waiting to get fixed possibly.

Examples are how and when to use Raw, ImagePath, AbsolutePath, RelativePath and ways to display files such as images that get uploaded when creating an item.

Cody Cody
asked 09/19/2020 20:08

endorsed by
  • Josiah Olhava
Add Comment
Last Activity 07/08/2021 22:14

1 Answer(s)

  • answered 09/27/2020 21:04
    Cody

    Figured out my issue, I was using "Upload" form instead of "Asset"

    After adding the "Asset" form I named it "Picture" and added the following to the visualizer to display it


                            @foreach(dynamic item in Model.WebsiteVisualizer_Submission["Picture"])
                            {
                                <img alt="picture" src="@item.RelativePath" class="img-fluid" />
                            }

    A side note is I wish the "Asset" form showed folders that are more user friendly instead of a folder number it showed a word instead of number like "User Root" for the users root folder.  And then inside that folder be able to create sub folders to help allow organizing listing information for users.

    Add Comment
    Katherine Prouty
    replied 07/08/2021 13:24

    I did the same thing at first! And I'm doing a proof of concept to let unsophisticated people add content. This doesn't make it easy.

     

    Have you figured out a way to automatically resize the images so they fit in the templates that are auto generated? These folks can't resize images. If they just upload a logo, it gets squished into that box and looks HORRIBLE>

    If I were a coder, I might be able to figure this out, but I'm not. I'm just a power user.

    Cody
    replied 07/08/2021 22:14

    I believe you can add the image inside a DIV container with a class that would layout the image as you like.   I believe using CSS class and adjust that as desired to fit pages as you like.  You can also use the bootstrap columns CSS Classes to help layout things so they move on mobile/desktop as you desire and keep aspect ratios of images that way.

    Images · Bootstrap (getbootstrap.com)

    Grid system · Bootstrap (getbootstrap.com)

     

    I think the grid system or something similar can help along with some image classes for "stretching" to fit as desired.  

    Hope this helps

    Reply
Add an Answer