I have a form which takes Image (png file type) and saves it's name in the database. The image is uploaded to web/uploads/Images/ directory, my question is, how do I render this image in my Twig template? This is what I have so far:
<div class=products>
{% for key,product in products %}
<div class="product-{{ key }}">
<div class="p-name"> {{ product.name }}</div>
<div class="p-price"> {{ product.price }}</div>
<div class="p-description"> {{ product.description }}</div>
<div class="p-image">
<img src="{{ asset('uploads/Images/' ~ product.Image) }}"></img>
</div>
</div>
{% endfor %}
</div>
And this is what I have in DOM
I am completely new to Symfony, so please bear with me.
EDIT: The path to the image is wrong, how should it be written?
In your img tag you have the spelling of "src" incorrect. Should be like so:
<img src="{{ asset('uploads/Images/' ~ product.Image) }}"></img>
Maybe that's the problem? Otherwise, it looks correct.
Related
how can I add more CubePortfolio gallery in my view. My code:
#foreach($page->subpages as $subpage)
<div id="js-grid-lightbox-gallery" class="cbp ">
#foreach($subpage->photos as $photo)
<div class="cbp-item {{ $subpage->id }}">
<a href="/project/storage/app/{{ $photo->filename }}" class="cbp-caption cbp-lightbox" data-title="" rel="nofollow">
<div class="cbp-caption-defaultWrap">
<img src="/project/storage/app/{{ $photo->filename }}" alt="">
</div>
</a>
</div>
#endforeach
</div>
#endforeach
currently only shows one gallery to me, and should display multiple galleries. One is ok, the other revolves around the loader.
I understand that there cannot be two galleries with the same ID? How can I solve this problem? Thanks for the help.
Append an identifier from the loop to the ID, the same way you do that with the class
<div id="js-grid-lightbox-gallery-{{ $subpage->id }}" class="cbp">
Then initialize the element like so (example from jQuery)
$('[id^=js-grid-lightbox-gallery]').cubeportfolio({
Hope this helps
I'm trying to figure out, how to include one template multiple times with different random values.
I do have a template:
<div class="include-1">
{% include 'include.twig' %}
</div>
<div class="include-2">
{% include 'include.twig' %}
</div>
<div class="include-3">
{% include 'include.twig' %}
</div>
Inside the include.twig I have:
<span>
{{ random(10) }}
</span>
Expected result (numbers in span should be random in range from 0–10):
<div class="include-1">
<span>1</span>
</div>
<div class="include-2">
<span>2</span>
</div>
<div class="include-3">
<span>3</span>
</div>
Actual result (the first include get the random value, but then it is just "cached"):
<div class="include-1">
<span>1</span>
</div>
<div class="include-2">
<span>1</span>
</div>
<div class="include-3">
<span>1</span>
</div>
I've tested include, embed etc. but with no avail.
I'm looking for a twig based solution. Cannot touch PHP.
As a fallback I can do it with JS, but was interested if such a thing can be done it Twig.
Question:
Is there a way how to force Twig to re-render the include before each include?
Try passing the random number function as a value on each of your include statements, such as:
<div class="include-1">
{% include 'include.twig' with {'random': random(10) } %}
</div>
Then, inside your include.twig file:
<span>{{ random }}</span>
This will generate the random number for each include you do, and should give you the result you're after.
got this problem:
I want to show the info from a collection where a publication has a "featured" column in true.
$pub_destacadas = Publicaciones::take(3)->where('destacado', '=', 1)->get();
The problem is that my layout has 3 elements to fill with this information that have different sizes so i wasn't able to solve this using the chunk() method in the foreach in my blade template, so I tried the following:
$individual_destacada = $pub_destacadas->take(1);
$grupo_destacada = $pub_destacadas->take(2);
and show them in the view as follows:
<div class="publicaciones-destacadas">
<div class="container">
<h2>Publicaciones Destacadas</h2>
<div class="row">
#foreach($individual_destacada as $destacada)
<div class="col-md-6">
<div class="item-destacado size-2">
<img class="img-responsive" src="{{ asset('img/publicaciones/' . $destacada->imagen ) }}">
{{ $destacada->titulo }}
{{ $destacada->descripcion }}
</div>
</div>
#endforeach
<div class="col-md-6">
#foreach($grupo_destacada as $destacada)
<div class="row doble-publicacion">
<div class="col-md-12">
<div class="item-destacado size-1">
<img class="img-responsive" src="{{ asset('img/publicaciones/' . $destacada->imagen ) }}">
{{ $destacada->titulo }}
{{ $destacada->descripcion }}
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
So... now it shows it correctly in the layout but the first item that the query gets is shown 2 times in this layout. How can I exclude this first element in the second variable where I get the featured publications?
Hope I explained the problem correctly.
Here's the layout:
You can use splice.
$individual_destacada = $pub_destacadas->splice(1);
$grupo_destacada = $pub_destacadas->splice(2);
I have a list of articles in my data and one of the fields is a link to an image. I'm using jeykll-assets, and I would like to load the images using the asset_path. However, the following isn't working:
{% for article in site.data.press %}
<div class="press-item">
<div class="press-image">
<div class="centerit"></div>
<a href="{{ article.url }}" target="_blank">
<img src="{% asset_path article.logo %}" />
</a>
</div>
<div class="press-excerpt">
<a href="{{ article.url }}" target="_blank">
<p>{{ article.title }}</p>
</a>
</div>
<div class="date">{{ article.date }}</div>
</div>
{% endfor %}
Specifically <img src="{% asset_path article.logo %}" /> because it doesn't load article.logo dynamically. What's the correct way to do this?
Use brackets like this : <img src="{% asset_path {{ article.logo }} %}" />
See https://github.com/jekyll/jekyll-assets#liquid-variables
I'm using django 1.9 and python 3. My english also isn't the best, so excuse the question if it is formulated bad.
I'm working on making my website a single-page application. I need to get the {% block %} contents of a given template, and then send that as a HttpResponse so that ajax can pick it up and inject it into the page.
I've tried using the answer from this question: Django - how to get the contents of a {% block %} tag from a template
But upon trying to fetch the contents of a block in my view like so:
response_data[content] = get_block_source('profile/login.html', 'content')
if request.is_ajax():
return HttpResponse(
json.dumps(response_data),
content_type="application/json"
)
I just get this error from django, no matter what I do:
ValueError at /login/ Template block content not found
The contents of the block don't even make it to the ajax call, what gives?
EDIT:
I'll include my "content" block here:
in my template:
{% extends 'base.html' %}
{% block content %}
<div class="big-title text">Log in</div>
<div class="form-container">
<form name="login-form" id="user" method="post" action="/login/" enctype="multipart/form-data" class="text">
{% csrf_token %}
<div class="title">Enter your credentials</div>
<div class="form-row">
<div class="form-flex">
<div class="field-container">
<div class="field-input-container">
<div class="field-label accent">Username</div>
<div class="field-input">
<input class="field-input-element" type="text" name="username" />
</div>
</div>
<div class="field-help">Your username is always lowercase.</div>
</div>
</div>
<div class="form-flex">
<div class="field-container" style="height: 110px">
<div class="field-input-container">
<div class="field-label accent">Password</div>
<div class="field-input">
<input class="field-input-element" type="password" name="password" />
</div>
</div>
<div class="field-help"></div>
</div>
</div>
</div>
<div class="form-button-container">
<div class="form-error"></div>
<div class="form-message"></div>
<input type="submit" name="submit" value="Accept" class="button form-button"/>
</div>
</form>
</div>
{% endblock %}
In my base (base.html)
<body>
<div id="modal-container">
<div id="modal-overlay">
<div id="modal-items">
</div>
</div>
</div>
<div id="wrapper">
<header>
<div id="header-title" class="text accent">App name</div>
<div id="header-nav">
<nav>
{% if user.is_authenticated %}
Home
Feed {% if request.user.is_superuser %}
Admin {% endif %}
N
<a href="/{{ request.user }}" class="header-avatar-small-a">
<div class="text header-greeting">Hi, {{ user.userprofile.display_name }}</div>
<div class="header-avatar-small">
{% if not user.userprofile.avatar == '' %}
<img src="{{ MEDIA_URL }}users/{{ user }}/avatar" alt=""> {% else %}
<img src="{{ MEDIA_URL }}users/avatar" alt=""> {% endif %}
</div>
</a>
{% else %}
Log in
Create account {% endif %}
</nav>
</div>
<div class="progress">
<div id="header-progress" class="fill"></div>
</div>
</header>
<main>
{% block content %} {% endblock %}
</main>
<footer></footer>
</div>
</body>
</html>
Template source is the template actual HTML, not the file reference