I store blogs posts as HTML so that I can custom format them. Using Django framework, I load the blog post HTML from an database into a content block of a subclassed template. I would like have an image in the blog post. How do I format the image src to load an image that is stored in my static folder.
The example that the Django tutorial (https://docs.djangoproject.com/en/2.1/intro/tutorial06/) gives:
<img src="{% static assets/img/some_img.jpg %}" />
does not work inside a content block. But, I've been successfully using the following syntax, which I found from here (django 1.5 - How to use variables inside static tag) hard coded in template pages:
<img src="{% with assets/img/some_img.jpg as img_url %}{% static img_url %}{% endwith %}" />
Here is a generic example of my setup:
Database Record
ID=1
Title="Blog Title"
Content="<p><img src="{% with assets/img/some_img.jpg as img_url %}{% static img_url %}{% endwith %}" /></p>"
base_template.html
<html>
<body>
{% block content %}{% endblock %}
</body>
</html>
blogpost.html
{% extends 'base_template.html' %}
{% block content %}
{{database_record.Content}}
{% endblock %}
Expected Result:
<html>
<body>
<p><img src="/static/assets/img/some_img.jpg" /></p>
</body>
</html>
Actual Result:
<html>
<body>
<p><img src="{% with assets/img/some_img.jpg as img_url %}{% static img_url %}{% endwith %}" /></p>
</body>
</html>
The problem is that neither of my attempts to load static image URLs work when the HTML is loaded from a database. The tags are displayed in rendered HTML just as they are seen above. The framework must load content from the database after it converts the curly bracket tags.
How can I link to static images from HTML that gets loaded from a database?
Responding to my own question...
Background
After reading more of the Django static file documentation, I've learned that images should not be stored in the static folder. They should be stored in the media folder.
In a production environment, Django encourages developers to let the web server (Apache/Nginx/etc) serve the static files. So the web server will have a rule that any URLs with '/media' or '/static' will be served from a file on the disk and the request won't be forwarded to the application server. For example, example.com/media/some-img.jpg will be recognized by the web server and some-img.jpg will be served by the webserver directly.
In a development environment, there probably isn't a web server running, so Django allows you to use the MEDIA_URL and STATIC_URL settings to specify folders in your Django project directory that you will be storing static files to serve. Here's a stack overflow answer that goes into more depth on accessing the media folder in Django. Static files (which are usually css and js files) are app specific and can be stored within the specific app's directory structure and can be accessed with the macro that I have been using:
{% static assets/css/style.jpg %}
But, static files cannot be accessed through the hard coded url: localhost:port/static/assets/css/style.jpg. You must use the macro.
Media files are treated differently. The Django framework allows you to specify a MEDIA_URL setting and store all of your media files in there. The framework then allows you to access those files with hardcoded URLs like: localhost:port/media/some_img.jpg.
Use a better architecture
How can I link to images in my static folder from HTML that I load from a database using Django?
If you store your images in the media folder, you will be able to use image url paths without macros in the HTML that you store in your database. For example:
<img src="/media/some_img.jpg" />
The image tag above (stored in a DB, or not) will work if the media folder is setup correctly in settings.py
Question still isn't answered, technically
First and foremost, it is important to acknowledge that I am wrong to be trying to serve images out of the static folder, when I should be using the media folder. That being said, I'm not going to close the question as answered because there is still validity to my question in a more general sense. Lets say I wanted to specify the path to a CSS file in HTML loaded from a database? I still don't know how to do that. The following question is still unanswered:
How can I serve static files in HTML loaded from a database?
Related
There are about 20 apps installed on our shop. Different apps are used on different pages. For example, there are apps which are used on the product page only.
However I see that all apps are loaded on every page. Looking into page source I see JavaScript function asyncLoad which is part of built-in {{ content_for_header }} variable. This function load scripts for all apps on every page. So, can I restrict this somehow? I mean - to avoid of downloading scripts/css/whatever of apps which I don't use on the specific page. For example, on the home page I need just a couple of apps active, not all 20 of them. Didn't find the answer in docs or Google.
It sounds like you've already figured out a lot about how Shopify allows apps to load their scripts, so you're most of the way there!
When I've needed to selectively disable apps, I have removed them from the asyncLoad function using something like the following:
{% capture modified_content_for_header %}{{ content_for_header }}{% endcapture %}
{% if template.name == 'index' %}
{% assign modified_content_for_header = modified_content_for_header | remove: 'some_app_url.js,' %}
{% endif %}
<!-- If you have a lot of templates you are checking, a case/when using template.name might be appropriate -->
{{ modified_content_for_header }}
I like using {% if template.name == value %} rather than {% if template contains value %} for template checks, as that ensures I don't accidentally get a false positive for a template suffix that contains one of the other template types for some reason, like a collection.alternate_product_layout or something silly like that.
Disclaimer: Messing with 3rd party apps by removing their script files may have unexpected side-effects, so always be sure to exercise caution and test thoroughly on an unpublished theme!
I know how to add content in Grav CMS but i am facing problem in how to add a header section in Grav CMS. Please tell me where do i have to write the code for header and footer. In (.md) files or twig files?
As domsson already noted, there are more than a single way to do it in Grav
You can check implementation of it in (default) Quark theme:
templates/partials/base.html.twig, which is used by all other templates, have in needed location {% include 'partials/footer.html.twig' %} and footer.html.twig, in turn, contain all needed data for rendering on page
You can also see (use) idea from Open Publishing Space skeleton
{# display footer markdown page - hibbittsdesign.org #}
{% set content = pages.find('/footer').content %}
{% if content %}
{{ content|raw }}
{% endif %}
Here ordinary page (/footer) from site (editable as much as needed) used instead of template and have anything in it, it's content used as site-footer
If you have site with modular-pages only (like, f.e. Deliver skeleton), you can also (except using base-template as per p.1) add to all modular-collections
content:
items: #self.modular
…
page, which share common template (and data)
I want to link the logo of my site (in my main header) to the homepage of my store. I could do so by linking to the absolute URL (e.g., https://www.example.com), but that doesn't work when I'm testing on a development server that isn't hooked up to my domain name.
I know that I can link to pages using <a href="{{ pages.example.url }}">, where example is the page I want to link to. But using <a href="{{ pages.index.url }}"> doesn't seem to work — I'm assuming because index is not actually considered a page.
Is there an easy way to link to my store's homepage using a liquid tag?
You can use {{ shop.url }} as listed on this variable cheat sheet and in the Shopify developer reference.
Returns the full URL of a shop.
http://johns-apparel.com
Homepage
You also have the option of using the secure version {{ shop.secure_url }}
Returns the full URL of a shop prepended by the https protocol.
https://johns-apparel.com
Homepage
I also found in a quick test that it will also return the preview URL when previewing an unpublished page e.g. k29ijan0ye0r5g7k-51325174.shopifypreview.com
I figured it out, for those curious: Just link to "/". So, a link to the homepage of your site should appear as follows in your header.liquid file:
Link
Link This doesn't work for multilanguage stores.
I think better solution is: {{ routes.root_url }}
I have shopify store. I want to amend HTML output of app.
basically app adds some Img tag which is not visible to client via CSS. I want to remove those Img tags from it.
{% include 'my-appinfo', app-arg-1: 'test' %}
As above we include app into theme.liquid file.
I'm trying to embed a pdf into a page and I'm using the 'file' field in contenttypes.yml
file:
type: file
extensions: [ pdf, doc, docx, ppt, pptx ]
The field appears in the content editor and it evens insert some code into the page. However the result is disappointing, the navigator only outputs a line that goes like that :
file:2014/12/doc.pdf
Can someone tell me what did I do wrong ?
You should add your own HTML around the file field, to allow users to download it. Something like this:
{% if record.file is not empty %}
Click to download: <a href="{{ paths.files }}{{ record.file }}">{{record.file}}<a>
{% endif %}
Additionally if you want to embed the PDF into the page you will need to use a third party plugin since they aren't natively supported.
Google docs offer one, you can grab the embed code here:
https://docs.google.com/viewer