this is content of _config.yml file that include two predefined variables
name: amarjit singh
description: Mobile CEP blog
index.html file uses
---
layout: default
---
whereas default layout includes below-mentioned div
<div class="intro-header">
<div class="wrapper-masthead">
<div class="container">
<header class="masthead clearfix">
<div class="site-info">
<h1 class="site-name">{{ site.title }}</h1>
<p class="site-description">{{ site.description }}</p>
</div>
<nav>
Blog
About me
Projects
</nav>
</header>
</div>
</div>
So, my problem is that title and description are not shown, where as Blog , About me and Projects are shown. Output on localhost is shown as below
In your _config.yml change name: amarjit singh to title: amarjit singh.
Related
I am trying to add a heading and a description to my galleries in the page galerie.html that are for looped but am having an issue with this, the link to the entire website: https://github.com/smarchitects/smarchitectsweb
How do I add a headline and description into the for loop?
Thank you!
I tried adding this code snippet:
<div class="col-12 center">
<h2>{{item.headline}}</h2>
<p>{{item.about}}</p>
</div>
in various places in the for loop and loop and then added this in various places in the front data:
"- headline: XXX"
"- about: YYY"
but none of the combinations worked for me...
Nice website! I cannot reproduce the issue and see any problem because your code is working for me.
Using {{ section | inspect }} shows this on the page:
{"gallery"=>[{"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/1.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_03_FINAL_.jpg", "description"=>"Karolína Harrachov"}, {"column-size"=>"col-4_sm-12", "aspect-ratio"=>"landscape", "background_image"=>"/images/2022Harrachovexterier/SMARCH_HARR_02B_FINAL_CORR01_.jpg", "description"=>"Karolína Harrachov"}]}
Your current code (below) seems to work fine though:
{%for section in page.galleries%}
<section class="padded">
<div class="capped-width m-l-center m-r-center" id="projekt-{{forloop.index}}">
<div class="gallery grid" id="lightgallery-{{forloop.index}}">
{% for item in section.gallery %}
<a class="{{item.column-size}} gallery-item" href="{{item.background_image}}">
<div class="bg-image lazy-div relative {{item.aspect-ratio}}" data-main="{{item.background_image}}">
<div class="galerie-overlay">
{{ item.description }}
</div>
</div>
</a>
{% endfor %}
</div>
</div>
</section>
{%endfor%}
The description text is shown as expected as an overlay when hovering over an image.
I don't see any headline or about attributes.
I am trying to figure out wether it would be easier to implement a modal/alert system from my views.py or through the html. Currently, I have a matching system where users like or dislike each other, and if they like each other, I send them to another html and it says they matched and can message each other. I'd like to do that through a modal or alert. I am thinking it would be easier to implement that through the views.py, but I don't know how to do it, I only know how to do it through html. But through html, I'm not sure how to compare the vote values between each user like I do in my views. What should I do? I currently have mingle.html which is where users like and dislike each other, and then if they both like each other, it sends them to match.html.
views.py/CreateVote
#login_required
def create_vote(request, profile_id, vote):
profile = get_object_or_404(Profile, pk=profile_id)
UserVote.objects.create(
user=profile,
voter=request.user,
vote=vote
)
other = UserVote.objects.filter(
voter=profile,
user=request.user,
vote=True
)
if vote and other.exists():
profile.matches.add(request.user)
request.user.matches.add(profile)
return render(request, 'dating_app/match.html', dict(
match=profile,
))
return redirect('dating_app:mingle')
mingle.html
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
{% if profile %}
<section>
<div class="col-md-3 mt-3">
<div class="card profile-card-5">
<div class="card-img-block">
<img class="card-img-top" src="{{ profile.photo.url }}" alt="Card image cap">
</div>
<div class="card-body pt-0">
<h5 class="card-title">{{profile.username}}</h5>
<p class="card-text">{{profile.description}}.</p>
Like
Dislike
</div>
</div>
</div>
</div>
</div>
</section>
{% else %}
<br><br>
<p>Wait for more people to join!</p>
<p>Help us get more user. Share this link to your friends! http://localhost:8000/</p>
{% endif %}
<br/>
match.html
{% extends "dating_app/base.html" %}
{% load static %}
{% block content %}
<style>
.col-4 {
display: inline-block;
}
</style>
<div class="container ">
<h2>It's a match!</h2>
<div class = "row">
<div class="col-lg-4">
<img src="{{ user.photo.url }}" width= "300" height= "300" object-fit = "cover" >
</div>
<div class="col-lg-4">
<img
src="{% static 'images/matching_cupid.png' %}" width= "300" height= "300" object-fit = "cover" >
</div>
<div class="col-lg-4">
<img src="{{ match.photo.url }}" width= "300" height= "300" object-fit = "cover" >
</div>
</div>
<p>You and {{ match.username }} like each other!</p>
<p>Start messaging </p>
<br>
<p>Keep mingling!</p>
</div>
{% endblock %}
You can return a message via the Django built-in message framework and render that out in your dating_app/match.html.
You already got the necessary view logic here:
# Import the framework
from django.contrib import messages
[...]
# In this case deliver a message along with the template
if vote and other.exists():
profile.matches.add(request.user)
request.user.matches.add(profile)
# Add message
messages.add_message(request, 'You have a match!')
return render(request, 'dating_app/match.html', dict(
match=profile,
))
return redirect('dating_app:mingle')
[...]
In your match.html you render the message like so:
[...]
<div id="match_message">{{ message }}</div>
[...]
Javascript for alert
// Dont forget to import jQuery and link the js file in your html file
$( document ).ready(function() {
alert( {{ message }} );
});
I’m trying to render specific md file inside of html using code:
{% assign subheader = site.pages | where: "title", "subheader" | first %}
{{ subheader.content }}
It works, but my layout isn’t respected. Does it work as expected? Is there a way to apply this layout?
Layouts are applied in context to the "current page".
In your example, if {{ subheader.content }} has been inserted into say, base.md that defines a layout: base in the front matter, then {{ subheader.content }} is rendered as part of "base.md" and will therefore be a part of its layout (_layouts/base.html).
There is no out-of-the-box way to render individual sections of a page rendered with multiple layouts.
The only possible route is to inherit another layout.
For example,
say I have a "base" layout with following:
[...]
<header>
<div id="parent-element">
<div class="btn">foo</div>
{{ content }}
</div>
</header>
[...]
and another layout subheader:
---
layout: base
---
<ul id="greek">
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
{{ content }}
and finally a "page.md" that uses the subheader layout:
---
layout: subheader
---
<ul id="fruits">
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
</ul>
Then, the generated "page.html" will be:
[...]
<header>
<div id="parent-element">
<div class="btn">foo</div>
<ul id="greek">
<li>alpha</li>
<li>beta</li>
<li>gamma</li>
</ul>
<ul id="fruits">
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
</ul>
</div>
</header>
[...]
So this is kinda difficult to explain so I have a sort video of the issue with annotations
It seems like static text is not rendering (see the H3 tag). The dynamic stuff like {{ foo.bar }} and things in loops seem to work fine. It is happening to all pages as far as I can tell.
I used the AngularClass repo as a starting point.
When the page is loaded directly or refreshed (F5 etc)
When its accessed via a link from another page
template file
<h3>GPS raw data</h3>
<div class="row" *ngIf="gps && gps.location">
<div class="col-md-4">
<strong>Time:</strong> {{ gps.location.timestamp }}
</div>
<div class="col-md-4">
<strong>Latitude:</strong> {{ gps.location.latitude }}
</div>
<div class="col-md-4">
<strong>Longitude:</strong> {{ gps.location.longitude }}
</div>
</div>
There is no errors in the console.
edit
Another image to possibly clear up what the actual problem is. Note the HTML has content in the title, its hard coded. But its not displayed.
1) 1st solution, it should be *ngIf and not ng-if
<div class="row" *ngIf="gps && gps.location"> //<<<===here
<div class="col-md-4">
<strong>Time:</strong> {{ gps.location.timestamp }}
</div>
<div class="col-md-4">
<strong>Latitude:</strong> {{ gps.location.latitude }}
</div>
<div class="col-md-4">
<strong>Longitude:</strong> {{ gps.location.longitude }}
</div>
</div>
2) 2nd solution, don't use *ngIf and use ?. operator as shown below,
<div class="row" >
<div class="col-md-4" >
<strong>Time:</strong> {{ gps?.location.timestamp }} //<<<==here
</div>
<div class="col-md-4">
<strong>Latitude:</strong> {{ gps?.location.latitude }} //<<<==here
</div>
<div class="col-md-4">
<strong>Longitude:</strong> {{ gps?.location.longitude }} //<<<==here
</div>
</div>
I encountered the same issue on Chrome and fixed it by removing the font-size style applied on that element. Not sure why, might be a bug of Chrome.
I've been trying to do the following in my .hbs file:
<div class="nav-avatar" style="background-image: url('\{{ url }}avatar/\{{ user.pic }}');"></div>
However the CSS when looking through the website looks as so:
<div class="nav-avatar" style="background-image: url('avatar/');"></div>
Both {{ url }} and {{ user.pic }} display as they should otherwise.
I over complicated the problem. Didn't need to escape it.
<div class="nav-avatar" style="background-image: url('{{ url }}avatar/{{ user.pic }}');"></div>