sambecker / exif-photo-blog Goto Github PK
View Code? Open in Web Editor NEWPhoto blog, reporting 🤓 EXIF camera details (aperture, shutter speed, ISO) for each image.
Home Page: https://photos.sambecker.com
Photo blog, reporting 🤓 EXIF camera details (aperture, shutter speed, ISO) for each image.
Home Page: https://photos.sambecker.com
Hello,
I came across a previously closed issue that seemed to have resolved a user's concern regarding image formats. However, I'm encountering an issue that doesn't exactly match the one described there.
I'm curious about the support for PNG images in the codebase. Specifically, I'm interested in utilizing this photo blog to display generated art primarily in PNG format, as opposed to JPEG. Could you clarify whether the current implementation accommodates PNG images, or if additional code modifications are required?
If storage is only using Cloudflare R2, then in the backend, you won't be able to delete images, and it will show a 500 error.
Ever since moving to S3, my homepage is attempting to load the next set of images and progresses through a number of loops of which /"?Next={number}" is added to the end of the URL.
As the images are trying to load, the URL param number increments up to 115, then loads the next set of images.
In only have about 15 images loaded in S3 and my Vercel blob was deleted.
Any idea what could be causing this?
Thx,
Matt
Hey Sam! Thank you for making this website template. It is absolutely stunningly gorgeous, and I LOVE the simplicity of EXIF parsing. The whole thing is just so inspiring. I have one small question. While getting it set up, I've already hit the 100MB limit on Vercel Blob outgoing bandwidth twice! All of I've done is upload three or four photos, re-deploy a few times to get the environmental variables I want, and push a few tiny tweaks from a local copy. Is there anything I'm doing wrong, or is 100 MB just not enough bandwidth? I'd really hate to have to upgrade to Vercel Pro, $20 for a photo storage blob just feels wrong!
Thanks for any help you may be able to provide!
Eli
Hey Sam
You did a fantastic job for update the exif photo repo, actually, I longing for a solution to share my photo like you design and developed, and after I tried it for two weeks, from my perspective, I found that i really want to select the existing tags when we upload upload a new photo,currently I can only do it just type the tag in every single time!
Therefore, there are a lot of tags on front page,
So, I suggest maybe we could add this feature for upload or editing page.
Thanks again!
I have a few pals who would like to upload photos to this photo blog as well.
First off, thank you for your efforts on this awesome portfolio/photog template. I've been having some access issues to log in since migrating the code to your latest release.
My next move is to remove AWS all together, but I'd like to use S3 for low cost storage. Below are the screenshots and logs im seeing (novice developer). Appreciate your help on this!
After deploying a fresh install and attempting login:
Logs for the issue apprear to be related to AWS which I've validated several times:
More detailed log data:
AccessDenied: Access Denied
at throwDefaultError (/var/task/node_modules/.pnpm/@smithy[email protected]/node_modules/@smithy/smithy-client/dist-cjs/default-error-handler.js:8:22)
at /var/task/node_modules/.pnpm/@smithy[email protected]/node_modules/@smithy/smithy-client/dist-cjs/default-error-handler.js:18:39
at de_ListObjectsCommandError (/var/task/node_modules/.pnpm/@AWS-SDK[email protected]/node_modules/@aws-sdk/client-s3/dist-cjs/protocols/Aws_restXml.js:4155:20)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async /var/task/node_modules/.pnpm/@smithy[email protected]/node_modules/@smithy/middleware-serde/dist-cjs/deserializerMiddleware.js:7:24
at async /var/task/node_modules/.pnpm/@AWS-SDK[email protected]/node_modules/@aws-sdk/middleware-signing/dist-cjs/awsAuthMiddleware.js:30:20
at async /var/task/node_modules/.pnpm/@smithy[email protected]/node_modules/@smithy/middleware-retry/dist-cjs/retryMiddleware.js:31:46
at async /var/task/node_modules/.pnpm/@AWS-SDK[email protected]/node_modules/@aws-sdk/middleware-sdk-s3/dist-cjs/region-redirect-endpoint-middleware.js:14:24
at async /var/task/node_modules/.pnpm/@AWS-SDK[email protected]/node_modules/@aws-sdk/middleware-sdk-s3/dist-cjs/region-redirect-middleware.js:9:20
at async /var/task/node_modules/.pnpm/@AWS-SDK[email protected]/node_modules/@aws-sdk/middleware-logger/dist-cjs/loggerMiddleware.js:7:26 {
'$fault': 'client',
'$metadata': {
httpStatusCode: 403,
requestId: '0NCXJQV4XC7AT9FV',
extendedRequestId: 'DlisE90kTyps8FjzBvnQu0FElFprwOLPovNk52qFx0vgQcNT1FvegNnQ4B64Y4pHy5Mp7acMiEU=',
cfId: undefined,
attempts: 1,
totalRetryDelay: 0
},
Code: 'AccessDenied',
RequestId: '0NCXJQV4XC7AT9FV',
HostId: 'DlisE90kTyps8FjzBvnQu0FElFprwOLPovNk52qFx0vgQcNT1FvegNnQ4B64Y4pHy5Mp7acMiEU='
}
I want password protection by env var for public users.
Is it possible?
Any idea why im getting a 500 server error when trying to log in? All I did was add some SEO items and push to my main domain.
What super weird is that if I try to login on a vercel domain, everything works fine. this url works: https://pantaleone-bnn51uosa-my-team-98901580.vercel.app/admin
This URL does not and throws the errors: https://pantaleone.net/admin
Pulling my hair out on this, but I have been using the vercel domain as my "admin domain"....
Hello, Author. the tag feature of the project is very practical, but I found that I cannot add Chinese tags, I can only add English.
Do you have any thoughts on replacing Vercel blob? Because Vercel free plan has a 100 MB data-transfer (monthly) limit for Blob.
There can be an alternative as well.
(feature request)
An env variable should be visible for a Flickr API Key. Where images are synced automatically using Flickr API.
How do I bulk upload images? Is it possible through the admin panel? If not, is it possible by updating images in the vercel blob storage
Application error: a server-side exception has occurred (see the server logs for more information).
Digest: 813522268
It looks like it takes up too much SQL space. (I use the vercel hobby plan)
Provides a configuration(env) to disable the blur_text
in SQL.
alternative: Create a placeholder image using CSS and apect_ratio
, when the image is loading.
I think It would be great if you also add Cloudflare R2
. Aws, Vercel Blog & Cloudflare R2. ❤️
I think you could do something like keeping a unique meta title, and meta description for each photo.
For example: meta title = photo title
& meta description
would be like photo title | site name
.
It's for better SEO practices. Something you should consider. Now It all returns duplicate titles & descriptions
My site is (https://shots.cigar.design), you can have a try to preview the error message as below:
Application error: a server-side exception has occurred (see the server logs for more information).
Digest: 534939749
Here are logs from the Vercel: [GET] /grid
TypeError: Cannot read properties of null (reading 'replace')
at (src/camera/index.ts:52:25)
at (src/camera/index.ts:32:16)
at (src/photo/PhotoGridSidebar.tsx:56:11)
at (node_modules/.pnpm/next@14.0.4_@babel[email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js:42:208)
at (node_modules/.pnpm/next@14.0.4_@babel[email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js:47:293)
at (node_modules/.pnpm/next@14.0.4_@babel[email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js:38:228)
at (node_modules/.pnpm/next@14.0.4_@babel[email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js:57:53)
at (node_modules/.pnpm/next@14.0.4_@babel[email protected][email protected][email protected]/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.production.min.js:58:128)
Hello, after uploading the photos, some of them have been rotated 90° in direction. May I ask how to control the direction of photos?
Here is an example:
https://photos.thjiang.com/p/Kf4FK32A
kind of a tall ask, but i want to be able to add photos / titles / tags from a script running on my computer to upload 5000+ photos at once
Great work on the template and architecture going on in your code!
I've been wanting to show off some digital art on the photo blog. A lot of the digital art that I have does not have EXIF data or its just plain irrelevant.
I know this basically contradicts how you've structured the way your code handles image data but assuming I am NOT navigating the EXIF data (which btw is very impressive how you reverse engineered it), is there a way in the ENV to turn off showing ALL EXIF data? Or will I have to basically re-engineer the website and delete the instances of exif data?
Hi, author, I found that if a photo doesn't have EXIF information and I click the refresh button in the backend to overwrite the EXIF, a 500 error occurs.
Hi @sambecker! Using the latest version of the project, I'm having the same issue encountered in #37 & #31.
Here's the image I was trying to upload
RangeError: Invalid time value
at Date.toISOString (<anonymous>)
at E (/var/task/.next/server/chunks/3029.js:179:5539)
at h (/var/task/.next/server/chunks/3029.js:179:5606)
at m (/var/task/.next/server/chunks/8271.js:1:4300)
at i (/var/task/.next/server/chunks/8271.js:1:5758)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async x (/var/task/.next/server/app/admin/uploads/[uploadPath]/page.js:1:4242)
Thanks a lot!
First of all thanks a lot of creating exif photo blog 👍
I understand the value of adding a title to each photo and have a curated collection but I was wondering if there is an option that I am missing to auto add photos uploaded. If you upload e.g. 50 photos, going through one by one is not optimal.
Of course these bulk uploads and adding to the gallery will be without title.
Is this option available? If not, how can it be added to save time in uploading multiple photos?
Thanks!
Hi! I really like this project. I switched my personal website over from Squarespace and I’m really happy with the result :)
One thing I haven’t been able to figure out even looking through the codebase is how the order of photos is controlled. I tried using the “priority order” setting in each photo, but it doesn’t seem to have any effect, whether I use a low or high value.
What am I missing?
Thank you and keep up the great work!
with openai token
Is there any chance to change the blob storage to Cloudinary?
![B_2476](https://github.com/sambecker/exif-photo-blog/assets/389157/f2fb77fd-01ef-49ca-b15c-7445cb7759d3)
Hi @sambecker , could you download this image, and try to upload it to the app, and then you will see the the errors message like this below:
Application error: a server-side exception has occurred (see the server logs for more information).
Digest: 1328241451
Here is my log from the Vercel Logs
RangeError: Invalid time value
at Date.toISOString ()
at d (/var/task/.next/server/chunks/6332.js:177:4753)
at h (/var/task/.next/server/chunks/6332.js:177:4820)
at g (/var/task/.next/server/chunks/9097.js:1:4254)
at s (/var/task/.next/server/chunks/9097.js:1:5751)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async d (/var/task/.next/server/app/admin/uploads/[uploadPath]/page.js:1:5923)
Originally posted by @cigar in #31 (comment)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.