Add example image to Sentry iOS user feedback page

docs/platforms/apple/common/user-feedback/index.mdx

@@ -19,6 +19,8 @@ The User Feedback feature allows you to collect user feedback from anywhere insi
 
 The User Feedback widget allows users to submit feedback from anywhere inside your application.
 
+![An example of the User Feedback Widget on iOS =300x](./img/user-feedback-apple-widget.png)
+
 ### Pre-requisites
 
 Ensure that your project is set up with Sentry and that you have added the Sentry Cocoa SDK to your project.

src/components/docImage/index.tsx

@@ -99,21 +99,34 @@ export default function DocImage({
     imgPath = finalSrc;
   }
 
-  // Parse dimensions from URL hash (works for both internal and external)
-  const hashDimensions = parseDimensionsFromHash(src);
-
-  // Use hash dimensions first, fallback to props
-  const width = hashDimensions[0] > 0 ? hashDimensions[0] : parseDimension(propsWidth);
-  const height = hashDimensions[1] > 0 ? hashDimensions[1] : parseDimension(propsHeight);
+  // Prefer explicit props (coming from MDX attributes) over hash-based dimensions.
+  // If either width or height prop is provided, treat as manual sizing.
+  const manualWidth = parseDimension(propsWidth);
+  const manualHeight = parseDimension(propsHeight);
+
+  // If either width or height is specified manually, ignore any hash dimensions entirely
+  const isManual = manualWidth != null || manualHeight != null;
+  const hashDimensions = isManual ? [] : parseDimensionsFromHash(src);
+  const width = isManual
+    ? manualWidth
+    : hashDimensions[0] > 0
+      ? hashDimensions[0]
+      : undefined;
+  const height = isManual
+    ? manualHeight
+    : hashDimensions[1] > 0
+      ? hashDimensions[1]
+      : undefined;
 
   return (
     <ImageLightbox
       src={finalSrc}
       imgPath={imgPath}
+      {...props}
       width={width}
       height={height}
+      isManualDimensions={isManual}
       alt={props.alt ?? ''}
-      {...props}
     />
   );
 }

src/components/imageLightbox/index.tsx

@@ -15,6 +15,7 @@ interface ImageLightboxProps
   imgPath: string;
   src: string;
   height?: number;
+  isManualDimensions?: boolean;
   width?: number;
 }
 
@@ -54,6 +55,7 @@ export function ImageLightbox({
   width,
   height,
   imgPath,
+  isManualDimensions = false,
   style,
   className,
   ...props
@@ -97,21 +99,31 @@ export function ImageLightbox({
     const imageClassName = isInline
       ? className
       : 'max-h-[90vh] max-w-[90vw] object-contain';
+
+    // Apply sizing:
+    // - If manual: set only provided dimension(s); missing one becomes 'auto'
+    // - Else: default responsive
     const imageStyle = isInline
-      ? {width: '100%', height: 'auto', ...style}
+      ? isManualDimensions
+        ? {
+            width: width != null ? `${width}px` : 'auto',
+            height: height != null ? `${height}px` : 'auto',
+            ...style,
+          }
+        : {width: '100%', height: 'auto', ...style}
       : {width: 'auto', height: 'auto'};
 
     if (shouldUseNextImage && dimensions) {
       return (
         <Image
           src={renderedSrc}
-          width={dimensions.width}
-          height={dimensions.height}
           style={imageStyle}
           className={imageClassName}
           alt={alt}
           priority={!isInline}
           {...imageCompatibleProps}
+          width={dimensions.width}
+          height={dimensions.height}
         />
       );
     }

src/mdx.ts

@@ -35,6 +35,7 @@ import remarkCodeTitles from './remark-code-title';
 import remarkComponentSpacing from './remark-component-spacing';
 import remarkExtractFrontmatter from './remark-extract-frontmatter';
 import remarkFormatCodeBlocks from './remark-format-code';
+import remarkImageResize from './remark-image-resize';
 import remarkImageSize from './remark-image-size';
 import remarkTocHeadings, {TocNode} from './remark-toc-headings';
 import remarkVariables from './remark-variables';
@@ -583,6 +584,7 @@ export async function getFileBySlug(slug: string): Promise<SlugFile> {
         remarkFormatCodeBlocks,
         [remarkImageSize, {sourceFolder: cwd, publicFolder: path.join(root, 'public')}],
         remarkMdxImages,
+        remarkImageResize,
         remarkCodeTitles,
         remarkCodeTabs,
         remarkComponentSpacing,

src/remark-image-resize.js

@@ -0,0 +1,52 @@
+import {visit} from 'unist-util-visit';
+
+const SIZE_FROM_ALT_RE = /\s*=\s*(\d+)?x?(\d+)?\s*$/;
+/**
+ * remark plugin to parse width/height hints from the image ALT text.
+ *
+ * This plugin is intended to run AFTER `remark-mdx-images`, so it processes
+ * mdxJsxTextElement nodes named `img` (i.e., <img /> in MDX).
+ *
+ * Supported ALT suffixes (trailing in ALT text):
+ *   ![Alt text =300x200](./image.png)
+ *   ![Alt text =300x](./image.png)
+ *   ![Alt text =x200](./image.png)
+ *   ![Alt text =300](./image.png)
+ *
+ * Behavior:
+ * - Extracts the trailing "=WxH" (width-only/height-only also supported).
+ * - Cleans the ALT text by removing the size suffix.
+ * - Adds numeric `width`/`height` attributes to the <img> element.
+ */
+export default function remarkImageResize() {
+  return tree =>
+    visit(tree, {type: 'mdxJsxTextElement', name: 'img'}, node => {
+      // Handle MDX JSX <img> produced by remark-mdx-images
+      const altIndex = node.attributes.findIndex(a => a && a.name === 'alt');
+      const altValue =
+        altIndex !== -1 && typeof node.attributes[altIndex].value === 'string'
+          ? node.attributes[altIndex].value
+          : null;
+      if (altValue) {
+        const m = altValue.match(SIZE_FROM_ALT_RE);
+        if (m) {
+          const [, wStr, hStr] = m;
+          const cleanedAlt = altValue.replace(SIZE_FROM_ALT_RE, '').trim();
+          // set cleaned alt
+          node.attributes[altIndex] = {
+            type: 'mdxJsxAttribute',
+            name: 'alt',
+            value: cleanedAlt,
+          };
+          // remove any pre-existing width/height attributes to avoid duplicates
+          node.attributes = node.attributes.filter(
+            a => !(a && (a.name === 'width' || a.name === 'height'))
+          );
+          if (wStr)
+            node.attributes.push({type: 'mdxJsxAttribute', name: 'width', value: wStr});
+          if (hStr)
+            node.attributes.push({type: 'mdxJsxAttribute', name: 'height', value: hStr});
+        }
+      }
+    });
+}