Add center image styling and create new post for Django barcode tutorial

This commit is contained in:
Fundor333
2025-05-18 23:21:34 +02:00
parent c97a6ad286
commit 29c76f9a11
7 changed files with 62 additions and 2 deletions

View File

@@ -2,6 +2,12 @@
margin: 0;
}
.center-img {
display: flex;
justify-content: center;
width: 80%;
}
.menu {
.trigger {
float: left;

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

@@ -0,0 +1,41 @@
---
title: "Django Generate Barcode With Reportlab"
date: 2025-05-21T08:59:51+02:00
feature_link: "https://www.midjourney.com/home/"
feature_text: "by IA Midjourney"
description: Tutorial to build pages and pages of barcode for labeling stuffs
tags:
- reportlab
- django
- barcode
- qrcode
categories:
- dev
images:
keywords:
series:
- Printing With ReportLab
- Django tricks
draft: true
reply:
repost:
like:
rsvp:
bookmark:
---
After [Django With Barcode and Qrcode]({{% ref "/post/2022/django-with-barcode-and-qrcode" %}}) and [Django Return Pdf With Reportlab]({{% ref "http://localhost:1313/post/2022/django-return-pdf-with-reportlab" %}}) I need something new in my Django server. I need a barcode generator for labeling stuffs.
## The problem
Every code is a solution to a pratical problem. In this case I need to make the barcode labels with text for keep an inventory.
The basic solution is generate a pdf/img file to print into sticker's paper and cut it after.
![Barcode Example](barcode.png)
So, I need the data to convert into lable (the string on top to the barcode) and the barcode (or the qrcode) as in the screenshot, so I wrote this code for do it for pages and ready to print and stick it all around the world!
## Code

View File

@@ -0,0 +1,13 @@
{{- if .IsBlock -}}
<figure>
<img class="center-img" src="{{ .Destination | safeURL }}"
{{- with .PlainText }} alt="{{ . }}"{{ end -}}
>
{{- with .Title }}<figcaption>{{ . }}</figcaption>{{ end -}}
</figure>
{{- else -}}
<img class="center-img" src="{{ .Destination | safeURL }}"
{{- with .PlainText }} alt="{{ . }}"{{ end -}}
{{- with .Title }} title="{{ . }}"{{ end -}}
>
{{- end -}}

View File

@@ -1 +1 @@
.author{margin:0}.menu .trigger{float:left;display:flex;align-items:center}@media screen and (max-width:768px){.menu .menu-icon{position:relative}}@keyframes enterIn{0%{opacity:0}100%{opacity:100}}@media only screen and (min-width:768px){#pridecodes-code-corner-svg{width:150px}}@media only screen and (max-width:767px){#pridecodes-code-corner-svg{width:75px}}#pridecodes-code-corner-svg{animation:enterIn 2s;transition:all .2s ease-in-out}#pridecodes-code-corner-svg:hover{transform:scale(1.1);transform-origin:left top}
.author{margin:0}.center-img{display:flex;justify-content:center;width:80%}.menu .trigger{float:left;display:flex;align-items:center}@media screen and (max-width:768px){.menu .menu-icon{position:relative}}@keyframes enterIn{0%{opacity:0}100%{opacity:100}}@media only screen and (min-width:768px){#pridecodes-code-corner-svg{width:150px}}@media only screen and (max-width:767px){#pridecodes-code-corner-svg{width:75px}}#pridecodes-code-corner-svg{animation:enterIn 2s;transition:all .2s ease-in-out}#pridecodes-code-corner-svg:hover{transform:scale(1.1);transform-origin:left top}

View File

@@ -1 +1 @@
{"Target":"add.min.21b8f25b3dcc94bc999879605066eb5bf654662250fd347f2607818107e97270.css","MediaType":"text/css","Data":{"Integrity":"sha256-IbjyWz3MlLyZmHlgUGbrW/ZUZiJQ/TR/JgeBgQfpcnA="}}
{"Target":"add.min.1614b22ffc753c46d640698bbd7b8e1d6b1b0a31e41720333709b996afe4207d.css","MediaType":"text/css","Data":{"Integrity":"sha256-FhSyL/x1PEbWQGmLvXuOHWsbCjHkFyAzNwm5lq/kIH0="}}