How to use Hugo Image Processing with Tina CMS?

[major-mayer]

Hey everyone,
I'm trying to migrate an Hugo-based website from Forestry to Tina and have some troubles with my media support.
I am using Hugo's image processing functionality to scale the source images to reasonable sizes and do some other transformations: https://gohugo.io/content-management/image-processing/
To do so, I put all my source images into the "assets/images" directory, put save the path in the frontmatter like this:

---
image: images/my_image.jpg
---
...

and use something like this in the Hugo template to do the actual transformation.

{{$original := resources.Get .Params.image }}
{{$image := $original.Resize "200x"}}
<img class="rounded-circle img-fluid author-image" src="{{$image.RelPermalink }}">

Hugo then automatically generates the transformed files in the public/images directory and changes the names of the images to something like this public/images/my_image1_hu7478a13e83e81ef9216e13f6545e5346_86309_1200x0_resize_q75_lanczos.jpg.

In the end, the directory structure is looking like this:

.
├── assets
│   └── images -- source images
├── changelog.md
├── config.toml
├── content
│   └── german
├── netlify.toml
├── package.json
├── package-lock.json
├── public
│   └── images -- transformed images
├── Readme.md
├── resources
├── static
│   ├── admin
│   ├── downloads
│   └── images  -- images that don't need to be transformed (svgs)
└── tina
    ├── config.ts
    ├── templates.ts
    └── tina-lock.json

The problem that I'm having is that Tina CMS' UI is unable to show the images in the media manager, because only the transformed images are actually in the public folder, the untransformed are not and cannot be fetched easily.
The media configuration that i tried to use looks like this:

  media: {
    tina: {
      mediaRoot: "../assets",
      publicFolder: "public",
    },
  },

Is there a way to somehow say Tina:

• My source images are in "/assets"
• Please put also this path into the front matter when I select an image
• Load the images from the "assets" folder, but just for the admin dashboard (the actual website uses the transformed images)

Or are there any other ways to solve this problem?

[major-mayer]

I hope that it's allowed to push topics that have no answer/ reply yet, but I would be really grateful for any hints on how to solve this problem.

[studioahoy]

Did you manage to get this working? I'm working on something similar. I keep all my content in the "content" folder.

[major-mayer]

No, unfortunately I didn't get this to work and switched over to using Cloudinary for asset management.
Not too happy about this solution, tho, because it means depending on another non-OSS 3rd party service, which can be shutdown at any point (looking at you Forestry) or at least made very expensive.

[architchandra]

The Forestry reference was very cheeky. But yes, it's relevant. I'm in the middle of migrating a Forestry site to Tina and the process is infuriating at times because of issues like this one. :/

[hksk]

Hi guys, just mount and directory in hugo

 [[module.mounts]]


    source = "assets/uploads" # this
    target = "static/uploads" # and this

 [[module.mounts]]
    source = "content"
    target = "content"

  [[module.mounts]]
    source = "static"
    target = "static"

  [[module.mounts]]
    source = "layouts"
    target = "layouts"

  [[module.mounts]]
    source = "data"
    target = "data"

  [[module.mounts]]
    source = "assets"
    target = "assets"

  [[module.mounts]]
    source = "i18n"
    target = "i18n"

  [[module.mounts]]
    source = "archetypes"
    target = "archetypes"

and in tina.ts

 build: {
    outputFolder: "admin",
    publicFolder: "assets",
  },
  media: {
    tina: {
      mediaRoot: "uploads",
      publicFolder: "assets",
    },
  },

[studioahoy]

Thanks Erik, I have source images in content/uploads/ The following worked for me: config.toml `[[module.mounts]] source = "content/uploads" # this target = "static/uploads" # and this [[module.mounts]] source = "content" target = "content" [[module.mounts]] source = "static" target = "static" [[module.mounts]] source = "layouts" target = "layouts" [[module.mounts]] source = "data" target = "data" [[module.mounts]] source = "assets" target = "assets" [[module.mounts]] source = "i18n" target = "i18n" [[module.mounts]] source = "archetypes" target = "archetypes"` tina/config.ts ` build: { outputFolder: "admin", publicFolder: "assets", }, media: { tina: { mediaRoot: "uploads", publicFolder: "content", }, },`

…

On 20/12/2023, at 1:28 PM, Erik Beltran ***@***.***> wrote: Hi guys, just mount and directory in hugo ` [[module.mounts]] source = "assets/uploads" # this target = "static/uploads" # and this [[module.mounts]] source = "content" target = "content" [[module.mounts]] source = "static" target = "static" [[module.mounts]] source = "layouts" target = "layouts" [[module.mounts]] source = "data" target = "data" [[module.mounts]] source = "assets" target = "assets" [[module.mounts]] source = "i18n" target = "i18n" [[module.mounts]] source = "archetypes" target = "archetypes"` and in tina.ts build: { outputFolder: "admin", publicFolder: "assets", }, media: { tina: { mediaRoot: "uploads", publicFolder: "assets", }, }, — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.

[studioahoy]

Unfortunately this seems to break once live.
My site/admin/ URL is giving a 403 Forbidden error?

[hksk]

yes I stop to use tinacms and I make my own admin and finally works...

[architchandra]

I'm facing a similar issue with Eleventy. The original images and the transformed images have different filenames and paths. Tina CMS does not account for this and my configuration is just not working as a result. I'm guessing one option would be to change the image transformation logic to keep filenames and paths the same, but that is extremely cumbersome and goes against the original image filename and path rationale. Really unhappy about this.