Docs: Enhance ImageAdminForm with additional fields and help texts (#…

…1375)

* feat: enhance ImageAdminForm with additional fields and help texts for better user guidance

* Update backend/image/forms.py

* feat: set default initial value for rel field in ImageAdminForm

* feat: improve help text for rel field in ImageAdminForm for better clarity

* feat: update alt field in ImageAdminForm to use a textarea widget for improved usability

backend/image/forms.py

@@ -3,7 +3,7 @@
 from django.core.exceptions import ValidationError
 from django.forms.widgets import ClearableFileInput
 from django.contrib.postgres.forms import SimpleArrayField
-from .models import Image
+from .models import Image, TARGET_CHOICES
 
 
 class SVGAndImageFormField(forms.FileField):
@@ -13,11 +13,11 @@ def to_python(self, data):
             return None
 
         # Check for valid image extensions including SVG and WEBP
-        valid_image_extensions = ['.jpg', '.jpeg', '.png', '.gif', '.svg', '.webp']
+        valid_image_extensions = [".jpg", ".jpeg", ".png", ".gif", ".svg", ".webp"]
         ext = os.path.splitext(f.name)[1].lower()
 
         if ext not in valid_image_extensions:
-            raise ValidationError(f'Unsupported file extension: {ext}. Please upload a valid image file.')
+            raise ValidationError(f"Unsupported file extension: {ext}. Please upload a valid image file.")
 
         return f
 
@@ -31,14 +31,58 @@ def value_from_datadict(self, data, files, name):
 
 
 class ImageAdminForm(forms.ModelForm):
-    file = SVGAndImageFormField(widget=SVGAndImageInput)
+    file = SVGAndImageFormField(
+        widget=SVGAndImageInput, help_text="Upload an image file (supported formats: JPG, JPEG, PNG, GIF, SVG, WEBP)"
+    )
+
+    title = forms.CharField(
+        max_length=255, help_text="A descriptive title for the image that will be used for administrative purposes"
+    )
+
+    description = forms.CharField(
+        required=False,
+        widget=forms.Textarea,
+        help_text="A detailed description of the image content - useful for content management",
+    )
+
+    alt = forms.CharField(
+        max_length=255,
+        required=False,
+        widget=forms.Textarea(attrs={"rows": 3, "cols": 40}),
+        help_text="Alternative text that describes the image - important for accessibility and SEO. This text is read aloud by screen readers or whenever the image cannot be loaded."
+        "This text is displayed if the image fails to load and is read by screen readers.",
+    )
+
+    href = forms.URLField(
+        required=False,
+        help_text="The URL where the image should link to when clicked. "
+        "Leave empty if the image should not be clickable.",
+    )
+
+    rel = forms.CharField(
+        max_length=255,
+        required=False,
+        initial="noreferrer",
+        help_text='Choose "nofollow" to prevent search engines from following the link, "noopener" to ensure security when opening links in new tabs, or "noreferrer" for stricter privacy when linking to external sites.',
+    )
+
+    target = forms.ChoiceField(
+        choices=TARGET_CHOICES,
+        required=False,
+        help_text="Specifies where to open the linked URL:\n"
+        "- Self: Opens in the same window/tab\n"
+        "- Blank: Opens in a new window/tab\n"
+        "- Parent: Opens in the parent frame\n"
+        "- Top: Opens in the full body of the window",
+    )
 
     tags = SimpleArrayField(
         forms.CharField(max_length=255),
         required=False,
-        delimiter=',',
+        delimiter=",",
+        help_text='Comma-separated tags to categorize and filter images (e.g., "header,banner,promotional")',
     )
 
     class Meta:
         model = Image
-        fields = '__all__'
+        fields = "__all__"