Adding Photos, Videos & Making Website Updates

This guide explains how to add new visual content and make general updates to your website.

1. Preparing Your Media

For the best performance and appearance, follow these guidelines:

• Images: Use JPG or WebP formats. Aim for a 4:3 or 16:9 aspect ratio.
• Videos: Use MP4 format. Keep videos short (under 10 seconds for backgrounds) and compressed.
• Resolution: 1200px width is ideal for gallery photos.

2. Uploading Media

1. Open the Media Gallery in your Pagesmith dashboard.
2. Upload your new photos or videos.
3. Copy the URL: Once uploaded, click on the file to copy its permanent CDN URL.

3. Updating the Photo Gallery

To add a new photo to the gallery on the homepage:

1. Open the file src/components/home/Gallery.astro.
2. Find the items array at the top of the file.
3. Add a new entry like this:

{
  src: "YOUR_COPIED_URL",
  srcset: "YOUR_COPIED_URL", // You can use the same URL for both
  alt: "Description of the photo",
  category: "Service Category",
  color: "bg-red-600/20" // Options: bg-blue-600/20, bg-amber-600/20, bg-emerald-600/20
}

4. Adding a Video Section

If you want to add a video background or a video player:

1. Get the Video URL from your media library.
2. Use a <video> tag in your HTML:

<video 
  src="YOUR_VIDEO_URL" 
  autoplay 
  muted 
  loop 
  playsinline 
  class="w-full h-full object-cover">
</video>

5. Making Text and Content Updates

To update text, sections, or settings across your website:

1. Ask the AI Assistant: You can simply type your request in the chat. For example, “Update the text in the About section” or “Change the phone number to XXXXXXX”.
2. Provide context: If you want a specific change, copy and paste the new text directly into the chat and specify which section it belongs to.
3. Site Configuration: To change the overall site name, description, or social media links, request an update to the src/config/site.ts file.

Tips for Success

• Alt Text: Always provide a descriptive “alt” text for images to help with SEO and accessibility.
• Consistency: Use consistent categories for your gallery items to keep the filtering and organization clean.
• Be Specific: When requesting an update via chat, clearly mention the page and section (e.g., “On the homepage, in the Products section”).