This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Yasin Arık
Posted Jan 05 - Read on Facebook

SOLVED: .slice() and parseFloat() commands do the job.

Hello everyone,

I want to create a mini database for my prototype.

I have plenty amount of image (more than 150) and I want to place them into photo holders in an order.

Let's assume there are some rows and columns to be created by code using loops.

What came into my mind is that if its possible, I want to give such names (or ID numbers) to my image files that "says" the row number and column number (maybe parsing the ID string but I don't know).

For ex. photo name list = [101 102 103 201 202 301 302 303 304 305 401 402 403 404]

When it reads "101" it is the first row and first column.

101 102 103

201 202

301 302 303 304 305

401 402 403 404

How can I make this conversion in Framer? You can tell the solution or ideas generally. If you go in to details, it would be a favor but the general logic and maybe some commands are enough for me to research.

Thank you sooo much :)

*************************************************************************

EDIT: It will be a custom layout. I can already generate posts and photoPages with random numbers and random photos. Now, things are going to be more specific.

The first number in "401" is "4" which will be telling Framer to do a for loop for 4 times. This will generate 4 Instagram posts.
The last number in the ID will be telling Framer (For ex. in "305" it is "5") to do a for loop 5 times.

In this way, I will be able to create Instagram posts and photo pages in each Instagram post just by using a photo ID list.

I will update the photo ID list. I do not want to use hard coding which tells how many photos will be in that particular post and how many posts will be created.

Lastly, I will simply call and place all of the images to their places that I create.

4 Comments

Anton Kosarchyn

Are you trying to create some custom layout or just regular grid with this method?

Karina Kozinsky

Unfortunately can't share the prototype, hope you can understand from this picture

Anton Kosarchyn

Here you go. Is that what you're looking for?
https://framer.cloud/CaGtE

Josef Richter

"Lets say the ID of a photo is "p02003" . If I can divide this string into smaller meaningful parts like "p", "02", "003" this will work flawlessly." – so why don't you just take the numbers from the filename? using slice() or something similar on filename string and converting it to integer?

Read the entire post on Facebook