Added ability to toggle full width of cover image in blogs

backend/apimanager/migrations/0016_blog_full_with_image.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.6 on 2024-06-25 09:55
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apimanager', '0015_alter_userdata_dark_theme_alter_userdata_light_theme'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='blog',
+            name='full_with_image',
+            field=models.BooleanField(default=True),
+        ),
+    ]

backend/apimanager/migrations/0017_rename_full_with_image_blog_full_width_cover_image.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.0.6 on 2024-06-25 10:00
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('apimanager', '0016_blog_full_with_image'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='blog',
+            old_name='full_with_image',
+            new_name='full_width_cover_image',
+        ),
+    ]

backend/apimanager/models.py

@@ -26,5 +26,6 @@ class Blog(models.Model):
 	description 	= models.CharField(null=False, blank=False, max_length=200)
 	tagline			= models.CharField(null=False, blank=False, max_length=200)
 	cover_image 	= models.CharField(null=True, blank=True, max_length=500)
+	full_width_cover_image = models.BooleanField(default=True)
 	content_body	= models.CharField(default='<p></p>', null=False, blank=False, max_length=100000)
 	parent_category = models.ForeignKey(Category, on_delete=models.CASCADE, related_name="blogs")

backend/apimanager/publish_views.py

@@ -134,6 +134,7 @@ class Publish(APIView):
                     "name": eachBlog.name,
                     "description": eachBlog.description,
                     "coverImage": self.sanitize_media_link(eachBlog.cover_image),
+                    "fullWidthCoverImage": eachBlog.full_width_cover_image,
                     "tagLine": eachBlog.tagline,
                     "parentCategory": str(eachBlog.parent_category.category_id),
                     "contentBody": self.sanitize_media_link(eachBlog.content_body, 'content_media')

backend/apimanager/serializers.py

@@ -49,6 +49,7 @@ class BlogSerializer(serializers.ModelSerializer):
 			'description',
 			'tagline',
 			'cover_image',
+			'full_width_cover_image',
 			'content_body',
 			'parent_category'
 		]
@@ -76,6 +77,7 @@ class UnifiedCategoryBlogSerializer(serializers.ModelSerializer):
 			'name': blog.name,
 			'description': blog.description,
 			'cover_image': blog.cover_image,
+			'full_width_cover_image': blog.full_width_cover_image,
 			'tagline': blog.tagline,
 			'parent_category': blog.parent_category.category_id
 		} for blog in blogs]

frontend/editable-ui/src/components/blog.jsx

@@ -60,6 +60,17 @@ function Blog(props) {
     toggle()
   }
 
+  const setCoverImageWidth = () => {
+    EditableDataService.updateData(`/data/blog/update/${blogID}/`,{
+      'full_width_cover_image': !blogData.fullWidthCoverImage
+    }).then(() => {
+      props.notificationToggler('Blog data saved!');
+      getInfo()
+    }).catch(() => {
+      props.notificationToggler('Failed to update blog!', 'danger');
+    });
+  }
+
   const deleteResource = () => {
     EditableDataService.deleteData(`/data/blog/delete/${blogData.id}/`).then(() => {
       props.notificationToggler('Blog successfully deleted')
@@ -79,6 +90,7 @@ function Blog(props) {
         'description': responseData['description'],
         'tagLine': responseData['tagline'],
         'coverImage': responseData['cover_image'],
+        'fullWidthCoverImage': responseData['full_width_cover_image'],
         'parentCategory': responseData['parent_category']
       })
       setBlogContent(responseData['content_body'])
@@ -110,8 +122,8 @@ function Blog(props) {
                 <img
                   src={EditableMediaService.getMedia(blogData.coverImage)}
                   alt='Banner'
-                  className='rounded'
-                  style={{ width: '100%', height: 'auto', maxHeight: '50vh', objectFit: 'cover' }}
+                  className={`rounded ${blogData.fullWidthCoverImage ? '' : 'mx-auto d-block'}`}
+                  style={{ width: blogData.fullWidthCoverImage ? '100%' : 'auto', height: 'auto', maxHeight: '50vh', objectFit: 'cover' }}
                 />:''
             }
           </Col>
@@ -136,6 +148,9 @@ function Blog(props) {
               Remove Cover Image
               </Button>
             </ButtonGroup>
+            <Button outline active={blogData.fullWidthCoverImage} color={ThemeConfig[GlobalTheme].buttonColor} onClick={() => setCoverImageWidth()} className='mb-5 ms-3'>
+            Full Width Image: {blogData.fullWidthCoverImage ? 'Yes' : 'No'}
+            </Button>
             <InputGroup className='mb-3'>
               <InputGroupText>Name</InputGroupText>
               <Input innerRef={nameField} defaultValue={blogData.name} />

frontend/viewable-ui/src/components/blog.jsx

@@ -93,9 +93,9 @@ function Blog(props) {
               blogData.coverImage ?
                 <img
                   src={MediaService.getMedia(blogData.coverImage)}
-                  alt="Banner"
-                  className='rounded'
-                  style={{ width: '100%', height: 'auto', maxHeight: '50vh', objectFit: 'cover' }}
+                  alt='Banner'
+                  className={`rounded ${blogData.fullWidthCoverImage ? '' : 'mx-auto d-block'}`}
+                  style={{ width: blogData.fullWidthCoverImage ? '100%' : 'auto', height: 'auto', maxHeight: '50vh', objectFit: 'cover' }}
                 />:''
             }
           </Col>