How to render the user profile avatar image into the wagtail template? - django-templates

I am creating a blog site using the Wagtail CMS. I would like to display the Author avatar image whenever a new post is published. I am trying to render the image from this /admin/account/change_avatar/ location. I can see the image uploaded here is under the wagtailusers_userprofile -> col name: avatar table, but not sure how to render it in the template.

This image isn't a typical Wagtail Image (one that comes from wagtailimages.Image), this looks like a regular models.ImageField.
Here's what's in the UserProfile model for the avatar:
class UserProfile(models.Model):
user = models.OneToOneField(
settings.AUTH_USER_MODEL, on_delete=models.CASCADE, related_name='wagtail_userprofile'
)
avatar = models.ImageField(
verbose_name=_('profile picture'),
upload_to=upload_avatar_to,
blank=True,
)
Because this is a regular image field, you can get the url by appending .url in your template.
Here's some example template code:
{% if request.user.is_authenticated %}
{% if request.user.wagtail_userprofile.avatar %}
<img src="{{ request.user.wagtail_userprofile.avatar.url }}" alt="{{ request.user.get_full_name }}">
{% else %}
{# No image #}
{% endif %}
{% endif %}
The above code will check to see if the user is authenticated in the template. If you don't need it, ditch it.
THen there's the if statement to checks of the request.user.wagtail_userprofile.avatar exists. The wagtail_userprofile comes from the user field on the UserProfile model. It's using a related_name, so we use that in the template.
I also sprinkled in a {{ request.user.get_full_name }} for the alt tag, because the image alt should probably be the users name in this case, rather than the file name.
If you need the height or width, those are both available through the {{ request.user.wagtail_userprofile.avatar.height }} and {{ request.user.wagtail_userprofile.avatar.width }}.

Related

How can I pass classes in to a section in liquid / shopify?

For example passing in a snippet
{% include 'icon-top', classes:'back-to-top__icon' %}
I can pass the class back-to-top__icon into icon-top snippet
<svg class="icon {{ classes }}" somesvg stuff here ></svg>
Doing the same with a section doesn't work - is there any way to do this in liquid?
Sections doesn't accept anything outside of the section file. You can look the section like a closed platform nothing comes inside or outside of the section.
The means that variables created outside/inside the section are not accessible inside/outside of it.
That said you can hack it slightly to achieve what you want.
For example:
The section file:
test.section.liquid
The section file code:
<div class="{{dummy_class}}"></div>
Then you call the section this way:
<div style="display: none;">
{% section 'test.section' %}
</div>
{% capture section_capture %}
{% section 'test.section' %}
{% endcapture %}
{{ section_capture | replace: '{{dummy_class}}', 'back-to-top__icon' }}
Clarification
You might be asking why are we calling the section two times?
When we call the section in a {% capture %} tag it's not shown in the admin panel that's why are showing it in a hidden div only to show it in the admin and we don't do anything else with it.
After that we capture the section in a variable section_capture, this will return the content of section and we can replace anything we want in there.
That's why we added this {{dummy_class}} dummy variable. It's wrapped in liquid but you can treat it as text and not liquid, so we can write it like so #dummy_class# as well.
After that we just target that string and replace it {{ section_capture | replace: '{{dummy_class}}', 'back-to-top__icon' }}

How can I hide and show a section using a conditional statement and PDF generator?

Using craft CMS I am adding an option to be able to hide a section from a PDF.
The PDF is created using PHP and a library called Snappy.
The light-switch is turned off (0) by default.
I have added the conditional statement and the light-switch, tested by wrapping other sections of the site (not part of the PDF) inside the if condition.
When turning the light-switch on and off I am able to hide and show sections.
The PDF does not seem to be working that way. The section is always hidden even when the light-switch is turned on.
I don't understand how the backend of the PDF works so is it something to do with how PDFs are generated?
Also it's showing blank pages where the content "would" be which is not desired.
//====Master PDF layout
{% extends 'abc/pdf/_base.html' %}
{% block content %}
{% include 'abc/pdf/_section1.html' %}
{% include 'abc/pdf/_section2.html' %}
{% include 'abc/pdf/_section3.html' %}
{% include 'abc/pdf/_section4.html' %}
{% include 'abc/pdf/_section5.html' %}
{% endblock %}
//==== Section with condition (abc/pdf/_section4.html)
{% if (entry.showsection4 is defined and entry.showsection4) and dateRanges | length %}
<div class="page">
<div class="page__inner">
A bunch of content in section 4 that I want to hide and show
</div>
</div>
{% endif %}

Shopify - Get the active linklist

I'm trying to fix the breadcrumb issue for a client, shopify doesnt support nested breadcrumbs for 'n' level collections OR breadcrumbs from a page to a collection.
What I need:
Home > Page > Collection (Home > FoodDropPage > Food)
I don't really want to go the 'Hacky' tag products route as I think it puts some ownest on the users (Store owner) and I would prefer they not have to worry about it.
My current plan is to grab the active linklist, if it equals something, display its title link.
Is there a way to grab the ACTIVE linklist? I havent had much luck with the documentation and am not sure if this is possible.
If theres another solution, I would also welcome that.
Thanks!
You can use:
{% for link in linklists.main-menu.links %}
{% if linklists[link.handle] == empty %}
<li>
<a href="{{ link.url }}" class="{% if link.active %} current{% endif %}">
<span>{{ link.title }}</span></a>
</li>
{% endfor %}

Way to store data in shopify

I have a requirement, where in I have 4 different drop down on shopify home page. The First drop-down, let's name it city-drop-down, will show list of city. Based on the city selected in city-drop-down, the second drop down, lets name it category-drop-down, will show list of categories available for particular city. Similarly the third drop down should show the value based on the 2nd drop down and 4th drop down should show the value based on 3rd drop down.
Basically, I need to store list of categories available for each city. Similarly I have to store values available for each categories. How can I store this value, so that the moment a value is selected on webpage, I can use a AJAX call to get the available data for next drop down.
Edited *****
Do let me know, if I am doing it totally wrong.
Included the scripts. Please note, initially I uploaded the files under "Files". However I moved it to Assets folder as it was easier to edit the file in Assets folder.
function readcityfile(){
var xmlhttp = new XMLHttpRequest();
var url = "/assets/city_type.txt";
alert("hi");
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
try{
var myArr = JSON.parse(xmlhttp.responseText);
alert(myArr);
//myFunction(myArr);
}
catch(err) {
alert(err.message);
}
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function myFunction(arr) {
var i;
for(i = 0; i < arr.length; i++) {
alert(arr[i].city);
}
}
And the JSON file is -
[{"city": "Jamshedpur","types": "Sweets#Savories#Cake"},{"city": "Ranchi","types": "Sweets#Savories#Cake"}]
One simple way if the data size isn't too large would be to generate your data as a JSON file and simply store it as a file and then edit your theme to include the file's url. A file that is too large might be 100k. Smaller is better but if you don't have a back end to handle the AJAX calls the static file certainly provides a low cost proof of concept.
There are two ways to do this.Either as an asset or a file. Assets are part of your theme so even though you'll be altering your templates to manage this I'd tend to go with a file. (Assets are just files located under the theme but the are dealt with slightly differently)
go to your Shopify Admin control panel
Click Settings
Click Files
Click "Upload Files"
After upload you'll have a file. The next step uses the file's name not its URL.
Go to your theme editor:
Shopify Admin control panel
Online Store
Themes
click Customize Theme
drop-down Theme Options and select HTML/CSS
I'm guessing you are going to select the template product.liquid to edit.
do that and decide where you want to introduce your javascript file. If your script file was named cities_etc.js you'd import it as below:
{{ 'cities_etc.js' | file_url | script_tag}}
This method seems a bit slow if all that you are trying to do is create a tiered menu. Using Ajax requests will mean there are several round trips and it will be visually slow for the user waiting for the ajax request to complete.
You can create a linklist
I know you have already found your method but I would strongly urge you to give this a go. Here is an example of some liquid markup that will created a tiered menu. The parent linklists handle is main-menu then you need to create a linklist for each of the children where the handle matches the title in the main-menu. For example if you have an 'About Us' link in the main menu create a linklist also with the handle 'about-us'. Then just use some simple css or javascript to hide and show the menus on hover.
{% for link in linklists.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<li class="dropdown" aria-haspopup="true" data-id="{{ child_list_handle}}">
<a href="{{ link.url }}" class="nav-link {% if link.active %} active{% endif %}">
{{ link.title }}
</a>
<ul class="dropdown_menu hidden" id="{{ child_list_handle }}">
{% for childlink in linklists[child_list_handle].links %}
<li>
{{ childlink.title | escape }}
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li>
{{ link.title }}
</li>
{% endif %}
{% endfor %}

Shopify Add Custom field to Collection Page in Admin

Hello Shopify Developers.
I'm a newbie on Shopify. I want to build a menu just like http://www.nastygal.com/. It shows menu items and featured products in menu area.
Would you give me a suggestion how to make a menu like this?
I'm not sure this is the best idea, though I think that I can create special collections to assign menus. I want to add a custom field in collection page to assign category to special menu. I noticed that I may use meta-fields for this but not sure.
How to add meta-fields to description fields in collection admin page?
How to get values from meta-fields in front page?
I'm open for suggestions, please teach me.
Best regards, Lorant.
I'd say there was a couple of steps to making this work, but it shouldn't be hard.
Create a collection that contains the products in it that you would like to show in the menu.
In your navigation link list create a link that points to collection you want to show in the menu. Call it something like show-products.
The menu liquid would look something like this:
{% assign linklist = linklists.main-menu %}
{% for link in linklist %}
{% if link.title == 'show-products' and link.type == 'collection_link' %}
{% assign menu_collection = link.object %}
{% for menu_product in menu_collection.products %}
{{ menu_product.featured_image | product_img_url: 'compact' | img_tag: menu_product.title }}
{{ menu_product.title }}
{% endfor %}
{% else %}
{% include 'my-normal-menu-link' with link %}
{% endif %}
{% endfor %}
Note: this code is untested, but I don't see why it wouldn't work.