AirSpace Theme - Portfolio Sub Image Categorys Issue - yml File Review

support
1

AirSpace Theme - Portfolio Sub Image Issue

I am having trouble finding information on Google about Hugo, yml etc to solve my problem.

So thought I would ask on Hugo Discourse.

Issue Information

This AirSpace template using image categorys to show off work portfolios.

Example of default results

Example of default finished results on localhost:1313

Example of default code to edit existing images

To configure the images portfolios you must edit the work.yml file under data folder.

You should see example code like this:


portfolio:
  - category: Brand
    url: "#"
    image: "/img/portfolio/work1.jpg"
    name: Test
    description: >
      Labore et dolore magna aliqua. Ut enim ad
      

  - category: Websites
    url: "#"
    image: "/img/portfolio/work1.jpg"
    name: Title 2
    description: >

    
  - category: Graphics
    image: "/img/portfolio/work2.jpg"
    url: "#"
    name: Title 2
    description: >
      Labore et dolore magna aliqua. Ut enim ad


  - category: Branding
    url: "#"
    image: "/img/portfolio/work3.jpg"
    name: Title 2
    description: >
      Labore et dolore magna aliqua. Ut enim ad

Editing Code - Adding Category

So I can add additional category by copying the existing code and just changing the category name.

  - category: new Category
    url: "#"
    image: "/img/portfolio/NEW-IMAGE.jpg"
    name: New Title
    description: >
      Explain the work shown in image.

Editing Code - Second Image Within Category Issue

The issue I have is I want to be able to add an additional image to existing Category.

I have tried to add a new image with existing Category name. This keeps the images within the same Category but shows two Categorys in the menu provided by the theme.

Code Example

  - category: Graphics
    image: "/img/portfolio/work2.jpg"
    url: "#"
    name: Title 2
    description: >
      Labore et dolore magna aliqua. Ut enim ad

  - category: Graphics
    image: "/img/portfolio/work1.jpg"
    url: "#"
    name: Title 2
    description: >
      Labore et dolore magna aliqua. Ut enim ad

I must be misunderstanding how yml works to get a second image within one category.

I think it is possible because I reviewed demos working that have been provided by ThemeFisher.

I think it just my yml code knowledge letting me down but I have not found anything online regarding yml to resolve my issue.

My Goal

Goalofthewebsite
Goalofthewebsite.gif1025×478 622 KB

Disclaimer

I am a beginner so sorry for anything I might say that incorrect.

Any help would be appreciated or pointing me in the right direction would be great.

I would provided more information but because I have only signed up with Hugo forum today, I am restricted for security reasons.

I would added more gifs, links and images.

Please ask any question you want if you require more information and I do my best to answer.

Thanks for reading this support issue.

Additional Resources

2

Hi Paulser,
No expert here either. But had the same issue as you and figured the problem is actually in the menu listing. This is what my code looks like.

indent preformatted text by 4 spaces
<div class="portfolio-menu">
            <ul>
               <li class="filter" data-filter="all">Everything</li>
              <!--
               {{ range .Site.Data.work.portfolio }}
               <li class="filter" data-filter=".{{ .category }}">{{ .category }}</li> 
               {{ end }} -->
              
              <li class="filter" data-filter=".a">A</li>
              <li class="filter" data-filter=".b">B</li>
              <li class="filter" data-filter=".c">C</li>
              <li class="filter" data-filter=".d">D</li>
              <li class="filter" data-filter=".e">E</li>
              <li class="filter" data-filter=".f">F</li>
            </ul>
          </div>

Hope this helps.
CHeers

3

The problem is with the theme. The way the work.html partial currently is, it can only display one item in each category. I reckon this probably an oversight of the theme’s developer.

I think your best option is to open an issue on github and see if the developer is willing to add this feature (it should only take a few lines of code), or else fork the theme and have a go yourself!

1 Like
4

Thanks for this information I will give it a go.

I come back with code used when I am finished.

5

Thanks for the information.

I have raised a Github issue so we see what happens.

I will try and keep both places updated.

6

It seems @Mohan_Kumar 's solution is working; however it’s a workaround though.

7

Great to hear!

Any solution better than nothing even if it a workaround.

I have not had time to review it tbh but I will report back when I have.

Thanks for providing this helpful information.

8

Sorry for late post been busy with other things.

The workaround solution work provided by @Mohan_Kumar.

On the Github issue the ticket was closed because they have resolved the issue according to Mehedi.

image
image.png801×177 14.9 KB

Please review Github link on post July 28th above.

I tried the fix and I have not managed to get it working at the moment. I am sure it works but if anyone interested in having a look for me to review the fix?

Post example markdown, yml code of working solution would be helpful.

I keep trying an post updates regarding this issue I am having.

The workaround does work but I thought I would still review how the theme expecting me to do it since they have fixed the issue according to github.

Thanks again for reading this post.

9

Issue been resolved