how to manage the article of my page

Using Django Getting Started
1

I want to build a website about cleaning services in this website i think i will build the following pages :
home
about us
services
our blog
contact us
portfolio
for every page i will do the needed structure for it and connect them with Django view.
for building the models for my app i will do the following .
for the article model i will add the following :

  1. Title
  2. Slug
  3. Date
  4. Body
  5. Publish
  6. Created
  7. updated
    My main question is when i do this and try to map my articles into my blog post and want to add images and videos into this model with the html how can i do this ! for example i want to add image after every heading in my Body which contain only strings!
    I know that i am my misunderstand somethings can you help figure out how to do this app!
2

Cleaning Service (1)
Cleaning Service (1)1920Ă—1539 113 KB

3

How familar are you with HTML?

Forget the Django parts of this for a moment.

If you were writing the HTML yourself, how would you add an image into the page? (What would the HTML look like that you’re trying to generate?)

4

i will have a div that contains text then i can add a a tag that contain the image link and alt then done!
I know how to add the image and text into the django and html.
i know that i am not able to express my problem in english. so the problem is i have a django model that contain a 1000 words and want to add image in every 10 words !

5

I understand what you have - and your English is actually quite good.

What I’m trying to learn here is what do you already know and don’t know. If you didn’t know how to add an image on a page, my answer would be different.

Since you know how to add an <img> tag into html, I don’t need to cover that topic.

You then have two completely separate issues to address.

The first is the addition of the images to be displayed.

You could store all the images you need in your static directories. Or, you could create a model with an ImageField that would allow you to upload images as needed. You’ll want to decide which approach you want to take for managing those images.

The second issue is adding the <img> tag into your text.

You’ve got a couple of different choices here - one is quick, easy, and creates a massive security vulnerability. The other is more difficult to implement, but would be more secure.

The quick and easy solution is to render your body as “safe”, which would allow you to directly add the <img> tag into the text of your post. The security vulnerability is that by allowing you to directly add any arbitrary html into the body, you create the risk that a mistake in that html could break the page.

The more secure solution is that you create some type of marker to use within the body, that gets replaced by the appropriate image tag during the rendering process, such that a custom template tag (or filter) does that work for you.

1 Like
6

you get my problem right, i asked other people in discord channels, couldn’t help they said either they didn’t understand what i say and when then understand they tell google or ask ChatGPT, overall you are amazing teacher.
That last part is the thing that i didn’t know how to do.
can i write the article as markdown that contain a tag to render the image!
I will read about the safe solution.
if you can recommend useful resources this will be great!

7

I haven’t done this, so I don’t have any direct experience. However, I did find a blog post that appears to give a good introduction:

1 Like
8

Thanks i will check it :love_you_gesture:

9

Using markdown is the best approach in this case as the risk of breaking of the page will be less and the customized will be much easy

1 Like
10

i didn’t work with markdown with django before so i will search about it.
I use markdown everyday with obsidian note taking.
But the problem is if i want to give this site to my cosine who didn’t know any markdown but he used to use WordPress editor to write the articles is there any alternative in Django !

11

Then you could install some kind of js wysiwyg text editor like tinyMCE or summernote etc

12
1 Like
13

i will check this also,there is a lot of things to check now :frowning: will the free version will be sufficient !

1 Like
14

Then you can use summernote, it’s totally free, and also support media uploads so you can also easily add media

1 Like
15

Thank you very much! Your help means a lot to me. This community is truly amazing!

1 Like
16

Welcome :grin:

Keep coding

1 Like