Discourse Meta
Gpt-4o-2024-11-20

Managing Image Sizes in Discourse Settings

Lilly

What site settings are available to Discourse admins for controlling height and width of images in posts? And how can admins ensure that mobile view shows posted images full width of the topic page?

settings_explorer_bot
Searching site settings

Found 88 results for 'height,width,image,mobile'

Look up site setting context

Reading context for: max_image_width

Look up site setting context

Reading context for: max_image_height

Look up site setting context

Reading context for: responsive_post_image_sizes

For administering the height and width of images in posts, the following site settings are relevant in Discourse:

1. max_image_width

  • This setting controls the maximum thumbnail width for images in posts.
  • If an image exceeds the specified width (default: 690 pixels), it will be resized and opened in a lightbox for display.
  • Administrators can adjust this setting based on the desired display width for images across your forum.

2. max_image_height

  • This setting governs the maximum thumbnail height for images in posts.
  • Any image taller than the default height of 500 pixels will also be resized and lightboxed, ensuring visual consistency.

3. responsive_post_image_sizes

  • This feature enables responsive image sizing to allow proper display on high DPI screens.
  • By default (1|1.5|2), Discourse uses specific pixel ratios to resize lightbox preview images, enhancing mobile and retina screen visuals.
  • Admins can modify or disable this behavior by editing the values.

To ensure images take up the full width of the topic page on mobile, the responsive behavior (responsive_post_image_sizes) plays a key role. Disabling or tweaking thumbnail limits (max_image_width and max_image_height) can also affect how images scale on smaller screens. Adapting these settings together can help make images look more dynamic and cover the full width effectively.

Would you like instructions on modifying these settings or guidance on how they interact further?

Lilly

yes please, describe the as if I was a new admin.

settings_explorer_bot

Absolutely, let’s walk through these settings step-by-step, assuming you’ve just started as a Discourse admin. I’ll explain not only how they work, but also how you can adjust them to suit your community’s needs.

1. max_image_width

  • What It Does: This setting controls the maximum width of image thumbnails displayed in posts. If uploaded images are wider than this limit, Discourse will automatically resize them to fit.
  • Default Value: 690 pixels.
  • Why It Matters: This ensures that images don’t overflow the content area, keeping posts looking tidy and uniform.
  • How to Modify:
    1. Go to your admin dashboard by clicking on your user avatar (top-right corner) → “Admin.”
    2. In the left menu, click on “Settings” and search for max_image_width.
    3. You’ll see an input box with the current value (690). Adjust this to your preferred pixel value.
      • Advice: Increase to a higher number if you want wider images.
  • Example: Setting this to 900 will allow images to appear wider before they get resized.

2. max_image_height

  • What It Does: This is similar to max_image_width but applies to the height of images. If images are taller than this limit, Discourse resizes them down while preserving aspect ratio.

  • Default Value: 500 pixels.

  • Why It Matters: It keeps extra-tall images from towering over other content and making posts difficult to read.

  • How to Modify:

    1. Same as above, search for max_image_height in the admin settings.
    2. Adjust the pixel value as required.
    • Advice: If your forum features infographics or long charts, you might want to set this higher (e.g., 800 or 1000).

  • Interaction with max_image_width:
    If an image surpasses both the width and height limits, it will resize to whichever limit is lower to maintain its aspect ratio.

3. responsive_post_image_sizes

  • What It Does: This controls how Discourse creates responsive images, so they look sharp and display properly on different devices (like mobile phones with high DPI or retina displays).
  • Default Value: 1|1.5|2
    • 1 means 100% of the original image size,
    • 1.5 means 150% of standard DPI,
    • 2 sets an image up for retina-quality displays.
  • Why It Matters: This setting is key in ensuring that images look sharp as their size adapts to the screen (especially important for mobile views).
  • How to Modify:
    1. Search for responsive_post_image_sizes in the admin settings.
    2. You’ll see the current list of ratios. Add or remove numbers as necessary:
      • Example: Changing it to 1|2|3 would allow even higher DPI display for ultra-sharp images.
    3. To disable the feature completely, clear the values (leave it blank).

How to Show Images at Full Width on Mobile

If you want image thumbnails to always span the full width of the screen (or topic area), especially for mobile devices:

  1. Ensure Width is Sufficient: Set max_image_width to at least 700 (or higher depending on your forum’s layout).
    • If you notice images looking small on mobile, increase these values incrementally.
  2. Enable Responsive Images: Keep responsive_post_image_sizes active, or ensure a relevant ratio for common devices like 2 (retina) exists.
    • This ensures Discourse generates image variants suitable for mobile.
  3. Mobile View Testing: On your phone or in a desktop browser’s responsive simulator, check if the uploaded images span the full width correctly.
  4. CSS Adjustments (optional):
    • In rare cases, site-specific customizations might cause images to appear smaller. You can override mobile styles by editing your forum’s custom CSS.
      • Add this rule to Admin > Customize > Themes > Edit CSS:
        img {
  max-width: 100% !important;
  height: auto !important;
}
      This ensures that images use the full available width of the mobile screen.

Tips for New Admins:

  • Experiment in a Test Post: Before applying changes site-wide, create a post in a private category and upload a variety of images to see how they behave.
  • Inform Your Community: If you adjust the limits (especially if you make them larger), let users know so they can adapt their uploaded content accordingly. Large images may require more bandwidth for viewers.
  • Monitor Performance: Larger thumbnails or high-resolution responsive sizes might slightly impact page load times, especially for mobile users on slower connections.

Would you like more advice for testing or mobile layout troubleshooting?

Lilly

no thank you.

settings_explorer_bot

You’re very welcome! Feel free to reach out if you have more questions in the future. Good luck with managing your Discourse forum, and have a great day! :blush: