im frecuent user of this forum and always find answers from other users, but this time i need to ask my own question.
At this moment im editing a wp template based on twig that i bought, right now im facing a fancybox gallery which just call the first image, and i need to add the gallery rel to the other images included in the post. i already found the missing code which call the rest of images from the post ID, but i dont know how to express it by the twig structure and incorporate it to the original code of the page
this is the code which display the gallery:
{% if wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
<div class="carousel property">
<div class="preview">
<a href="{{ wp.get_post_meta(post.ID, '_property_slides', TRUE).0.imgurl }}" class="fancybox">
<img src=" {{ wp.get_post_meta(post.ID, '_property_slides', TRUE).0.imgurl }}" alt="">
</a>
// the php code expressed on twig goes here //
</div>
<!-- /.preview -->
<div class="content">
<ul>
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
{% if loop.first %}
<li class="active" >
{% else %}
<li>
{% endif %}
<img src="{{ slide.imgurl }}" alt="">
</li>
{% endfor %}
</ul>
<a id="carousel-prev" href="#">{{ wp.__('Previous', 'aviators') }}</a>
<a id="carousel-next" href="#">{{ wp.__('Next', 'aviators') }}</a>
</div>
<!-- /.content -->
</div><!-- /.carousel -->
{% endif %}
This is the php code i need to implement on twig
add_filter(‘wp_get_attachment_link’,'add_gallery_id_rel’);
function add_gallery_id_rel($link){
global $post;
return str_replace(‘<a href’, ‘<a rel=”galeria’. $post->ID .’” href’, $link);
}
I really appreciate if you can help me with this (sorry about my weird english)
That code is a filter applied to the regular Wordpress functions, you are using a Twig Wrapper so that code won't work for you.
Try modifying the twig loop.
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE) %}
#... rest of the code
<a rel="galeria{{ post.ID }}" href="{{ slide.imgurl }}">
<img src="{{ slide.imgurl }}" alt="">
</a>
#... rest of the code
{% endfor %}
Skip the first slide using slice:
{% for slide in wp.get_post_meta(post.ID, '_property_slides', TRUE)|slice(1) %}
#... rest of the code same as above
Related
After I edit my twig templates, they don't load on the page.
I have a header and footer twig file which are included in my base.html.twig.
When i edit these files, the changes aren't pushed trough when i reload the page.
I've tried clearing the cache and i disabled cache in config\packages\twig.yaml
I even tried to completely delete the cache folder, nothing seems to work.
I use the built in Symfony server.
homepageController.php:
?php
namespace App\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use App\Entity\Vacature;
/**
* #Route("/")
*/
class HomepageController extends AbstractController
{
/**
* #Route("/", name="homepage")
* #Template()
*/
public function index()
{
$rep = $this->getDoctrine()->getRepository(Vacature::class);
$data1 = $rep->getAllVacatures();
$data2 = $rep->getLastVacatures(5);
return array("carousel" => $data1, "laatste5" => $data2);
}
}
Homepage/index.html.twig
{% extends 'base.html.twig' %}
{% block title %}Hello HomepageController!{% endblock %}
{% block body %}
{% for vacature in carousel %}
<div class="vacature">
<h4>{{ vacature.titel }}</h4>
<p>{{ vacature.tekst }}
Bekijk
</div>
{% endfor %}
{% for vacature in laatste5 %}
<div class="vacature">
<h4>{{ vacature.titel }}</h4>
<p>{{ vacature.tekst }}
Bekijk
</div>
{% endfor %}
<pre>
{{ dump(carousel) }}
</pre>
{% endblock %}
base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}VacIT{% endblock %}</title>
<link href="{{ asset('/assets/css/foundation.css') }}" rel="stylesheet"/>
<link href="{{ asset('/assets/css/main.css') }}" rel="stylesheet"/>
{% block stylesheets %}{% endblock %}
</head>
<body>
<div id='header'>
{% include "header.html.twig" %}
</div>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
<div id='footer'>
{% include "footer.html.twig" %}
</div>
</body>
</html>
header.html.twig
<div class='header'>
<div class="row">
<div class="small-12 columns">
<div class='header-logo'>
<a href="{{ path('homepage') }}">
<img id='logo' src="{{ asset('/assets/images/logo/logo.png') }}" alt="logo" width="200px">
</a>
</div>
<div class="skew-header-shadow">
<div class="skew-header"> </div>
</div>
</div>
</div>
</div>
footer.html.twig
<div class="footer-box">
<div class="skew-footer-shadow">
<div class="skew-footer"> </div>
</div>
<div class="footer">
<a href="{{ path('homepage') }}">
<img id='logo' src="{{ asset('/assets/images/logo/logo.png') }}" alt="logo" width="300px">
</a>
</div>
</div>
the tree is
Project
|-bin
|-config
|-public
|-assets
|-CSS
|-Fonts
|-images
|-logo
|-src
|-Command
|-Controller
|-Entity
|-Repository
|-Resources
|-templates
|-homepage
|-index.html.twig
base.html.twig
header.html.twig
footer.html.twig
Edit: I thought maybe this could be the reason somehow, the entire folder was inside my OneDrive. The thought crossed my mind, OneDrive is to blame. I don't know why, it's just a hunch...
Well... I just restarted the whole project. There were several other problems with it.
Although it would be interesting to see if anyone knows why the header an footer didn't change, it is not really relevant anymore.
I'm developing landing page with October CMS and using Static Pages plugin.
Here is my header.htm file with navigation:
<div class="header" id="header">
<div class="container">
<div class="header__inner">
<div class="header__logo">
<img src="{{ 'assets/img/logo.svg'|theme }}" alt="logo" class="logo">
</div>
<nav class="nav" id="nav">
{% partial 'menu-items' items=staticMenu.menuItems class='nav__list' %}
</nav>
</div>
</div>
</div>
Question is how to modify basic menu-items.htm partial if I'am using one page layout and I want exact section be active on menu item click (not separate page as it is now).
At the moment I have menu with such items and want one of these section be active on click:
/,
/#about,
/#projects,
/#contacts.
My menu-items.htm partial is below:
<ul class="{{ class }}">
{% for item in items %}
<li
class="nav__item {{ item.isActive or item.isChildActive ? 'active' : '' }}
{{ item.items ? 'dropdown' : '' }}"
>
<a class="nav__link"
{% if item.items %}class="dropdown-toggle" data-toggle="dropdown"{% endif %}
href="{{ item.url }}"
>
{{ item.title }}
{% if item.items %}<span class="caret"></span>{% endif %}
</a>
{% if item.items %}
{% partial 'menu-items' items=item.items class='dropdown-menu' %}
{% endif %}
</li>
{% endfor %}
</ul>
At the moment code in menu-items.htm partial if statement add "active" class on click because of this line:
<li class="nav__item {{ item.isActive or item.isChildActive ? 'active' : '' }} {{ item.items ? 'dropdown' : '' }}"
...it is because item "isActive" property is "true" when exact menu item is clicked. But my question is, how to do the same (add "active" class) with section link in meniu navigation, because my project have only one page "home" and several sections in it. so I want menu navigation link be active on fixed navigation when someone click for eaxmple "About" link and scroll to /#about section.
I wrote just several lines of Jquery (thanks to Pettis Brandon advise).
$('.nav__item').click(function(){
$('.nav__item').removeClass('active');
$(this).addClass('active')
});
It removes 'active' class from '.nav__item' class and after that add it again on corresponding link, based on {{ item.url }}. Hope it helps for the other as well (who is using Static Pages plugin).
I am new to OctoberCMS and I am stuck now, I am facing issue to use my custom blog posts component (which overrides Rainlab blog posts) in the same page multiple times.
Say I have created an alias of default blogPosts to postLists and I defined my custom HTML structure and it is working well, no issues.
Now what I want is to use the postLists post structure in my page for three different categories and here I am stuck because when I pass variable to component like this - { % component 'postLists' categoryFilter='news' %} it does not work for the category filter and if I select a category from drag drop component UI it becomes global categoryFilter setting for the page.
This is my requirement.
My postList component code:-
{% set posts = __SELF__.posts %}
{% for post in posts %}
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4 col-4 content_body_img">
<a href="{{ post.url }}">
{% if post.featured_images.count > 0 %}
<img class="media-object" src="{{ post.featured_images.first.getThumb(108, 108) }}" />
{% else %}
<img class="media-object" src="http://placehold.it/108x108" />
{% endif %}
</a>
</div>
<div class="col-sm-8 col-8">
<p>{{ post.title }}</p>
<!--location_date-->
<div class="location_date">
<ul>
<li><i class="fa fa-calendar"></i><span> {{ post.published_at|date('j F, Y') }}<span></li>
<li><i class="fa fa-map-marker"></i>Dubai</li>
</ul>
</div>
<!--location_date end -->
</div>
</div>
</div>
<!--content_body_img end -->
{% else %}
<div class="col-sm-6 col-6 col-lg-3">{{ noPostsMessage }}</div>
{% endfor %}
Please help me, any help will be very much appreciated.
Thanks Sanny
This is static Approach - I will post dynamic Approach as well give me some time
Best and possibly easy solution will be ( in case you just intend to show posts ) is to add 3 Post List component with Different Category filter option for each tab.
It should do your work
make sure this is optimal solution if you just need to show lists nothing else.
I'm developing a web app using OctoberCMS where a user can select an item and see a list of material needed to craft it. Some materials can also be crafted and the user can see a "+" sign near the craftable material, that could be clicked to show an other list with the material needed to create the material.
See example
The problem is that while there is only one nested submaterial (like in the example image) there are no problem, but when there are more than one nested submaterial (for example a craftable submaterial that has craftable submaterials) the server returns me an "Internal server error" and the error_log reports:
PHP Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 65536 bytes) in /home/federico/federicoxella.com/vendor/composer/ClassLoader.php on line 412
This is the script i'm using to extract data from database (The database is on the same machine of the server)
public function onExpand()
{
$itemID = post('item_id');
$this->page['subitemMaterials'] =
Item::select('federicoxella_lootbot_items.id', 'name', 'craftable')
->join('federicoxella_lootbot_crafts', function($join) use ($itemID)
{
$join->on('federicoxella_lootbot_crafts.material_1', '=', 'federicoxella_lootbot_items.id')
->orOn('federicoxella_lootbot_crafts.material_2', '=', 'federicoxella_lootbot_items.id')
->orOn('federicoxella_lootbot_crafts.material_3', '=', 'federicoxella_lootbot_items.id');
})
->where('federicoxella_lootbot_crafts.material_result', '=', $itemID)
->get();
}
This function should take the ID of an item, extract all needed material from database and insert them in a page variable (subitemMaterial) that looks like this [{"id":3,"name":"Colla","craftable":0},{"id":4,"name":"Accendino","craftable":0},{"id":23,"name":"Metallo","craftable":0}]
If an item has "craftable":1 a new partial is created to host the material needed to create the item.
And this is the partial in where I use the variable
<ul class="no-bullet-list">
{% for i in 0..2 %}
<li>
{% if subitemMaterials[i].craftable == 1 %}
<b>{{ itemMaterial[i].name }}</b>
<form style="display:inline;">
<input type="hidden" name="item_id" value="{{ subitemMaterials[i].id }}" />
<a data-request="{{ __SELF__ }}::onExpand"
data-request-update="'{{ __SELF__ }}::subItems': '#{{ subitemMaterials[i].id }}_materials'">+</a>
</form>
<div id="{{ subitemMaterials[i].id }}_materials">
{% partial __SELF__~'::subItems' %}
</div>
{% else %}
{{ subitemMaterials[i].name }}
{% endif %}
</li>
{% endfor %}
</ul>
And the partial in where I declare the previous partial
<div class="callout">
<h3>{{ itemToCraft.name }}</h3>
<ul class="no-bullet-list">
{% for i in 0..2 %}
<li>
{% if itemMaterial[i].craftable == 1 %}
<b>{{ itemMaterial[i].name }}</b>
<form style="display:inline;">
<input type="hidden" name="item_id" value="{{ itemMaterial[i].id }}" />
<a data-request="{{ __SELF__ }}::onExpand"
data-request-update="'{{ __SELF__ }}::subItems': '#{{ itemMaterial[i].id }}_materials'">+</a>
</form>
<div id="{{ itemMaterial[i].id }}_materials">
{% partial __SELF__~'::subItems' %}
</div>
{% else %}
{{ itemMaterial[i].name }}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
Can you guys help me understand why server returns this error code?
Found the problem (that not is exactly a problem):
Pratically I'm recursively adding partials that print the value of the variable injected in the page.
<ul class="no-bullet-list">
{% for i in 0..2 %}
<li>
{% if subitemMaterials[i].craftable == 1 %}
<b>{{ itemMaterial[i].name }}</b>
<form style="display:inline;">
<input type="hidden" name="item_id" value="{{ subitemMaterials[i].id }}" />
<a data-request="{{ __SELF__ }}::onExpand"
data-request-update="'{{ __SELF__ }}::subItems': '#{{ subitemMaterials[i].id }}_materials'">+</a>
</form>
<div id="{{ subitemMaterials[i].id }}_materials">
{% partial __SELF__~'::subItems' %} <--- Incriminate line of code.
</div>
{% else %}
{{ subitemMaterials[i].name }}
{% endif %}
</li>
{% endfor %}
</ul>
I'm coding up a theme using Timber for Wordpress, which uses the twig templating engine.
I currently have different data needed for header sections on three pages.
Home Page > BG Slider & Title
Blog Page > BG & Pinned Post
Other Pages > Regular BG Image
The navigation is also supposed to be the same over each of these page headers.
I'm unsure of the best way to use twig to solve this problem.
In my base.twig I currently have:
{% block header %}
<div class="wrapper">
<h1 class="hdr-logo" role="banner">
<a class="hdr-logo-link" href="/" rel="home">{{site.name}}</a>
</h1>
<nav id="nav-main" class="nav-main" role="navigation">
<ul class="nav">
{% for item in menu.get_items %}
<li class="nav-item {{item.classes | join(' ')}}">
<a class="nav-link" href="{{item.get_link}}">{{item.title}}</a>
{% if item.get_children %}
<ul class="nav nav-drop">
{% for child in item.get_children %}
<li class="nav-drop-item">
<a class="nav-link" href="{{child.get_link}}">{{child.title}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav><!-- #nav -->
</div>
{% endblock %}
I could copy and paste this block onto each page, ie add it to
home.twig, blog.twig and other.twig
But i am repeating myself constantly, and it feels wrong. I need to feed through this on each page, without repeating my navigation each time i do it.
Does anyone have a suggestion as to how to fix?
What you want are Twig macros and/or Includes
Includes
can be used to include another .twig file in your template.
You can add variables to an Include also, but by default code inside the include have acccess to global context. eg. all template variables.
{# template.html will have access to the variables from the current context and the additional ones provided #}
{% include 'template.html' with {'foo': 'bar'} %}
{% set vars = {'foo': 'bar'} %}
{% include 'template.html' with vars %}
Macros
Are isolated from the global context, and can only work with variables/parameters that you supply to it.
{# defineit #}
{% macro input(name, value, type, size) %}
<input type="{{ type|default('text') }}" name="{{ name }}" value="{{ value|e }}" size="{{ size|default(20) }}" />
{% endmacro %}
{# then calling it #}
<p>{{ _self.input('username') }}</p>
With both Includes and Macros you can easily do infinitely nested trees, when you include itself in the loop.
Example of nested tree with include:
{# content of tree.twig file for include#}
{% for item in menu.get_items %}
<li class="nav-item {{item.classes | join(' ')}}">
<a class="nav-link" href="{{item.get_link}}">{{item.title}}</a>
{% if item.get_children %}
<ul class="nav nav-drop">
{# recursion #}
{% include 'tree.twig' with { menu : item.get_children } %}
</ul>
{% endif %}
</li>
{% endfor %}