4 Simple Steps to Using Markdown Post Images Like a Boss

sstacha • > a year ago

Blog markdown posts allow for the uploading of images however, the features and location have changed since release django-docrootcms 1.27. By default all blog posts images will be placed in the media folder under /media/markdownx/%Y/. These can be changed by placing the following variables at the very bottom of your settings file with values you would like:

MEDIA_ROOT = pathlib.Path(BASE_DIR, 'media')
MARKDOWNX_MEDIA_PATH = datetime.datetime.now().strftime('markdownx/%Y')

Your images will then be separated by post/teaser/ or post/content/ depending on what field the image is dropped into. Lastly the image will have the filename you used when you dropped the file. So, if the file was me.jpg in the content field on the blog you would find that image at:

<project directory>/media/markdownx/2020/post/content/me.jpg

Dropping an existing image will simply return a markdown reference to the file. This is a very convenient way to easily add markdown links to existing images without having to type them yourself or have many copies of a file duplicated.

The last power feature I want to cover is adding braces immediately following an image or link. Since I have the extra extensions installed by default for markdownx for a normal docroot cms installation you can add curly-braces immediately after an image or link to add optional attributes to the resulting HTML output. For example,

 [docroot cms](https://github.com/sstacha/django-docrootcms){target="_blank"}

will result in the following html output:

<a href="https://github.com/sstacha/django-docrootcms" target="_blank">docroot cms</a>

Notice how the target="blank" attribute was added to the final anchor tag. This same technique can be very valuable when working with your uploaded images and styling. By default docroot cms assumes you will be using bootstrap (version 4 as of the time of this writing). By adding {float-left pr-2 pl-2} immediately following the image markup tag you can float the image left then add 2 padding to the right and bottom of the image.

Note: If you want to change the libraries used you can copy the page.dt and admin/base_site.html from your resources folder to your docroot/templates folder and then change the css and js libraries to what you want. just make sure to change both the admin and the page template to match to have the preview look like the resulting page. Armed with these simple features and the markdown reference in the field help text you can code markdown posts like a boss!