I have some problem in assigning Front Matter in post. So here is Front Matters of a post in colloction named with _programming:
/_programming/somepost.md
---
title: "Layout: Header Image (Horizontal)"
header:
image: /assets/images/unsplash-image-1.jpg
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
categories:
- Layout
- Uncategorized
tags:
- edge case
- featured image
- image
- layout
---
This post should display a **header image**, if the theme supports it.
Non-square images can provide some unique styling issues.
This post tests a horizontal header image.
this post is from minimal-mistakes
However, I have many post which has categories: Layout. Posts can have only one categories or a few of categoires, like above.
I want to get post in collection. For this I tried this code:
---
permalink: /study/layout/
title: Layout
subject: Layout
layout: study_theme
---
{% assign subject=page.subject %}
{% for temp in study.programming %}
{% if temp.categories == subject %}
<a href="{{ temp.url | prepend: site.baseurl }}">
<p>{{ temp.title }}</p>
</a>
{% endif %}
{% endfor %}
And this code:
---
permalink: /study/layout/
title: Layout
subject: Layout
layout: study_theme
---
{% assign subject=page.subject %}
{% for temp in study.programming %}
{% if temp.categories contains subject %} //only here changed
<a href="{{ temp.url | prepend: site.baseurl }}">
<p>{{ temp.title }}</p>
</a>
{% endif %}
{% endfor %}
But those codes are not working. please help me. I can't see any posts in page.
Related
I want to call a custom block inside an overwritten theme-block:
{% block file_widget %}
{% if image is not null %}
{{ block('imagePreview') }}
{% endif %}
{{ block('form_widget') }}
{% endblock %}
{% block imagePreview %}
<img src="{{ image.getFullPath | imagine_filter('medium_square') }}"
alt="{{ image.filename }}"/>
{% endblock %}
The imagePreview is not shown.
But it is working when I don't use a block.
And it is also working when I dont use a FormTypeExtension and create an ImageType instead.
So I guess the file_widgetblock still has the scope of the parent form_div_layout.html.twig and there in fact no imagePreview block exists.
So how can I solve this.
I mean now I solved it by removing the block.
But I just want to know if someone has a solution to this.
Maybe there is a way for using reuseable blocks inside of custom form themes in symfony?
Finally I found the solution:
I just did not 'use' the base template explicit.
The form theme worked without this - because symfony falls back the the base form theme when it does not find a block inside the new theme file.
But it seems then you also can not use custom blocks inside this new theme file.
So this works now:
{% use 'form_div_layout.html.twig' %}
{% block file_widget %}
{% if image is not null %}
{{ block('imagePreview') }}
{% endif %}
{{ block('form_widget') }}
{% endblock %}
{% block imagePreview %}
<img src="{{ image.getFullPath | imagine_filter('medium_square') }}"
alt="{{ image.filename }}"/>
{% endblock %}
I'm building my first Timber Wordpress theme and using the timber-starter-theme. I have a custom content type with custom fields (fields added using WCK plugin). I haven't touched single.php file, just building the twig template. 'team_church_slide' is a repeating field to add images to go into a Slick carousel. My template section is:
{% set slickSlider = post.team_church_slideshow %} {# the field group #}
{% set slickSlide = post.get_image('team_church_slide') %} {# the field #}
{% if slickSlider %}
<div class="slick-slider">
<ul>
{% for slides in slickSlider %}
<li><img src="{{ slickSlide.src }}" alt="{{ slickSlide.alt }}"></li>
{% endfor %}
</ul>
</div>
{% endif %}
This returns the image correctly, but three copies of the first image, not the three different images which are uploaded. If I remove an uploaded image, two copies of the first image are shown.
Is there something to change in the twig to get all the images?
Figured this out thanks to something in this post:
Get first row from ACF Repeater using Timber
Here's my final working template section:
{% set slickSlider = post.team_church_slideshow %}
{% if slickSlider %}
<div class="slick-slider">
<ul>
{% for slides in slickSlider %}
{% set slickSlide = TimberImage(slides.team_church_slide) %}
<li class="slide">
<img src="{{ slickSlide.src }}" alt="{{ slickSlide.alt }}">
</li>
{% endfor %}
</ul>
</div>
{% endif %}
The only real change was 'post.get_image' to 'TimberImage' & moving the set inside the for-loop.
I have created view with 3 fields.
title: type: text.
image. type: image.
video. type: file.
How to get the value of each of these fields in my view twig.
Here's my code:
{% for row in rows %}
<div>{{ row.content.title}}</div>
<img src="{{ row.content.image}}"/>
<video controls="controls" src="{{ row.content.video }}"></video>
{% endfor %}
for any one have struggled with this is how I found it.
{% for row in rows %}
<div>{{ row.content['#row']._entity.title[0].value }}</div>
<img src="{{file_url(row.content['#row']._entity.field_image.entity.fileuri)}}"/>
<video controls="controls" src="{{file_url(row.content['#row']._entity.field_video.entity.fileuri)}}"></video>
{% endfor %}
I've got a problem with showing thumbnails using Liipimaginebundle in TWIG template.
I'm rendering an index:
return $this->render('ad/index.html.twig', array(
'ads' => $ads,
));
and in index.html.twig I'm using FOR loop to show thumbnails related to ads.
{% for ad in ads %}
//with parameter - doesn't work
{% set img = ad.mainPhoto %}
<img src="{{ img | imagine_filter('thumb') }}" />
//working fine
<img src="{{ asset('/uploads/2.png') | imagine_filter('thumb') }}" />
{% endfor %}
mainPhoto stores a path to photo related to current ad - for example:
/uploads/2.png
While using an "img" parameter, I've got an exception:
An exception has been thrown during the rendering of a template ("Parameter "path" for route "liip_imagine_filter" must match ".+" ("" given) to generate a corresponding URL.").
What is the correct way to define the path in this case?
You are passing only the path as a string to the imagine_filter, add the asset and it should work:
{% for ad in ads %}
{% set img = ad.mainPhoto|default %}
{% if img <> "" %}
<img src="{{ asset(img) | imagine_filter('thumb') }}" />
{% endif %}
{% endfor %}
I'm freshly new with Django CMS. I'm able to resize something by CSS in Django but that process slows me down so I think it would be faster by using Django CMS. Ok now I got the Welcome page with Django CMS, then I start by adding a picture and surprised that there is not an option to resize it. I found something like sorl_thumbnail package but can't figure out how to integrate the code to my template. Here is from the tutorial of sorl_thumbnail:
{% load thumbnail %}
{% thumbnail item.image "100x100" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
In my feature.html template:
{% extends "base.html" %}
{% load cms_tags staticfiles sekizai_tags menu_tags %}
{% block content %}
<div>
{% placeholder "feature" %}
</div>
<div>
{% placeholder "content" %}
</div>
{% endblock content %}
The tutorial of sorl_thumbnail is useless, it doesn't say where to put their code. I tried to paste the whole thing but no luck. Can you guys help please!
djangocms-picture plugin is rather basic, please check cmsplugin-filer (https://pypi.python.org/pypi/cmsplugin-filer/0.10) plugins for more advanced image plugin
I would also recommend cmsplugin_filer_image as mentioned by #yakky
See: https://github.com/stefanfoulis/cmsplugin-filer/tree/develop/cmsplugin_filer_image
But if you want to continue use djangocms-picture, you'll need to override the plugin template.
Copy the snippet below to cms/plugins/picture.html in your template directory.
{% load thumbnail %}
<span class="plugin_picture{% if picture.float %} align-{{ picture.float }}{% endif %}">
{% if link %}<a href="{{ link }}">{% endif %}
{% thumbnail picture.image "100x100" crop="center" as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
{% endthumbnail %}
{% if link %}</a>{% endif %}
</span>