This is general information pertaining to photos that you are going to use on the website.
You are most likely going to use photos that have been taken using your cellphone camera. Here are some tips for making life easier.
If you are starting a project such as a blog post, make a folder on your computer and put all your photos in that folder.
Rename your photos.
Rename your photos giving them names that describe the photo or the task you are using them for.
When renaming photos, use hyphens or underscores between words instead of spaces
If this is for a blog, name your top photo such that it will be first in an alpha-numeric sort. such as 01_this_nice_boat.jpg you don't need to add a number to the other photos, just the one you want to be first.
Resize your photos. The photos from your digital camera are too large, so resize them. Resize them to 1600 pixels wide. That should be more than adequate for all devices.
Resizing photos using Windows.
There are many ways to resize photos, the default picture viewer in Windows does a good job.
Open your photos folder in Windows Explorer.
Doubleclick on the first photo, press the ... menu icon at the top-far-right and choose Resize photo
Select the option"M" best for Email and Messages. That will give you a perfect result for the website. It will ask you to save the photo, I suggest creating a subfolder called "reduced" and save it in there.
This picture shows where to click to resize a photo
Adding photos to pages on the website using Grav editor.
The above line of code is the Markdown for placing a picture on a page. This markdown code should be on a line by itself. It is very easy to understand what is happening in that code.
! is the start, it means there will be a photo
[] Square brackets is where you put the description on the photo. This description is invisible to users but Search Engines read it.
() this is where the filename or path of the image goes.
To add a photo to a page:
make sure you have uploaded your resized photos to the Page Media Uploader.
place your cursor in the editor where you would like the photo.
Hover over the photo you wish to add and press the + that becomes visible.
That will add the necessary markdown to the page which you can then edit the content between the [] square brackets.
Making an image responsive:
When you put a photo on a blog post, you will find that it it too big for the page when you look at your final result. This is because the image is not scaling to the size of the screen which is what you normally want with a large photo. To fix this, there is a some markdown that you add to the end of the photo markdown.
{.img-responsive}
Just append this to the tail end of the picture code so it looks like this:
{.img-responsive}
With Grav, there are many things you can do to manipulate photos, here is link that describes it, you may feel adventurous. Remember when looking at this help file, you are working with "Markdown" not "Twig".
Batch resizing your images.
If you have a folder with a great number of images and you want to save some steps, I have a trick that I use in Windows. Have your photos in a folder and then select them all at the same time "Ctrl-A" will select all in a folder, or user your mouse to select them. Right-click on any file in the selection and choose "Send to > Mail recipient" Then you will be asked to choose a size. I would suggest "Large". Doing this will add all the images to an email as a bunch of attachments. Don't sent it though, just drag and drop all those attached files into a folder on your computer and then delete the message.
There are many ways to batch resize images, you can do a google search on it to find some free tools.
This picture shows where to click to resize a photo