rampatra / photography Goto Github PK
View Code? Open in Web Editor NEWA free online portfolio website to showcase your photos.
Home Page: http://photography.rampatra.com
License: GNU General Public License v3.0
A free online portfolio website to showcase your photos.
Home Page: http://photography.rampatra.com
License: GNU General Public License v3.0
The metadata of image doesn't display on the first click but it displays on the second click.
Repro:
Just open the same image twice by clicking on the thumbnail. After second click you will see metadata.
Web page loading is a bit slow.
Is it because of the size of the image?
Hi,
I'm thinking of adding the ability to add some text descriptions to each photo. Do you have any thoughts on this?
I was thinking of, but not really checked what is possible with Jekyll and the lightbox you are using.
Just looking for feedback on this, before I start to tinker around with it.
Sam
I've been taking a lot of panoramas lately and using this portfolio site and was bummed that I can't zoom in. On either desktop or mobile.
Was curious if this could be added or how difficult it'd be to change myself.
Hey, would you be interested in providing a Container file for your repository?
Hello. The images aren't showing and I can't change your name to mine. I only changed the CNAME to imadtuco.com and configured everything accordingly, changed some stuff in _config.yml too and that's it. Yet, the website isn't functioning.
Can you please help me solve the problem? Kind regards.
Thanks so much for making this available!
I'm wondering if you could edit the ReadMe to provide some more information about how to modify the EXIF. It looks, from assets/js/exif.js
that there are a number of options?
Hey there,
I really love your site design and decided to give it a shot. I forked the repo and deleted the CNAME file so it would use https://mcmaurer.github.io/photography/ to publish, but when I go to the published site, neither the thumbs or full images display. I tried replacing the images with my own, using gulp to generate the fulls and thumbs, but the same problem occurred. Hoping you can help me identify the issue. Thanks!
When using gulp, this error occurred:
assert.js:351
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (~/photography/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (~/photography/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous> (~/photography/gulpfile.js:24:6)
at Module._compile (internal/modules/cjs/loader.js:738:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
at Module.load (internal/modules/cjs/loader.js:630:32)
at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
at Function.Module._load (internal/modules/cjs/loader.js:562:3)
at Module.require (internal/modules/cjs/loader.js:667:17)
at require (internal/modules/cjs/helpers.js:20:18)
How should I fix this? Thanks!
There are hard coded author names in index.html
's line 10 and line 38.
<h1><a href="index.html"><strong>Photography</strong> by Ram Patra</a></h1>
<h2>Hey there, my name is Ram</h2>
I'm wondering that maybe those 2 places should use {{ site.title }}
and {{ site.author }}
`Documents\GitHub\photography>gulp
[00:10:31] Using gulpfile ~\Documents\GitHub\photography\gulpfile.js,
[00:10:31] Starting 'resize'...
events.js:174
throw er; // Unhandled 'error' event
^
Error: Error: write EOF`
It completes If the images file is empty but throws this error anytime I try and run gulp in cmd prompt, ive installed npm in the photography directory
Hello @rampatra ,
This theme is lovely. Thank you for sharing.
Any ideas why bundle exec jekyll serve
and bundle exec jekyll build
don't recompile the SASS (i.e. update the CSS files)?
Thanks.
Leo
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb which
failed Error: not found: python2
Still uses Python2 and also several deprecated npm packages.
How can i use this for videos?
Is there a simple way?
Thank you!
Hello Ram!
Many thanks for providing the source code and template. I've been trying to figure out how to remove the metadata from the image gallery. I'd prefer to not have any details show up (ISO, camera, shutter speed, aperture etc).
So far I've removed exif variables and code from the 'main.js' file, but this doesn't seem to get rid of the metadata from showing up on the image gallery. Do you have any tips?
Many thanks for your help,
Dan
If someone has encountered the error below when executing gulp
on Windows.
C:\path\to\photography>gulp
[22:25:59] Using gulpfile C:\path\to\photography\gulpfile.js
[22:25:59] Starting 'resize'...
events.js:183
throw er; // Unhandled 'error' event
^
Error: Error: write EOF
at finish (C:\path\to\photography\node_modules\gulp-gm\index.js:40:21)
at gm.<anonymous> (C:\path\to\photography\node_modules\async\lib\async.js:485:30)
at emitMany (events.js:147:13)
at gm.emit (events.js:224:7)
at gm.<anonymous> (C:\path\to\photography\node_modules\gm\lib\getters.js:70:16)
at Socket.cb (C:\path\to\photography\node_modules\gm\lib\command.js:322:16)
at Object.onceWrapper (events.js:315:30)
at emitOne (events.js:116:13)
at Socket.emit (events.js:211:7)
at onwriteError (_stream_writable.js:408:12)
Download Graphicsmagick, and change line 14, 19 in gulpfile.js
to
imageMagick: false
Then gulp
can run without error.
C:\path\to\photography>gulp
[23:16:32] Using gulpfile C:\path\to\photography\gulpfile.js
[23:16:32] Starting 'resize'...
[23:16:32] Finished 'resize' after 26 ms
[23:16:32] Starting 'del'...
[23:16:32] Finished 'del' after 2.39 ms
[23:16:32] Starting 'default'...
[23:16:32] Finished 'default' after 22 μs
When I send the message, it shows 405 Not allowed. Could you please help in setting it up so the emails come to me.
https://somshot.github.io/photos/
You can add a loading screen to the whole page, and it would also be nice to add a loading animation to each photo until it loads.
Your theme has been listed on http://jekyllthemes.ru/
Is it possibile to change order of the pictures displayed?
Now I think pictures are sorted by name in alphabetical order right?
Tried changing the npm versions with no luck.
Currently producing this error below with:
node v18.12.0
npm v8.19.2
npx v8.19.2
- joshu@LAPTOP MINGW64 ~/OneDrive/Pictures/photography_website/photography (master)
- $ npm install
- npm WARN old lockfile
- npm WARN old lockfile The package-lock.json file was created with an old version of npm,
- npm WARN old lockfile so supplemental metadata must be fetched from the registry.
- npm WARN old lockfile
- npm WARN old lockfile This is a one-time fix-up, please be patient...
- npm WARN old lockfile
- npm WARN deprecated [email protected]: Critical bug fixed in v3.0.1, please upgrade to the latest version.
- npm WARN deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
- npm WARN deprecated [email protected]: Critical bug fixed in v2.0.1, please upgrade to the latest version.
- npm WARN deprecated [email protected]: Please update to ini >=1.3.6 to avoid a prototype pollution issue
- npm WARN deprecated [email protected]: Critical bug fixed in v3.0.1, please upgrade to the latest version.
- npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
- npm WARN deprecated [email protected]: this library is no longer supported
- npm WARN deprecated [email protected]: this library is no longer supported
- npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
- npm WARN deprecated [email protected]: XSS vulnerability fixed in v1.0.3
- npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
- npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
- npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
- npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
- npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
- npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
- npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
- npm WARN deprecated [email protected]: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
- npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
- npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
- npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
- npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
- npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
- npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
- npm ERR! code 1
- npm ERR! path C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\node-sass
- npm ERR! command failed
- npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
- npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
- npm ERR! gyp info it worked if it ends with ok
- npm ERR! gyp verb cli [
- npm ERR! gyp verb cli 'C:\\Program Files\\nodejs\\node.exe',
- npm ERR! gyp verb cli 'C:\\Users\\joshu\\OneDrive\\Pictures\\photography_website\\photography\\node_modules\\node-gyp\\bin\\node-gyp.js',
- npm ERR! gyp verb cli 'rebuild',
- npm ERR! gyp verb cli '--verbose',
- npm ERR! gyp verb cli '--libsass_ext=',
- npm ERR! gyp verb cli '--libsass_cflags=',
- npm ERR! gyp verb cli '--libsass_ldflags=',
- npm ERR! gyp verb cli '--libsass_library='
- npm ERR! gyp verb cli ]
- npm ERR! gyp info using [email protected]
- npm ERR! gyp info using [email protected] | win32 | x64
- npm ERR! gyp verb command rebuild []
- npm ERR! gyp verb command clean []
- npm ERR! gyp verb clean removing "build" directory
- npm ERR! gyp verb command configure []
- npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
- npm ERR! gyp verb `which` failed Error: not found: python2
- npm ERR! gyp verb `which` failed at getNotFoundError (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:13:12)
- npm ERR! gyp verb `which` failed at F (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:68:19)
- npm ERR! gyp verb `which` failed at E (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:80:29)
- npm ERR! gyp verb `which` failed at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:89:16
- npm ERR! gyp verb `which` failed at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\isexe\index.js:44:5
- npm ERR! gyp verb `which` failed at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\isexe\windows.js:29:5
- npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:207:21)
- npm ERR! gyp verb `which` failed python2 Error: not found: python2
- npm ERR! gyp verb `which` failed at getNotFoundError (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:13:12)
- npm ERR! gyp verb `which` failed at F (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:68:19)
- npm ERR! gyp verb `which` failed at E (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:80:29)
- npm ERR! gyp verb `which` failed at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:89:16
- npm ERR! gyp verb `which` failed at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\isexe\index.js:44:5
- npm ERR! gyp verb `which` failed at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\isexe\windows.js:29:5
- npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:207:21) {
- npm ERR! gyp verb `which` failed code: 'ENOENT'
- npm ERR! gyp verb `which` failed }
- npm ERR! gyp verb check python checking for Python executable "python" in the PATH
- npm ERR! gyp verb `which` failed Error: not found: python
- npm ERR! gyp verb `which` failed at getNotFoundError (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:13:12)
- npm ERR! gyp verb `which` failed at F (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:68:19)
- npm ERR! gyp verb `which` failed at E (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:80:29)
- npm ERR! gyp verb `which` failed at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:89:16
- npm ERR! gyp verb `which` failed at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\isexe\index.js:44:5
- npm ERR! gyp verb `which` failed at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\isexe\windows.js:29:5
- npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:207:21)
- npm ERR! gyp verb `which` failed python Error: not found: python
- npm ERR! gyp verb `which` failed at getNotFoundError (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:13:12)
- npm ERR! gyp verb `which` failed at F (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:68:19)
- npm ERR! gyp verb `which` failed at E (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:80:29)
- npm ERR! gyp verb `which` failed at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\which\which.js:89:16
- npm ERR! gyp verb `which` failed at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\isexe\index.js:44:5
- npm ERR! gyp verb `which` failed at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\isexe\windows.js:29:5
- npm ERR! gyp verb `which` failed at FSReqCallback.oncomplete (node:fs:207:21) {
- npm ERR! gyp verb `which` failed code: 'ENOENT'
- npm ERR! gyp verb `which` failed }
- npm ERR! gyp verb could not find "python". checking python launcher
- npm ERR! gyp verb could not find "python". guessing location
- npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe
- npm ERR! gyp ERR! configure error
- npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
- npm ERR! gyp ERR! stack at PythonFinder.failNoPython (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\node-gyp\lib\configure.js:484:19)
- npm ERR! gyp ERR! stack at PythonFinder.<anonymous> (C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\node-gyp\lib\configure.js:509:16)
- npm ERR! gyp ERR! stack at C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\node-gyp\node_modules\graceful-fs\polyfills.js:282:31
- npm ERR! gyp ERR! stack at FSReqCallback.oncomplete (node:fs:207:21)
- npm ERR! gyp ERR! System Windows_NT 10.0.19044
- npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\joshu\\OneDrive\\Pictures\\photography_website\\photography\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
- npm ERR! gyp ERR! cwd C:\Users\joshu\OneDrive\Pictures\photography_website\photography\node_modules\node-sass
- npm ERR! gyp ERR! node -v v18.12.0
- npm ERR! gyp ERR! node-gyp -v v3.8.0
- npm ERR! gyp ERR! not ok
- npm ERR! Build failed with error code: 1
-
- npm ERR! A complete log of this run can be found in:
- npm ERR! C:\Users\joshu\AppData\Local\npm-cache\_logs\2022-10-26T00_56_47_618Z-debug-0.log
-
Sorry in advance if this is an error on my end!
When I run npm install
, I get the following error message:
added 26 packages from 15 contributors, removed 184 packages, updated 16 packages and audited 1836 packages in 4.871s
found 6 vulnerabilities (2 low, 4 high)
run `npm audit fix` to fix them, or `npm audit` for details
The audit reveals vulnerabilities with minimash
and lodash
. I think the latter is causing the problem I'm currently having with the resizer not working — since it's a dependency of gulp-image-resize
. The audit also says that this one requires manual review.
For now I'm manually creating a set of thumbnails for each image (in Lightroom), but I'd rather not if possible!
Strangely, your preview images render fine, but when I add my own images, I get a black main page. I can click each square where the thumbs are supposed to be, and the light table pops up with the correct image. When I refresh or load the page, I can see the thumbs loading for half a second, and then it goes back to all black. The header and footer are there. I used your gulp script to resize the thumbs, so I can't figure out what's going wrong.
Here's a link to my site so you can see what it looks like: https://isaacullah.github.io/photography/
First of all, thank you for your work.
I have a small suggestion: when opening the site from the phone, there is no possibility to swipe through photos in full screen mode, however, from PC this works flawlessly.
How could this be achieved?
How much work would it involve to add this feature?
Thanks,
@reed33
There is a problem with the initial load for this project.
It will flicker on a fresh un-cached load:
This is more obvious if you intentionally slow down your network data to 3G using Chrome Dev tools etc.
The issue is a result of main.js
being too slow to load and set the loading state.
On my fork at https://github.com/mobeigi/photography
I've fixed this and also made a handful of other improvements including:
I'd be happy to put up a PR for all of this, but my last pr was not reviewed so I don't know if its worth the time.
If it will be reviewed let me know and I can put up a PR @rampatra
I'm running jekyll serve --watch
but still unable to see thumbs and images locally. The built site shows empty images and links. I've run gulp and everything seems to work:
[15:15:54] Using gulpfile ~/htdocs/photography/gulpfile.js
[15:15:54] Starting 'resize'...
[15:15:54] Finished 'resize' after 17 ms
[15:15:54] Starting 'del'...
[15:15:54] Finished 'del' after 5.31 ms
[15:15:54] Starting 'default'...
[15:15:54] Finished 'default' after 33 μs
The site and images load on the live site but I can't get it to run locally. I'm running jekyll 3.1.6
After using Terminal (MacOS) to navigate to the repo, I type $ gulp to resize the image inside "images" folder but the following error occurs. Could you please tell me why it happens and how to fix it?
Using gulpfile ~/Desktop/light/gulpfile.js
[06:07:28] Starting 'resize'...
events.js:182
throw er; // Unhandled 'error' event
^
Error: Error: Could not execute GraphicsMagick/ImageMagick: identify "-ping" "-format" "%wx%h" "-" this most likely means the gm/convert binaries can't be found
at finish (/Users/Lullaby/Desktop/light/node_modules/gulp-gm/index.js:40:21)
at gm. (/Users/Lullaby/Desktop/light/node_modules/async/lib/async.js:485:30)
at emitMany (events.js:146:13)
at gm.emit (events.js:223:7)
at gm. (/Users/Lullaby/Desktop/light/node_modules/gm/lib/getters.js:70:16)
at cb (/Users/Lullaby/Desktop/light/node_modules/gm/lib/command.js:322:16)
at ChildProcess. (/Users/Lullaby/Desktop/light/node_modules/gm/lib/command.js:232:9)
at emitOne (events.js:115:13)
at ChildProcess.emit (events.js:210:7)
at Process.ChildProcess._handle.onexit (internal/child_process.js:198:12)
Thanks again for making this!
I'm wondering where in the CSS it might be possible to change the aspect ratio of the thumbnails? Ideally I would like to have portrait orientation photos not mask the way that they do and appear landscape, but I'd settle for having everything be a square thumbnail. Is this an easy fix in a single place? I tried changing some background-size: cover;
s to background-size: contain;
, but it didn't appear to have any effect.
Hej,
I'm giving a try to your fantastic theme. I have one issue.
The thumbnails are not appearing properly it's just a black square. If I click on it it shows perfectly the full size image.
Any tips around what I may have done wrongly??
Thanks
Your theme has been listed on https://jekyll-themes.com/.
When running the glup resize or build, I receive the following error:
[15:53:28] Error in plugin "gulp-gm"
Message:
Error: write EOF
Details:
domainEmitter: [object Object]
domainThrown: false
Both imagemagick and gm installed.
Any help is greatly appreciated as I have been stuck on this for ages.
Thanks.
Hi, I really like the approach you took towards this project, but there are a few things that I would like to know if you have considered a different method of storing the pictures such a third-party cloud service like using Cloudinary instead of having all the pictures all together.
Regards,
Paul
Just wanted to thank you for making this Jekyll theme.
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.