I'm trying to use Cloudcannon as a CMS for a Hugo-based website. For some of my content types, I use Hugo's image processing, which means I store those images that need to be processed under assets/ rather than static/.
Cloudcannon allows for image inputs to be configured with a custom upload directory, which I need to go to the correct subdirectory of assets/images/ for each content type. That works fine--the images are uploaded to the right location. The problem is that then the frontmatter path for the image includes the assets/ part of the directory path, which doesn't work for Hugo.
My configuration is as follows, allowing images uploaded for different content types to go in different subdirectories of assets/images/.
collections_config:
news:
schemas:
default:
path: schemas/news.md
name: News post
path: content/english/news
_inputs:
image:
type: image
options:
uploads_dir: assets/images/news
clients:
schemas:
default:
path: schemas/client.md
name: Client listing
path: content/english/clients
_inputs:
image:
type: image
options:
uploads_dir: assets/images/clients
Is there any way to set the fontmatter output path to exclude assets/? Maybe there's a separate option from uploads_dir I haven't found?
Help greatly appreciated!
You can set a static path here. The static path is used when uploading new files, but is not saved as part of the path for the front matter field. It's set globally, and defaults to your Hugo --staticDir command line option (defaults to static).
Here's how you would set it up for your code example:
Create or add to /cloudcannon.config.yml:
paths:
uploads: assets/images/[collection]
static: assets
Uploading a new file called cat.png on an input in the news collection here is sent to: /assets/images/news/cat.png. The value saved in the front matter is /images/news/cat.png.
I've also set a global uploads path here with the [collection] placeholder, which will have the same result as your uploads_dir options - and you won't have to set it multiple times.
Related
What I want to do is let a user save an image and when they're accessing their accounts I want the image to display.
What I'm currently doing is I'm saving the images in public folder
Store the path to the database
Path: css\img\myPic.jpg
Display the image
<img class="border" src='esc($empInfo['img'])' style="height: 200px; width: 200px">
But since this is a public folder I can't save personal pictures in this folder
I also tried saving the path to writable\uploads\myPic.jpg but no luck
If you look for a manual or a concept , you can also try this:
You must have some folder where you store all personal images
When user needs it, copy the file into Public folder with a random generated 32 character name (GUID type) but with the original extension.
Then feed it to the user in the view.
Once displayed after the view is called you can delete the image from that folder.
As of the the moment. the solution that I got is "copying" the file(in my case it is an image file)from writable/uploads to public using Publish Library.
$publisher = new Publisher(WRITEPATH . 'uploads', FCPATH. 'img/');
$publisher->addPaths([
'img/myPic.jpg',
]);
$publisher->copy(true); // `true` to enable overwrite
Source Path: WRITEPATH . 'uploads'
Destination Path: FCPATH. 'img/'
Source File: img/myPic.jpg
Now you can ref the image in img tags.
Next step should be replacing/deleting the image after use, because this is not gonna be different when you upload the image at public folder. Will try to update if I found a solution
Source: https://codeigniter.com/user_guide/libraries/publisher.html
PS. Feel free to correct me :) I am also new to web developing in general
Part2: I added this to my function. what it does is after copying the image to the public folder I then rename to 'myPic.jpg'. this will solve my previous problem "replacing/deleting the image after use".
$renameFile = rename(FCPATH. 'img/'.$fileName, FCPATH . 'img/'. 'myPic.jpg');
if($renameFile){
return true;
}
else{
return false;
}
I want add an image to hugo's md file. And I want see it on local and website, and use a single directory to store it. So I try to put it on /content/posts/image/xxx.img and write md file with  it's work in vscode but not in website. Is there way to get it?
Find it in hugo https://discourse.gohugo.io/t/how-to-add-image-to-hugo-with-local-and-remote/41391/8
The answer is change the conf file.
[[module.mounts]]
source = 'static'
target = 'static'
[[module.mounts]]
source = 'images'
target = 'static/images'
I have a problem, when I click to go to the /analytics page on my site, adblockers block the analytics.json file that's being requested by Next.js as they think it's an analytics tracker (it's not, it's a page listing analytics products).
Is there a way to rename the route files Next.js uses when navigating to server-side rendered pages on the client-side?
I want to either obfuscate the names so they're not machine readable, or have a way to rename them all.
Any help appreciated.
With thanks to #gaston-flores I've managed to get something working.
In my instance /analytics is a dynamic page for a category, so I moved my pages/[category]/index.tsx file to pages/[category]/category.tsx and added the following rewrite:
// next.config.js
module.exports = {
async rewrites() {
return [
{
source: "/:category",
destination: "/:category/category",
},
];
},
};
This now gets the category.json file rather than analytics.json, which passes the adblockers checks and renders as expected.
Note that due to having a dynamic file name in the pages/[category] directory (pages/[category]/[product].tsx), I had to move that to pages/[category]/product/[product].tsx as I was seeing the /analytics page redirected to /analytics/category for some reason without this tweak.
I used https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/ to create the sitemap for my website.
Currently, the sitemap is listed at https://www.myWebsite.com/sitemap/sitemap-0.xml, but I want it to be located at https://www.myWebsite.com/sitemap.xml
How can I change the sitemap's location? Sorry if this is obvious
You can't automatically since there's no option nor configuration to do so. Your only change is using any small Node script that changes the filename or doing it manually.
However, there's no SEO problem at all having a sitemap-0.xml as long as you point your Google's Search Console to that file.
Another solution is using gatsby-plugin-advanced-sitemap which by default outputs a file named sitemal.xml as you can see in their example: https://gatsby.ghost.org/sitemap.xml. This plugin is based on the one you are using so it should be quite straightforward swapping between them.
Another solution is to use the same gatsby-plugin-sitemap plugin and then add:
gatsby-plugin-robots-txt plugin and point to the file name in the gatsby-config Something as bellow:
{
resolve: 'gatsby-plugin-robots-txt',
options: {
host: SiteConfig.url,
sitemap: ${SiteConfig.url}/sitemap.xml, HERE PLACE sitemap-0.xml
policy: [{ userAgent: '*', allow: '/' }]
}
},
After doing that, look for set up on webpage/robots.txt to see where is the point
I am using hugo (https://gohugo.io/) and trying to make an external link in the menu (docsy theme).
I changed the _index.md to:
---
title: "Documentation"
linkTitle: "Documentation"
url: "https://www.myurl.com"
weight: 20
menu:
main:
weight: 20
---
However hugo reports:
Rebuild failed: URLs with protocol (http*) not supported
Could anyone advise of how to create an external URL link directly on the menu?
Thanks, Gregor
Keep in mind that "url" is a predefined front matter variable that is meant to be used for defining the full path to the content page from the site root. If you want to add an external link in your front matter, I'd recommend giving the variable a different name, e.g. "external_url".
I just added something like this:
[[menu.main]]
name = "GitHub"
weight = 50
url = "https://github.com/google/docsy/"
To the config.toml file.
I found this solution for the docsy theme here: https://www.docsy.dev/docs/adding-content/navigation/
Hope this helps, Gregor