Giter Club home page Giter Club logo

github-pages-gallery's Introduction

Github Pages Gallery

Host your photo/video gallery in Github pages easily using Thumbsup & Github Actions for free.

Why this project?

This project contains starter code for anyone who wants to deploy his/her photo/video galery on Github Pages, Zero Coding Needed. Since Github pages is a free hosting service offered by Github to host static pages, it offers a decent bandwidth. So it is a great choice for photographers to showcase their works. Github Actions is a CI & CD platform that offers unlimited builds for open source projects. Combining the power of GitHub pages with Github Actions is a zero dollar solution to get your gallery online.

How to use

Follow the steps below to get your Gallery online. You will be using GitHub web interface to do everything. :wink: No frustrating CLIs:

  1. SignUp for a Github account and verify your email ID: https://github.com/join
  2. Click on the use this template button:

template

  1. Type a Name for your new repository

name

  1. Click on the settings tab. Click on the Pages option under the Code and automation section. Make sure that you have the GitHub actions selected as the Source for the GitHub pages. Pages

  2. Edit config.json by clicking on the edit button in the newly created repository under your account:

{
  "input": "./gallery",
  "output": "./build_output",
  "title": "Photo Gallery", // Set your gallery title here
  "sort-albums-by": "title",
  "sort-media-by": "filename",
  "download-photos": "copy",
  "cleanup": true,
  "theme": "cards", // Your theme
  "css": "./custom.css",
  "footer": "Copyright Text", // Set your copyright text here
  "usage-stats": false
}

You can chose from any of the themes below to set the value for theme key:

You can learn more about the configuration file here: https://thumbsup.github.io/docs/3-configuration/usage/. Click on the commit changes button below the page.

  1. Go to actions tab of your new repository, Wait till the Initial build completes. It will show you the following check mark: actions
  2. You are all set with your new awesome gallery! Add Albums or photos to make it live.

Demo Video

demo

Adding a new album to gallery

  1. Go to the gallery folder of the forked repo.
  2. Click on Create a new file button.
  3. Type AlbumName/.gitkeep in the input box
  4. Click Commit Changes button at the bottom.

newfolder

Adding Medias

  1. Go to gallery folder. Open any albums if any.
  2. Click on Upload files button
  3. Select files. Once it finishes upload, click Commit Changes button.

selectmedia

Finding your website URL

If you had done all the above steps then your website will be live now. Please check Github Actions tab in your repository for the sttaus of the deployment. Once it is done, Go to settings tab again and scroll down to the Github Pages section to find your public gallery URL.

url

Limitations

If your bandwidth usage significantly exceeds the average bandwidth usage (as determined solely by GitHub) of other GitHub customers, we reserve the right to immediately disable your account or throttle your file hosting until you can reduce your bandwidth consumption.

  • File size limit (100 MB) & Repo size limit (75 GB) & Upload limit(25MB): Github limits the maximum usable filesize as 100MB for all files. This is enough for most users. It also imposes a repo size limit of 75GB. If you add a file to a repository via a browser, the file can be no larger than 25 MB. Visit https://help.github.com/articles/what-is-my-disk-quota/ for more info.

Tools Used

History

  • This project was using Travis CI Initially, Migrated to Github Actions for better speed and reliabilty. Travis stopped providing free unlimited builds for open source projects.

Contributing

Feel free to make any changes and submit a PR.

github-pages-gallery's People

Contributors

dschneiderch avatar eswdd avatar gautamkrishnar avatar gokuldas027 avatar jebay avatar the-real-cphillips avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

github-pages-gallery's Issues

CDN

CDN issue to host images

Failed to deploy a GitHub action

I use it often because it's easy and comfortable.
I already have one in use.

But today I wanted to create another one and it didn't work.
It keeps failing and I've been looking into what the problem is and this issue seems to be related. Can you take a look and fix it for me?

actions/deploy-pages#225

Fix minor typo in README.md

Thanks for a handy solution we're using to celebrate a favorite physics prof of ours as part of his 100th birthday celebration!

I noticed a minor typo while reading your documentation. This sentence in step 4 --

You can chose from any of the theme below

should read, instead --

You can chose from any of the themes below ...

...that is: themes should be plural, not singular.

No image gallery displayed, README.md is rendered instead

I am trying to build a small gallery site here:
https://adrfantini.github.io/image-gallery/

Sources are here:
https://github.com/adrfantini/image-gallery

I setup Travis correctly and triple checked all the steps in README.md. Unfortunately the result is that gh-pages builds the README.md and not the rendered image gallery.

It seems that a new branch gh-pages was generated; currently my GitHub Pages site is currently being built from the master branch, should I build it from the gh-pages branch? I tried, but nothing has changed apparently; maybe I should not have done this?

Is embed-exif: true working?

Hi there,

I would like to embed the exif metadata for each image in my the gallery. I found embed-exif on the thumbsup cheat sheet , so I added it to my config.json like
{ "input": "./gallery", "output": "./build_output", "title": "Photo Gallery", "sort-albums-by": "title", "sort-media-by": "filename", "download-photos": "copy", "embed-exif": true, "cleanup": true, "theme": "cards", "css": "./custom.css", "footer": "This is a test", "usage-stats": false }
But it doesn't change anything. What am I doing wrong?

Best wishes

Example gallery?

Did I miss a link to an example gallery in the readme? I'd love to play with it before following the whole procedure of setting up my own.

image caption based on commit?

Hi, very cool image gallery! I am wondering if there's a way to describe the images via a caption? I was thinking the commit title & description can be applied to the set of images uploaded? Just a thought. I'm not a programmer, so I'm sorry I can't contribute code, but thought it'd be a good idea.

Localization request

Please consider make all strings of the interface customizable so I may translate them to Simplified Chinese. Also please provide more date/time formats other than "15 Jan 2021". Chinese language prefer format like "2021/01/15". Thanks!

HEIC support is indeed broken in thumbsupgallery/thumbsup?

I generated my project based on this one, and it isn't working for .heic files (which is default format on e.g. iOS). I found some error messages in the Actions panel:

2023-05-03T07:14:34.275Z thumbsup:error Error processing 20211106_225752813_iOS.heic -> media/small/20211106_225752813_iOS.jpg
2023-05-03T07:14:34.275Z thumbsup:error Error: Command failed: gm identify: Insufficient image data in file (/tmp/tmp-7-M0CMOZ9sF1A1-.jpg).
2023-05-03T07:14:34.275Z thumbsup:error gm identify: Request did not return an image.

No image was displayed in the gallery for .heic files, although the thumbnail image was displayed correctly.

The thumbsupgallery/thumbsup image was released two years ago. I switched to using ghcr.io/thumbsup/thumbsup:2.17.1 instead of thumbsupgallery/thumbsup. Now, it works for .heic files.

I suggest updating the Docker image used in the project to ghcr.io/thumbsup/thumbsup:2.17.1 or something similar to ensure proper support for .heic files by default.

I'm new to GitHub Actions and Docker, and not able to edit the .yml file proficiently yet. Therefore, I'm opening an issue here.

Migrate to GitHub actions

Since Travis ci stopped unlimited builds, we need to migrate the project to Github Actions. Readme needs to be updated too to reflect this change.

how to add favicon?

Thanks for the project, but I have a question, how can I add the favicon.

Suggestions

Hi @gautamkrishnar:

I like this idea, and found your project when searching for something simple for my needs.

A couple of small suggestions, if that would be okay.

  1. At the very beginning on the README.md, please link to a couple of live gh-pages Galleries that are using this repo. Once we see what the end-result would be, we'd be much more inclined to go through the steps.
  2. I'd also suggest an overview or Table of Contents at the top of README, so that we know what the steps are, esp. since there are over a dozen steps.
  3. It was not clear to me why Travis CI was needed. Adding some explanation for what each component would do would help people like me in adopting your solution faster.

I am giving these suggestions in the hopes that they are constructive and help many people use your project.

Regards,
Ram

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.