Differences

This shows you the differences between two versions of the page.

--- en:moodle:course:settings:image:start [2023/10/24 10:48] – created helmke
+++ en:moodle:course:settings:image:start [2024/08/05 11:43] (current) – maziyar
@@ Line 1: / Line 1: @@
 ====== Course image ======
-You can add a thematically appropriate course image to your course. Files of the format PNG/JPG/GIF are allowed. Optimally, choose the dimension **413x112px** for the graphic.
+You can add a thematically appropriate course image to your course. Files in PNG / JPG / GIF format are permitted. Ideally, select a pixel ratio of 3:1 e.g. 1500x500 pixels for the graphic.
-**Instructions**:
+===== Insert static course image =====
-. **Turn on editing** \\
+  * Go to the course navigation bar on the course overview page and select the tab "**Settings**".
-. **Select Edit Settings** \\
+  * Scroll down to the "**Course image**" under the "**Description**" section.
-. in the tab "description" scroll to the item "course image" \\
+  * Select "**Add...**" in the file selection window.
-. in the file selection window select **Add file** \\
+  * Choose the desired image file from your file explorer / finder to upload it.
+  * Finish with "**Save and display**".
-{{:de:moodle:settings:banner:kursbild_dateiauswahl.png?600|}}
+{{:en:moodle:course:settings:image:courseimage.png?600|}}
+{{:en:moodle:course:settings:image:filepicker.png?600|}}
-. Select desired image file from your explorer/finder.
+===== Design of the course image =====
-{{:de:moodle:settings:banner:kursbild_upload.png?600|}}
+The moodle theme "**Boost Union**" works with a fluid design that is responsive and always adapts to the size of the browser window.
+Therefore, course images are cropped depending on the display conditions (resolution, aspect ratio).
+To ensure the best possible display behavior, we provide a template for a course image in PSD format e.g. for Adobe Photoshop.
-. **Save course settings**.  \\
+**Note:** Design the course image so that the focus is centered so that the core element remains visible even in smaller displays (the course overview in the dashboard crops the edges).
+   * **Tip 1:** Is the name of the course or your text very long? Then reduce the font size so that the dimensions of the text in the example are not exceeded.
+   * **Tip 2:** Want a different color for the background? Simply color the "**Layout 1**" as desired. The text color can of course also be changed. Please note that a good and reader-friendly design requires sufficient contrast between the background and the text.
+   * **Tip 3:** Can I also use graphics / photos / images? This is possible, but not recommended for the theme we use. Due to the fluid adaptation of the graphics, additional graphic elements are not displayed in the desired position and in the correct size.
-You want to delete the course image again?
-Simply select the image in the file selector and click on the trash button.
-{{:de:moodle:settings:banner:kursbild_loeschen.png?600|}}
+===== Template course image =====
+You can use our template to design a course image.
+The optimal procedure would be then:
+  - To unzip the zipped PSD file and open it with a graphics program (e.g. Adobe Photoshop or Gimp).
+  - To design the image as you wish, but please note our [[en:moodle:course:settings:image:start#design_of_the_course_image|design tips]].
+  - To save the image > Export > Save for web (quality 85, JPEG, optimized).
+{{ :de:moodle:settings:image:moodle4x_kursbild_vorlage.psd.zip |PSD template for download}}
+===== Insert animated course image (as GIF) =====
+It is also possible to insert an animated image as a course image.
+To do this, you can use a graphics program of your choice (e.g. Photoshop, InDesign, Canva, Adobe Express,...) to create images that you can convert into a .gif file using a GIF converter (e.g. [[https://ezgif.com/|ezGIF]]). Short videos in mp4 format can also be converted into GIFs.
+The finished file is integrated into the course in the same way as with [[en:moodle:course:settings:image:start#statisches_kursbild_einfuegen|static images]].
+===== Delete a course image =====
+  * Select the image in the file selection and click on the "**Delete**" button.
+  * Confirm query.
+{{:en:moodle:course:settings:image:deleteimage.png?400|}}