121 lines
3.8 KiB
HTML
121 lines
3.8 KiB
HTML
{% extends 'layout/base_template.html' %}
|
|
{% load static %}
|
|
{% block stylesheet %}
|
|
<!-- include required css cdn link through html here -->
|
|
|
|
{% include "cdn_through_html/filepond_cdn_css.html" %}
|
|
{% include "cdn_through_html/quill_cdn_css.html" %}
|
|
{% include "cdn_through_html/tagify_cdn_css.html" %}
|
|
{{form.media}}
|
|
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="row layout-top-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="row mb-2">
|
|
<div class="col">
|
|
<h3>Add New & Article</h3>
|
|
</div>
|
|
<div class="col text-end">
|
|
<button class="btn btn-dark mb-2 me-4" onclick="history.back()">
|
|
<i class="fa fa-arrow-left"></i>
|
|
Back
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row layout-spacing">
|
|
<div class="col-lg-12">
|
|
<div class="statbox widget box box-shadow">
|
|
<div class="widget-content widget-content-area">
|
|
<form method="POST" enctype="multipart/form-data">
|
|
{% csrf_token %}
|
|
{% include 'includes/dynamic_template_form.html' with form=form %}
|
|
<div class="mt-4 mb-0">
|
|
<div class="d-grid"><button class="btn btn-primary btn-block" type="submit">Submit</button></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock content %}
|
|
|
|
{% block javascript %}
|
|
<!-- include required css cdn link through html here -->
|
|
|
|
{% include "cdn_through_html/filepond_cdn_js.html" %}
|
|
{% include "cdn_through_html/quill_cdn_js.html" %}
|
|
{% include "cdn_through_html/tagify_cdn_js.html" %}
|
|
|
|
|
|
<script>
|
|
/**
|
|
* ===================================
|
|
* Blog Description Editor
|
|
* ===================================
|
|
*/
|
|
var quill = new Quill('#description', {
|
|
modules: {
|
|
toolbar: [
|
|
[{ header: [1, 2, false] }],
|
|
['bold', 'italic', 'underline'],
|
|
['image', 'code-block']
|
|
]
|
|
},
|
|
placeholder: 'Write description...',
|
|
theme: 'snow' // or 'bubble'
|
|
});
|
|
|
|
|
|
/**
|
|
* ====================
|
|
* File Pond
|
|
* ====================
|
|
*/
|
|
|
|
// We want to preview images, so we register
|
|
// the Image Preview plugin, We also register
|
|
// exif orientation (to correct mobile image
|
|
// orientation) and size validation, to prevent
|
|
// large files from being added
|
|
FilePond.registerPlugin(
|
|
FilePondPluginImagePreview,
|
|
FilePondPluginImageExifOrientation,
|
|
FilePondPluginFileValidateSize,
|
|
// FilePondPluginImageEdit
|
|
);
|
|
|
|
// Select the file input and use
|
|
// create() to turn it into a pond
|
|
const existingImageUrl = "{{ form.image_url.value.url}}"
|
|
|
|
const inputElement = document.getElementById('id_image_url');
|
|
const pond = FilePond.create(inputElement, {
|
|
storeAsFile: true,
|
|
dropOnPage: true
|
|
});
|
|
if (existingImageUrl){
|
|
pond.addFile(existingImageUrl)
|
|
}
|
|
|
|
/**
|
|
* =====================
|
|
* Blog Tags
|
|
* =====================
|
|
*/
|
|
// The DOM element you wish to replace with Tagify
|
|
var input = document.querySelector('#id_tags');
|
|
|
|
// initialize Tagify on the above input node reference
|
|
new Tagify(input,{
|
|
originalInputValueFormat: valuesArr => valuesArr.map(item => item.value).join(', ')
|
|
})
|
|
|
|
</script>
|
|
{% endblock %} |