I’m trying to understand the best way to handle images in Grav.
I was considering a central image directory at /user/pages/images (as this would be easy to sync with production), but then I realised that page.media.images requires all associated image files to live in the individual page directory, along with the .md file that contains the content for the page.
Does this mean that I should just store my images in Git and use Git to deploy them along with the .md file, etc?
For me, images are just as important as the content. I recommend you using GIt for everything in user folder except some private stuff like accounts and security.yaml. This will backup everything. In WordPress you backup consists of several parts like the database.
On the other hand, adding images to Git will mean that the repository could grow very large over time.
Also, Git doesn’t work well with binary files.
I’ve been tinkering around after your suggestion above and I now have images defined in the header of my .md file, and being served from /user/pages/images/ with operations still working successfully.
I’m now thinking about simply syncing the images directory with production on deploy.
I’m blown away by the way Grav handles responsive images, it’s awesome.
For any WordPress users who might see this, you can define a responsive retina enabled featured image for your page in the header of the .md file like this:
Make an images directory at /user/pages/images, and then upload the image file to the directory. Make sure it’s an oversized image for retina displays, and give it the filename ‘some-image@3x.jpeg’
In your twig template, add the following to show the image:
Remember to mark it as solved so that the people looking for an answer do not miss it Also it is a great way to help people who did not get an answer yet.
Great example BTW! There are basically limitless possibilities to customize without knowing any PHP!
I need to use lot of images on more than one page and prefer a central image directory for those images. So I did create a directory user/pages/images and use those images in several pages this way:
![alt-text](/images/myimage.png]
To reference those images in element-style CSS included in templates or in CSS files, use:
<div style="background: url('/images/myimage.png') no-repeat center top;">
Old school, works best for me, but I have not that much image references in twig templates and if I have, I place them in plain HTML, so twig variables are used for the name part, but not the directory. I place only images specific to a single web page in the web page’s directory, but for shared images I do not want to duplicate them, since this would break caching in browsers.
Having spent a bit longer playing with GraV, I’ve come to the conclusion that images should not be stored in the repo.
I’m experimenting with a deploy script that deploys the markdown and twig files from git, compiles the styles locally (and copies them to the target host) and then syncs the image directory using unison.
Seems like a good solution. It should also work with multiple users.
Would love to see how you have implemented this if you don’t mind! Still trying to figure out the best way to deal with images - some are styled directly into the code so I can control the quality and size and whatnot, but the ones that are uploaded through grav or that the user would add I am still having small issues with.
SrcSet doesn’t work always as expected, haven’t gotten that golden jump of sizes just yet.
As for images not being in the repo, how are you going around the issue of images in posts?