Hello! 
I’m wanting to add images to my Elm app. There are three ways of doing this that come to mind:
Pass your images in as flags as you might do with Create-elm-app or Parcel and use relative paths.
Throw them into an object storage service and use absolute paths.
Use variables throughout your application and use a build tool to replace the URLs before serving them.
What are you doing? Is there an ideal path?
Thoughts on the above:
1. Works even without an internet connection, but I don’t really want to use relative links, since I generally use a separate object storage and CDN distribution for my static assets when projects are in production.
2. Your images won’t load if the internet goes down, however, you don’t have to worry about where the images are located when you get to the production stage. To mitigate this, you could have separate URLs/buckets for dev, test, and prod environments.
3. In a previous project, I decided on #3. I was using Gulp then. In my current project, I’m using Parcel, and I suppose I could write a plugin to perform the same task.
I don’t think #1 or #2 prevent you from needing something like #3, but maybe I’m wrong.
It would be helpful to know a little bit more about what you plan to do with your images. Do you have a list of images you want to display in a gallery? Are there a set of logos or other static elements you want do just have around and display wherever they are needed and it’d be helpful to just reference them without worrying about the specifics? Do you need any other information about the image other than its URL (size, aspect ratio, EXIF data etc)?
For example, I have an Elm powered gallery that I need to generate a list of images for, with a bunch of information that needs to be stored for navigation etc. Initially I was generating a json file that I’d get my app to read on startup, then do some work to grab all the info. That’s a bit of an expensive task, so now I actually generate an entire manifest.elm module that builds everything into my app programmatically.
This rust function does most of the work, which I just call from a makefile every time I add new images.
Happy to go into more detail if that’s a path that makes sense for your situation. In general though, I don’t think there’s any common pattern or best practice for this at the moment.
@Libbum Your Odyssey project is incredible! If you were to turn that into a service with user profiles and users could upload their own photos, what would change about your approach to your images?
I was thinking that if I needed to fetch images dynamically, I would associate a database resource with a set of links referencing objects in my object store, You seem to be generating information about images at compile time by traversing all of the existing images and generating a Manifest.elm file.
Regarding clarification, my original thread was around static assets which I’m referencing within my application:
Thanks! Yeah, my use case allows me to do exactly what I need, aligning where the files are manually and simply rsync’ing them to where they need to be on my VPS.
User interaction requirements are going to change things dramatically from the way Odyssey functions.
The first thing I’d look at, is how you’re going to get images from the user. In that sense elm-file and perhaps elm-bytes are the fist place I’d look, although I’ve never personally worked with either package.
Those images, like you suggest—I’d put into a database resource server side. Either a base64 string or binary blob or a flat file with a unique identifier and an address stored in the database for it. Which solution I’d chose would be dependent on the backend properties though.
Depending on the size of your userbase, just passing a chunk of all user data as a flag into the init function is going to be the wrong way to go here.
My assumption is that you’ll have individual profile pages that need only one set of profile pictures/backgrounds, and then another view/page that will need a list of users, or at least assets from a subset of users. For example this forum thread needs both of our logos but not background images (if we had them set up).
This, to me means you’ll need a backend serving you these details when you need them, and not all at once. A Http.Request on page-load/route change rather than on init. Something with a simple REST API serving a JSON list of locations/other info, which can then be decoded would work fine. A more modern approach would be looking into elm-graphql.
This wasn’t one of your suggested methods though, so maybe you have other requirements I’m not aware of. I don’t think any of these ways are ‘the best’, since setting up my current suggestion is going to be more cumbersome than the other solutions we’ve discussed, although I think it’ll scale more as you change what you want to do with the data, on the other hand some of the simpler solutions are going to have performance issues once you get out of testing.
Happy to discuss designing things further. Perhaps a few people could comment on their interactions with elm-file so far?
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.