Advancing the Blog: 5 - Responsive Image inside of Post Markdown Content

Advancing the Blog - 5 - Responsive Image inside of Post Markdown Content

** Advancing the Blog ** is an extended look at building a modern blog with the Django Framework while leveraging other technologies such as jQuery, Markdown, Bootstrap, APIs, and more.

We will be starting where Try Django 1.9 left off to create a powerful blog ready for the modern era. It is highly recommend to start with Try Django 1.9 before starting this series.

Generally the topics will include:
- Django Project Setup
- Class Based Views (& some Function Based Views)
- Models, Model Forms, Forms, Form Validation
- Integrate Bootstrap front-end framework.
- Django Registration Redux for Authentication/Registration
- And More

We are Coding For Entrepreneurs [TeamCFE] and have built an entire library of content to help you master Django and other web technologies to launch real projects faster. Enroll today for as low as $20/month.

What Technology you'll learn in the Build a Django 1.8 Blog series:
-- Bootstrap (version 3.3): a powerful front-end framework used by thousands of sites around the world. Bootstrap makes it easier to have a responsive web application so it looks awesome on any mobile device and any desktop computer.

All of our tutorials have a simple goal in mind: get you building something real and quickly.

[nas]

For bootstrap 4 rename img-responsive to img-fluid.

[ruitaocheng]

Want to add here, if anyone's using Bootstrap 4 replace img-responsive with img-fluid to make it work.

[Robert_McGarry_Poems]

Again, may be late but @ 3:34 I changed the number from : 120 to : 145 and the picture came up while still keeping it from posting the whole post in the list.

[matep]

If you using Bootstrap 4, you have to change "img-responsive" ----> "img-fluid"

[jasdnbsad]

On the post detail page and posts list page, the image is not showing. Instead, the raw markdown text is rendered as below,

![enter image description here][1]

[fulgencekayiranga]

Thank you for your excellent tutorials. Is there anyway of uploading a jupyter notebook (.ipynb) file into a django framework blog ? Thank you

[CrookzArtwork]

I do still have problem here when i paste the image url i can see it into the WYIWYG but after posting the post the image doesn't show
all i can get is this:: ![enter image description here][1] and the image Url

[ВиталийГолубев-чь]

Strange. Not working for me, when I create a post and insert picture it is loaded, but when I press "create" is inserted into the text, but not the picture.

[ArseniyIvanov_The_Jabbson]

I guess we could also extend our previous script like so:

$(document).ready(function() {
{
var content = $(this).text();
var markedContent = marked(content);
$(this).html(markedContent)

$("img").each(function() {

})
})
})