fix image size in title content image slide

Author: PrajwolAmatya

README.md

@@ -84,12 +84,19 @@ Following the front matter, create slides as described in [Creating Presentation
 
 Besides default metadata, you can also provide inline metadata for each slide. This will be useful when you want to
 override the default metadata for a specific slide and this will be applied to that slide only. The inline metadata can
-be defined by adding metadata directly after the slide title as below:
+be defined by adding metadata directly on the slide title as below:
 
 ```markdown
 # Title of the slide ::metadata_key_1:metadata_value_1 ::metadata_key_2:metadata_value_2
 ```
 
+Example:
+```markdown
+# Title of slide ::slide:title-content-image ::logo:logo.png
+```
+
+For this slide, the `slide` template will be set to `title-content-image`, and the `logo` will be set to `logo.png`.
+
 ### Slide Templates
 
 The slide template should be provided in the default metadata. Provide slide template that will be mostly used in the

src/App.vue

@@ -246,7 +246,9 @@ function addCustomSlideNumber() {
   }
 }
 function updateImageStructure() {
-  const pTags = document.querySelectorAll('p > img')
+  const slideContainer = document.getElementById('slideContainer')
+  if (!slideContainer) return
+  const pTags = slideContainer.querySelectorAll('section p > img')
   pTags.forEach((img) => {
     const pTag = img.parentNode
     const divContainer = document.createElement('div')

src/css/templates.css

@@ -145,6 +145,8 @@ footer {
     width: 100%;
 }
 
+
+
 .title-content-image .content-container .content-wrapper .content > ul,
 .title-content-image .content-container .content-wrapper .content > ol,
 .title-content-image .content-container .content-wrapper .content > p,
@@ -161,6 +163,13 @@ footer {
     right: 0;
 }
 
+.title-content-image .content-container .content-wrapper .content .image-container img {
+    max-width: 100%;
+    height: auto;
+    width: auto;
+    max-height: 80vh;
+}
+
 .about-us-text {
     background-color: rgba(32, 67, 79, 0.8);
     width: 100%;