Skip to Content
0 Votes

Advanced Image Insertion and Scripting

Last modified by Ryan C on 2025/03/15 20:07

Uploads and Scripts

This section covers uploading assets to the site and automating tasks with scripts.

Uploading Assets

To upload images or other assets:

  1. Navigate to the Asset manager on the page you are creating. ![[f6omxickm4_thumb.png
  2. Drag and drop your files or click "Browse."
  3. Try to follow the file naming guidelines:
    • Use descriptive names.
    • Avoid spaces and special characters.

Supported File Types

  • Images: .jpg, .png, .gif, .webp
  • Documents: .pdf, .docx, .xlsx

File Organization

  • You can create a new folder for assets that dont fit into any of the created categories.

Embedding Images

Embed images in your pages using markdown

   ![categories.jpg](/categories.jpg)

categories

For clickable images that open larger versions in a new page:

<a href="/imagename.jpg">
    <img src="/imagenamethumb.jpg" alt="Image 1">
</a>

renders as

Image 1

when you replace the imagename with the uploaded file name. Note for this to work you must upload 2 images, one for the thumbnail one for the bigger image.

This way is easier to remember but you can do either in markdown.  [![categories](https://www.thewhitearchive.org/categoriesthumb.jpg)](https://www.thewhitearchive.org/categories.jpg))

This renders as

![[categories

If you're having trouble with it showing up, the important part is the [![ex](fulllink)] then just put the larger image next to it (fulllinkagain)

To ensure images meet quality and usability standards, test resizing and clarity before uploading. Suggested tools include:

  • ReduceImages for single-image resizing.
  • image magick for batch images. I've even put together scripts that you can save which will take all the images from one folder, resize and rename them, and output them in 2 separate folders

Linking PDFs

You can link to uploaded PDFs in both Markdown and HTML formats:

  • Markdown: [PDF Title](/pdfs/disinformation-study.pdf)

example

Ensure PDFs are named appropriately and stored in the correct /uploads folder. Test links after uploading to confirm functionality.

Version Control

All edits are tracked in the wiki's version control system. If you make a mistake, you can revert to a previous version of the page.

Scripts

I've put together a short guide on streamlining your upload process if you have a large amount of images to upload or you just are lazy like me and dont want to manually resize and rename each image.

Setting Up ImageMagick and Preparing Your Environment

This guide walks you through installing ImageMagick and setting up your system to run the provided image processing scripts effectively.

Step 1: Install ImageMagick

  1. Download ImageMagick:
    • Visit the official ImageMagick download page.
    • Choose the version compatible with your operating system (Windows, macOS, or Linux).
      • For Windows users, download the Windows Executable (with legacy utilities if possible).
  2. Install ImageMagick:
    • Run the installer and follow the on-screen instructions.
    • During installation:
      • Enable "Add application directory to your system PATH": This allows you to run the magick command from any directory in your terminal or scripts.
      • Ensure the Legacy Utilities option is checked for backward compatibility (optional but recommended).
  3. Verify Installation:
    • Open a terminal or PowerShell window.
    • Run:
magick -version
* You should see version information for ImageMagick. If not, ensure it is installed and added to your system PATH.

Step 2: Prepare Directories for Scripts

  1. Organize Your Workspace:
    • Create directories to store your images and outputs. For example:
C:\OrganizedData\Webserver\Pics and references
├── toberesized      # Source directory for images to process
├── resized images   # Output directory for resized images
└── thumbnails       # Output directory for thumbnails
* These directories will serve as the input and output paths for your scripts.

Step 3: Set Up PowerShell for Scripts

Ai wrote this out as really complicated but its not. Once you have your folders, just create a text document, save it as whatever you want ex. imageresizer and save or rename it as a .ps1 file. Alternatively, here is the script for you to just download.  testscript.ps1

# Directories
$sourceDir = "C:\path\to\toberesized"
$resizedDir = "C:\path\to\resized images"
$thumbsDir = "C:\path\to\thumbnails"

# Ensure output directories exist
if (!(Test-Path $resizedDir)) { New-Item -ItemType Directory -Path $resizedDir | Out-Null }
if (!(Test-Path $thumbsDir)) { New-Item -ItemType Directory -Path $thumbsDir | Out-Null }

# Get all image files
$imageFiles = Get-ChildItem -Path $sourceDir -File | Where-Object { $_.Extension -in ".jpg", ".jpeg", ".png", ".bmp", ".webp" }


# Process each image
foreach ($image in $imageFiles) {
   $originalPath = $image.FullName
   $originalName = $image.BaseName
   $extension = $image.Extension

   # Define output paths
    $resizedPath = Join-Path $resizedDir "$originalName$extension"
   $thumbPath = Join-Path $thumbsDir "$originalName`_thumb$extension"

   # Generate resized image
    magick "$originalPath" -resize 1920x1080 "$resizedPath"

   # Generate thumbnail
    magick "$originalPath" -resize 300x300 "$thumbPath"

   # Check if outputs were created
    if (Test-Path $resizedPath -and Test-Path $thumbPath) {
        Write-Output "Successfully processed: $originalPath"
    } else {
        Write-Output "Failed to process: $originalPath"
    }
}

Write-Output "All images processed successfully!"




 
-   [Your Sandbox](/en/sandbox): Experiment and draft content.
-   [Formatting Guide](/en/admin/contribute/formatting-the-basics): Detailed rules for structuring your pages.
-   [All Pages](/en/all-pages): Browse existing content for inspiration.