artist-gallery-theme

Hugo theme made for websites with loads of images
Log | Files | Refs | README | LICENSE

README.md (6037B)

      1 # Artist Gallery Theme
      2 
      3 A beautiful, responsive Hugo theme for artists and photographers to showcase their work with image galleries and project sections.
      4 
      5 ## About
      6 
      7 This theme was built upon the excellent [hugo-theme-console](https://github.com/mrmierzejewski/hugo-theme-console) by mrmierzejewski, extending it with custom gallery layouts, lightbox functionality, and specialized sections for showcasing art projects and graphics.
      8 
      9 EXAMPLE WEBSITE: https://mariapogorzhelskaya.com
     10 
     11 ## Features
     12 
     13 * **Image Galleries**: Beautiful image galleries with lightbox support (using Lightbox2)
     14 * **Responsive Design**: Mobile-friendly layout with hamburger menu
     15 * **Projects Section**: Showcase your art projects with thumbnail grids
     16 * **Graphics Section**: Display graphics collections with organized categories
     17 * **Terminal Aesthetic**: Clean, minimalist terminal-style design
     18 * **Fast Loading**: Optimized images with Hugo's image processing
     19 * **SEO Friendly**: Includes OpenGraph and Twitter Card support
     20 * **Customizable**: Easy color and style customization
     21 
     22 ## Installation
     23 
     24 1. Add the theme to your Hugo site:
     25 
     26 ```bash
     27 cd your-hugo-site
     28 git clone https://github.com/yourusername/artist-gallery-theme.git themes/artist-gallery-theme
     29 ```
     30 
     31 Or as a git submodule:
     32 
     33 ```bash
     34 git submodule add https://github.com/yourusername/artist-gallery-theme.git themes/artist-gallery-theme
     35 ```
     36 
     37 2. Update your `hugo.toml` (or `config.toml`) to use the theme:
     38 
     39 ```toml
     40 theme = "artist-gallery-theme"
     41 ```
     42 
     43 ## Configuration
     44 
     45 ### Basic Configuration
     46 
     47 Here's a minimal `hugo.toml` configuration:
     48 
     49 ```toml
     50 baseURL = 'https://yoursite.com/'
     51 languageCode = 'en-us'
     52 title = 'Your Name'
     53 theme = "artist-gallery-theme"
     54 
     55 [params]
     56   description = "Artist Portfolio"
     57 
     58   [[params.navlinks]]
     59   name = "Bio"
     60   url = "bio/"
     61 
     62   [[params.navlinks]]
     63   name = "Projects"
     64   url = "projects/"
     65 
     66   [[params.navlinks]]
     67   name = "CV"
     68   url = "cv/"
     69 
     70   [[params.navlinks]]
     71   name = "Graphics"
     72   url = "graphics/"
     73 
     74 [markup]
     75   [markup.goldmark]
     76     [markup.goldmark.renderer]
     77       unsafe = true
     78 ```
     79 
     80 ### Navigation Links
     81 
     82 Add navigation links using the `params.navlinks` array. Each link needs a `name` and `url`:
     83 
     84 ```toml
     85 [[params.navlinks]]
     86 name = "Projects"
     87 url = "projects/"
     88 ```
     89 
     90 ## Content Structure
     91 
     92 ### Homepage
     93 
     94 Create a `content/_index.md` file. If you want a rotating image homepage, place your images in `static/images/rotating/` and they'll be randomly displayed on the homepage.
     95 
     96 ### Projects Section
     97 
     98 Projects are organized with a special layout that shows thumbnail grids and individual project pages with image galleries.
     99 
    100 1. Create `content/projects/_index.md`:
    101 
    102 ```markdown
    103 ---
    104 title: "Projects"
    105 ---
    106 
    107 My art projects and exhibitions.
    108 ```
    109 
    110 2. Create individual project directories with an `index.md` and a `paintings` subdirectory:
    111 
    112 ```
    113 content/
    114   projects/
    115     _index.md
    116     my-project/
    117       index.md
    118       paintings/
    119         image1.jpg
    120         image2.jpg
    121         image3.jpg
    122 ```
    123 
    124 3. In the project's `index.md`, include front matter:
    125 
    126 ```markdown
    127 ---
    128 title: "My Project Title"
    129 date: 2024-01-15
    130 image: "paintings/image1.jpg"  # Used as thumbnail
    131 ---
    132 
    133 Description of your project here.
    134 ```
    135 
    136 The `image` parameter should reference one of the images in the `paintings/` directory - this will be used as the thumbnail on the projects list page.
    137 
    138 ### Graphics Section
    139 
    140 Graphics work similarly to projects:
    141 
    142 1. Create `content/graphics/_index.md`:
    143 
    144 ```markdown
    145 ---
    146 title: "Graphics"
    147 ---
    148 
    149 My graphics collections.
    150 ```
    151 
    152 2. Create subdirectories for different graphic categories:
    153 
    154 ```
    155 content/
    156   graphics/
    157     _index.md
    158     watercolors/
    159       index.md
    160       paintings/
    161         watercolor1.jpg
    162         watercolor2.jpg
    163     day/
    164       index.md
    165       paintings/
    166         day1.jpg
    167         day2.jpg
    168 ```
    169 
    170 3. Each category's `index.md`:
    171 
    172 ```markdown
    173 ---
    174 title: "Watercolors"
    175 date: 2024-01-20
    176 image: "paintings/watercolor1.jpg"
    177 ---
    178 
    179 My watercolor collection.
    180 ```
    181 
    182 ### Regular Pages
    183 
    184 For standard pages (Bio, CV, etc.), create markdown files or directories:
    185 
    186 ```
    187 content/
    188   bio/
    189     index.md
    190   cv/
    191     index.md
    192 ```
    193 
    194 ## Image Gallery Behavior
    195 
    196 - Images in the `paintings/` directory within project or graphics folders are automatically displayed as a gallery
    197 - The gallery uses Lightbox2 for fullscreen viewing
    198 - Images are automatically processed and resized by Hugo for optimal loading
    199 - Gallery arrows appear on tap/hover and auto-fade after 1 second
    200 
    201 ## Customization
    202 
    203 ### Styling
    204 
    205 The theme includes several custom style features:
    206 
    207 - Links turn red on hover (no background color change)
    208 - Site title is bold and turns red on hover
    209 - Project titles turn red when hovering over images or titles
    210 - Desktop layout constrains images to 70% width for better viewing
    211 - Mobile-responsive grid that switches to single column on small screens
    212 
    213 ### Footer
    214 
    215 To customize the footer with your social media links, edit the `layouts/partials/footer.html` in your site root (not in the theme). The default footer includes:
    216 
    217 - Facebook
    218 - Instagram  
    219 - Email
    220 
    221 ### Custom CSS
    222 
    223 To add additional custom CSS, you can modify the `layouts/partials/header.html` partial in your site root to include additional styles.
    224 
    225 ## Requirements
    226 
    227 - Hugo Extended version 0.100.0 or higher (for image processing)
    228 - Internet connection for external dependencies:
    229   - jQuery (required for Lightbox2)
    230   - Lightbox2 (for gallery functionality)
    231   - Font Awesome (for social media icons)
    232 
    233 ## Browser Support
    234 
    235 - Modern browsers (Chrome, Firefox, Safari, Edge)
    236 - Mobile browsers (iOS Safari, Chrome Mobile)
    237 - IE9+ with polyfills (included)
    238 
    239 ## Credits
    240 
    241 - Built upon [hugo-theme-console](https://github.com/mrmierzejewski/hugo-theme-console) by mrmierzejewski
    242 - Uses [Lightbox2](https://lokeshdhakar.com/projects/lightbox2/) for image galleries
    243 - Uses [Font Awesome](https://fontawesome.com/) for icons
    244 - Fonts: Roboto Mono
    245 
    246 ## License
    247 
    248 MIT License - see LICENSE file for details.
    249 
    250 ## Support
    251 
    252 For issues, questions, or contributions, please visit the [GitHub repository](https://github.com/yourusername/artist-gallery-theme).
    253 
    254