Blog image cms (#483)

* fallback logic for social preview images * fallback logic for preview images
2026-09-25 14:08:30 +02:00 · 2023-12-28 11:08:20 +00:00
parent e4a6f954c0
commit 0e59ee37de
52 changed files with 88 additions and 42 deletions
@@ -23,7 +23,7 @@ DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"


 PATH_TO_IMAGE=$1 \
-STATIC_DIRECTORY_NAME="./qdrant-landing/static/blog_data/${2}" \
+STATIC_DIRECTORY_NAME="./qdrant-landing/static/blog/${2}" \
 SOCIAL_PREVIEW_RESOLUTION="1200x630" \
 TITLE_RESOLUTION="916x515" \
 PREVIEW_RESOLUTION="350x201" \
@@ -8,8 +8,8 @@ set -e
 # Example usage
 #
 #
-# PATH_TO_IMAGE="./qdrant-landing/static/blog_data/qdrant-v-1-7/preview.png"
-# STATIC_DIRECTORY_NAME="./qdrant-landing/static/blog_data/qdrant-v-1-7"
+# PATH_TO_IMAGE="./qdrant-landing/static/blog/qdrant-v-1-7/preview.png"
+# STATIC_DIRECTORY_NAME="./qdrant-landing/static/blog/qdrant-v-1-7"


 PATH_TO_IMAGE=${PATH_TO_IMAGE:-""}
@@ -247,7 +247,7 @@ It will create a file `content/blog/<post-title>.md`. Open it and edit the front

 ### Images

-Images for blog posts should be placed in `static/blog_data/<post-title>` directory. You can add nested directories if needed. Use images not smaller than 1200x630px for social media previews.
+Images for blog posts should be placed in `static/blog/<post-title>` directory. You can add nested directories if needed. Use images not smaller than 1200x630px for social media previews.

 ### Important notes

@@ -4,7 +4,7 @@ title: "From Content Quality to Compression: The Evolution of Embedding Models a
 slug: cohere-embedding-v3
 short_description: Nils Reimers head of machine learning at Cohere shares the details about their latest embedding model.
 description: Nils Reimers head of machine learning at Cohere comes on the recent vector space talks to share details about their latest embedding V3 model.
-preview_image: /blog_data/cohere-embedding-v3/preview-nils.png
+preview_image: /blog/cohere-embedding-v3/preview-nils.png
 date: 2023-11-19T12:48:36.622Z
 author: Demetrios Brinkmann
 author_link: https://www.linkedin.com/in/dpbrinkm/
@@ -9,7 +9,7 @@ description: We're happy to share the result of the work we've been into during
  the last months - Quaterion. It is a
  framework for fine-tuning similarity learning models that streamlines the
  training process to make it significantly faster and cost-efficient.
-preview_image: /blog_data/from_cms/new-cmp-demo.gif
+preview_image: /blog/from_cms/new-cmp-demo.gif
 date: 2022-06-28T12:48:36.622Z
 author: Andrey Vasnetsov
 author_link: https://www.linkedin.com/in/andrey-vasnetsov-75268897/
@@ -30,7 +30,7 @@ We're happy to share the result of the work we've been into during the last mont
 [Quaterion](https://quaterion.qdrant.tech/). It is a framework for fine-tuning similarity learning models that streamlines the training process to make it significantly faster and cost-efficient.
 To develop Quaterion, we utilized PyTorch Lightning, leveraging a high-performing AI research approach to constructing training loops for ML models.

-![quaterion](/blog_data/from_cms/new-cmp-demo.gif)
+![quaterion](/blog/from_cms/new-cmp-demo.gif)

 This framework empowers vector search [solutions](https://qdrant.tech/solutions/), such as semantic search, anomaly detection, and others, by advanced coaching mechanism, specially designed head layers for pre-trained models, and high flexibility in terms of customization according to large-scale training pipelines and other features.

@@ -4,7 +4,7 @@ title: New 0.7.0 update of the Qdrant engine went live
 slug: qdrant-0-7-0-released
 short_description: Qdrant v0.7.0 engine has been released
 description: Qdrant v0.7.0 engine has been released
-preview_image: /blog_data/from_cms/v0.7.0.png
+preview_image: /blog/from_cms/v0.7.0.png
 date: 2022-04-13T08:57:07.604Z
 author: Alyona Kavyerina
 author_link: https://www.linkedin.com/in/alyona-kavyerina/
@@ -6,7 +6,7 @@ short_description: Recently Qdrant has become a member of the NVIDIA Inception.
 description: Along with the various opportunities it gives, we are the most
  excited about GPU support since it is an essential feature in Qdrant's
  roadmap. Stay tuned for our new updates.
-preview_image: /blog_data/from_cms/nvidia-inception-program.jpg
+preview_image: /blog/from_cms/nvidia-inception-program.jpg
 date: 2022-04-04T12:06:36.819Z
 author: Alyona Kavyerina
 author_link: https://www.linkedin.com/in/alyona-kavyerina/
@@ -18,7 +18,7 @@ tags:
  - NVIDIA
 sitemapExclude: True
 ---
-![NVIDIA Inception Program](/blog_data/from_cms/nvidia-inception-program.jpg "NVIDIA Inception Program")
+![NVIDIA Inception Program](/blog/from_cms/nvidia-inception-program.jpg "NVIDIA Inception Program")

 Recently we've become a member of the NVIDIA Inception. It is a program that helps boost the evolution of technology startups through access to their cutting-edge technology and experts, connects startups with venture capitalists, and provides marketing support.

@@ -3,7 +3,7 @@ draft: true
 title: Qdrant v0.6.0 engine with gRPC interface has been released
 short_description: We’ve released a new engine, version 0.6.0.
 description: We’ve released a new engine, version 0.6.0. The main feature of the release in the gRPC interface.
-preview_image: /blog_data/qdrant-v-0-6-0-engine-with-grpc-released/upload_time.png
+preview_image: /blog/qdrant-v-0-6-0-engine-with-grpc-released/upload_time.png
 date: 2022-03-10T01:36:43+03:00
 author: Alyona Kavyerina
 author_link: https://medium.com/@alyona.kavyerina
@@ -25,7 +25,7 @@ The main feature of the release in the gRPC interface — it is much faster than

 This results in 3 times faster data uploading on our benchmarks:

-![REST API vs gRPC upload time, sec](/blog_data/qdrant-v-0-6-0-engine-with-grpc-released/upload_time.png)
+![REST API vs gRPC upload time, sec](/blog/qdrant-v-0-6-0-engine-with-grpc-released/upload_time.png)

 Read more about the gRPC interface and whether you should use it by this [link](/documentation/quick_start/#grpc).

@@ -2,7 +2,7 @@
 title: "Qdrant and Jina integration: storage backend support for DocArray"
 short_description: "One more way to use Qdrant: Jina's DocArray is now supporting Qdrant as a storage backend."
 description: We are happy to announce that Jina.AI integrates Qdrant engine as a storage backend to their DocArray solution.
-preview_image: /blog_data/qdrant_and_jina_intergationpreview.jpg
+preview_image: /blog/qdrant_and_jina_intergationpreview.jpg
 date: 2022-03-15T15:00:00+03:00
 author: Alyona Kavyerina
 author_link: https://medium.com/@alyona.kavyerina
@@ -4,7 +4,7 @@ title: v0.8.0 update of the Qdrant engine was released
 slug: qdrant-0-8-0-released
 short_description: "The new version of our engine - v0.8.0, went live. "
 description: "The new version of our engine - v0.8.0, went live. "
-preview_image: /blog_data/from_cms/v0.8.0.jpg
+preview_image: /blog/from_cms/v0.8.0.jpg
 date: 2022-06-09T10:03:29.376Z
 author: Alyona Kavyerina
 author_link: https://www.linkedin.com/in/alyona-kavyerina/
@@ -4,7 +4,7 @@ title: v0.9.0 update of the Qdrant engine went live
 slug: qdrant-v090-release
 short_description: We've released the new version of Qdrant engine - v.0.9.0.
 description: We’ve released the new version of Qdrant engine - v.0.9.0. It features the dynamic cluster scaling capabilities. Now Qdrant is more flexible with cluster deployment, allowing to move
-preview_image: /blog_data/qdrant-v.0.9.0-release-update.png
+preview_image: /blog/qdrant-v.0.9.0-release-update.png
 date: 2022-08-08T14:54:45.476Z
 author: Alyona Kavyerina
 author_link: https://www.linkedin.com/in/alyona-kavyerina/
@@ -6,7 +6,7 @@ short_description: Andrey Vasnetsov, Co-founder and CTO at Qdrant has shared
  about vector search and applications with Learn NLP Academy. 
 description: Andrey Vasnetsov, Co-founder and CTO at Qdrant has shared about
  vector search and applications with Learn NLP Academy. 
-preview_image: /blog_data/from_cms/screenshot_5.jpg
+preview_image: /blog/from_cms/screenshot_5.jpg
 date: 2023-12-11T12:16:42.004Z
 author: Alyona Kavyerina
 featured: false
@@ -1,8 +1,8 @@
 backend:
  name: git-gateway
  branch: master # Branch to update (optional; defaults to master)
-media_folder: qdrant-landing/static/blog_data/from_cms
-public_folder: /blog_data/from_cms
+media_folder: qdrant-landing/static/blog/from_cms
+public_folder: /blog/from_cms
 collections:
  - name: 'blog'
    label: 'Blog'
@@ -22,7 +22,7 @@ collections:
      - { label: 'Description', name: 'description', widget: 'string',
          hint: 'Shown in previews of featured posts and on social media' }
      - { label: 'Preview Image', name: 'preview_image', widget: 'image',
-          hint: 'Shown in previews of featured posts and on social media' }
+          hint: 'Image should be 1200x630' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Author', name: 'author', widget: 'string', hint: 'Name'}
      - { label: 'Featured Post', name: 'featured', widget: 'boolean', default: false,
@@ -4,7 +4,12 @@ draft: false
 slug: {{ .Name }} # Change this slug to your page slug if needed
 short_description:  This is a blog post # Change this
 description: This is a blog post # Change this
-preview_image: /blog_data/Article-Image.png # Change this
+preview_image: /blog/Article-Image.png # Change this
+
+# social_preview_image: /blog/Article-Image.png # Optional image used for link previews
+# title_preview_image: /blog/Article-Image.png # Optional image used for blog post title
+# small_preview_image: /blog/Article-Image.png # Optional image used for small preview in the list of blog posts
+
 date: {{ .Date }}
 author: John Doe # Change this
 featured: false # if true, this post will be featured on the blog page
@@ -57,7 +57,7 @@
            <a href="{{ $link }}" class="qdrant-blog__card qb-card qb-card_featured">
                {{ if .Params.preview_image }}
                <div class="qb-card__img">
-                    <img src="{{ .Params.preview_image | safeHTML }}" alt="{{ .Params.title }}" class="img-fluid">
+                    {{ partial "preview-image" (dict "context" . "default_file_name" "title.jpg" "preview_file" .Params.title_preview_image) }}
                </div>
                {{ end }}
                <h3 class="qb-card__title">{{ .Params.title }}</h3>
@@ -107,7 +107,7 @@
        <a href="{{ $link }}" class="qdrant-blog__card qb-card col-12 col-md-4">
            {{ if .Params.preview_image }}
            <div class="qb-card__img">
-                <img src="{{ .Params.preview_image | safeHTML }}" alt="{{ .Params.title }}" loading="lazy" class="img-fluid">
+                {{ partial "preview-image" (dict "context" . "default_file_name" "preview.jpg" "preview_file" .Params.small_preview_image) }}
            </div>
            {{ end }}
            <h3 class="qb-card__title">{{ .Params.title }}</h3>
@@ -139,7 +139,7 @@
        <a href="{{ $link }}" class="qdrant-blog__card qb-card col-12 col-md-4">
            {{ if .Params.preview_image }}
            <div class="qb-card__img">
-                <img src="{{ .Params.preview_image | safeHTML }}" alt="{{ .Params.title }}" loading="lazy" class="img-fluid">
+                {{ partial "preview-image" (dict "context" . "default_file_name" "preview.jpg" "preview_file" .Params.small_preview_image) }}
            </div>
            {{ end }}
            <h3 class="qb-card__title">{{ .Params.title }}</h3>
@@ -19,7 +19,7 @@
                <span>{{ .Params.author }}</span>
            </div>
            <div class="qb-post__img">
-                <img class="img-fluid" src="{{ .Params.preview_image | safeHTML }}" alt="{{ .Params.title }}">
+                {{ partial "preview-image" (dict "context" . "default_file_name" "title.jpg" "preview_file" .Params.title_preview_image) }}
            </div>
            <div class="d-md-flex">
                <section class="qb-post__share qb-share">
@@ -104,7 +104,7 @@
        <a href="{{ $link }}" class="qb-card qb-card_mobile-compact col-12 col-md-4">
            {{ if .Params.preview_image }}
            <div class="qb-card__img">
-                <img src="{{ .Params.preview_image | safeHTML }}" alt="{{ .Params.title }}">
+                {{ partial "preview-image" (dict "context" . "default_file_name" "preview.jpg" "preview_file" .Params.small_preview_image) }}
            </div>
            {{ end }}
            <h3 class="qb-card__title">{{ .Params.title }}</h3>
@@ -0,0 +1,32 @@
+{{ $default_file_name := .default_file_name }}
+{{ $preview_file := .preview_file }}
+
+<!-- 
+    Image render priority:  
+    
+    1. If `preview_file` explicitly set .md file, use it
+    2. If custom preview image in `default_file_name` exists, use it
+    3. Fall back to default `preview_image`
+
+-->
+
+{{ $preview_image := .context.Params.preview_image }}
+
+{{ $content_dir := or .context.Params.slug .context.File.ContentBaseName }}
+
+{{ $preview_image_path :=  path.Join "static" .context.File.Dir $content_dir "preview" $default_file_name }}
+{{ $preview_image_exists := fileExists $preview_image_path }}
+
+{{ if $preview_image_exists }}
+    {{ $preview_image_path = strings.TrimPrefix "static/" $preview_image_path }}
+    {{ $preview_image_path = strings.TrimPrefix "/static" $preview_image_path }}
+    {{ $preview_image = $preview_image_path }}
+{{ end }}
+
+{{ if $preview_file }}
+    {{ $preview_image = $preview_file }}
+{{ end }}
+
+{{ $preview_image = $preview_image  | safeHTML | absURL }}
+
+<img src="{{ $preview_image }}" alt="{{ .context.Params.title }}" loading="lazy">
@@ -144,25 +144,34 @@
    {{ $preview_image := printf "%s-social-preview.png" $preview_image_base }}
    {{ $preview_image_exists := fileExists $preview_image }}

-    {{ if $preview_image_exists }}
-        {{ $preview_image_base :=  path.Join .Dir .ContentBaseName }}
-        {{ $preview_image := printf "%s-social-preview.png" $preview_image_base }}
-        {{ $image = $preview_image }}
-    {{ else }}
-
-    <!-- If there are no image for document, check preview for the section -->
-
-    {{ $preview_image_section_base :=  path.Join "static" .File.Dir }}
-    {{ $preview_image_section :=  path.Join $preview_image_section_base "social-preview.png" }}
-    {{ $preview_image_section_exists := fileExists $preview_image_section }}
-
-    {{ if $preview_image_section_exists }}
-        {{ $preview_image_section_base :=  path.Join .Dir }}
-        {{ $preview_image_section :=  path.Join $preview_image_section_base "social-preview.png" }}
-        {{ $image = $preview_image_section }}
+    {{ if not $preview_image_exists }}
+        {{ $preview_image = printf "%s-social-preview.jpg" $preview_image_base }}
+        {{ $preview_image_exists = fileExists $preview_image }}
    {{ end }}

-    
+    {{ if not $preview_image_exists }}
+        {{ $preview_image =  path.Join "static" .File.Dir .File.ContentBaseName "preview" "social_preview.jpg" }}
+        {{ $preview_image_exists = fileExists $preview_image }}
+    {{ end }}
+
+    {{ if not $preview_image_exists }}
+        {{ $preview_image =  path.Join "static" .File.Dir .File.ContentBaseName "preview" "social_preview.png" }}
+        {{ $preview_image_exists = fileExists $preview_image }}
+    {{ end }}
+
+
+    {{ if not $preview_image_exists }}
+        <!-- If there are no image for document, check preview for the section -->
+        {{ $preview_image_base =  path.Join "static" .File.Dir }}
+        {{ $preview_image =  path.Join $preview_image_base "social-preview.png" }}
+        {{ $preview_image_exists = fileExists $preview_image }}
+    {{ end }}
+
+    {{ if $preview_image_exists }}
+        {{ $preview_image = strings.TrimPrefix "static/" $preview_image }}
+        {{ $preview_image = strings.TrimPrefix "/static" $preview_image }}
+        {{ $image = $preview_image }}
+
    {{ end }}
 {{ end }}