In Drupal, I render a list of taxonomy-items in the node template, using
print render($content['field_my_taxonomy']);
It displays a list like:
<ul class="links">
<li class="taxonomy-term-reference-0">
<a property="rdfs:label skos:prefLabel" typeof="skos:Concept" href="somewhere">
Tomaten
</a>
</li>
(...)
So far, so good. Now, I'd like to apply some of my own classes to both the li-tags and to the ul-tag.
I've managed to add a class to each li-tag via theme_preprocess_node:
$vars['content']['field_my_taxonomy'][$i]['#options']['attributes']['class'] = "my-li-class";
(where $i contains the index of the li-item).
However, I cannot find a similar procedure to add a class to the UL
I have found soultions involving creating template-files for specific fields, or involving overriding the theme function for taxonomy items alltogether. I don't like these solutions, because the involve adding quite a bit of "bloat" to my theme. I'd like to just add a new item to an array and let Drupal take care of the rendering. Surely, it must be possible to add ['attributes']['class']='my-ul-class to an array somewhere?
You could override the theme_item_list($variables) theme function or implement a hook_preprocess_HOOK function which would be hook_preprocess_item_list($variables) I think. The first would do your alterations in the theme itself, the second would do the alterations before going to the normal theme function.
links:
http://api.drupal.org/api/drupal/includes!theme.inc/function/theme_item_list/7
http://api.drupal.org/api/drupal/modules!system!theme.api.php/function/hook_preprocess_HOOK/7
Related
I want to add some Owl Carousel Classes to the Related Products from <ul class="products columns-4"> to <ul class="products columns-4 owl-carousel four-col"> in the Unordered List, in the single product page.
The CSS classes I want to add are owl-carousel four-col.
Doing this I know requires some knowledge of WordPress hooks and filters.
Any idea on how to implement this will be appreciated :)
As far as I know there is no filter available to modify classes set to <ul class="products"> element.
This element is actually rendered with WC template templates/loop/loop-start.php and this template is called with woocommerce_product_loop_start() function. This is a pluggable function, meaning you can override it in your active theme/child-theme.
The better and simpler way would be to modify the related template directly, located in templates/single-product/related.php (learn how to properly override WC templates in your child-theme, do NOT modify WC source templates directly in plugin's folder).
It should be enough to replace this line in the related template:
<?php woocommerce_product_loop_start(); ?>
with this line:
<ul class="products columns-4 owl-carousel four-col">
Another approach would be to set those classes dynamically with jQuery, but I'm not sure whether it would work well with Owl Carousel (it might not load properly).
I've created a view that outputs a <ul> with a <time> element in each <li>. I need to convert the HTML list to a select.
So I did 2 things:
Copied item-list.html.twig and changed <ul> to a <select>
Copied time.html.twig and changed <time> to <option>
Although this works I need those 2 templates to be scoped to my view named: 'vcon-selection-table'. I tried many things but nothing works:
views-view-table--vcon-selection-table--item-list.html
views-view-table--vcon-selection-table-item-list.html
views-view-table--vcon-selection-table.html--dataset-item-list
So the question is: What template name should I use to override the templates item-list.html.twig and time.html.twig inside my view?
Is the purpose of that view to only provide that <select> element and <option> elements? Then this really isn't the way to go. Don't build a form or form elements with Views.
You'd better provide a custom form or a custom item_list in a custom block. The block then can be placed where ever you need it. There are plenty of tutorials out there. Maybe take the following as a starting point: https://valuebound.com/resources/blog/creating-a-custom-form-in-a-block-in-two-steps-in-Drupal-8
Otherwise, if you really want to continue your road I think you have to simply preprocess the list and time fields to switch to a different template according your desired conditions. I strongly guess there is no option that a custom template for a field from a node in a view will automatically be taken into account by naming patterns. You have to add that template suggestion manually first.
Snippet to be placed in MYMODULE.module file or MYTHEME.theme file.
/**
* Implements hook_theme_suggestions_HOOK_alter().
*/
function MYMODULE/MYTHEME_theme_suggestions_item_list_alter(array &$suggestions, array $variables) {
// Use \Drupal::routeMatch() to get the current view ID or some other indicator.
// Sample: Get the current view ID.
$view_id = \Drupal::routeMatch()->getRouteObject()->getDefault('view_id');
// Install Devel, Kint module, then uncomment the following line and flush caches to inspect the outcome.
// ksm($view_id);
// Add the template suggestion.
// Add your template now under /templates/item-list--VIEWID.html.twig
if (!empty($view_id)) {
$suggestions[] = 'item_list__' . $view_id;
}
}
Downside of this approach is that this would trigger all item_lists that live on that exact page/view to take this template. You could fine-grain your templating much better with a custom module and a custom item_list and/or form.
Alternatively you can also move the logic to the date field and a custom view mode and an extra template for that. Then at least it stays where it belongs to.
To enable Twig debugging and getting the built-in template suggestions printed as HTML comments follow this article: https://www.drupal.org/docs/8/theming/twig/debugging-twig-templates
I'm stuck with an issue on Drupal 7.
I have my main menu containing multiple links.
With the module menu_fields, I added a taxonomy to the menu links, and I want to alter this menu display based on the chosen one.
Problem is I do not know how to write my development.
I tested hook_menu(), hook_menu_alter(), hook_menu_alter_link() in my module but the dpm() I wrote in it never appears.
What I hope for is a hook with a param containing an array of the menu items.
Do you have an idea ?
Progress:
I manage to display something with hook_menu_alter() -I had to empty cache- but I can't find the main menu in the $items var.
Problem solved using mymodule_translated_menu_link_alter(&$item, $map).
You just have to do a if ($item['menu_name'] == 'main-menu') {} statement and add your code in it.
The best solution I can think of is to collect menu tree with menu_tree_all_data() function:
https://api.drupal.org/api/drupal/includes%21menu.inc/function/menu_tree_all_data/7.x
and then to crawl tree structure (recursevly) and manually generate menu html.
I'm building a site in Drupal and I only want to show the secondary links on the
pages that use the Views I've created. I tried using the $secondary_links variable
in the views-view.tpl.php but the variable is null. How can I achieve this?
The secondary links are as mac correctly writes only available in page.tpl.php, but if I understand you correctly, the best solution is not getting the secondary links into your view.
With your theme, the secondary links, will most likely be printed out where they should, regardless of what is being displayed, be it your views, nodes, the front page etc. Views are displayed and everything else you render, is wrapped in the page template, that controls where menus are located, regions and other fun stuff.
Now, if you don't want to alter this, the location of the menus, their styling and this stuff, you shouldn't be printing the secondary menu in your views template, you shouldn't be doing anything with it at all.
The solution is simple
It's using something that mac mentioned but in a different way: preprocess function. These functions are used to in your template.php file, to add some logic to your variables. You can alter variables or remove them altogether. What I would do, would simply be to remove the primary links, by setting the value of $primary_links to an empty text string.
This would effectively remove the primary links, so only the secondary links are displayed. You could also display the secondary links as the primary, but this might cause confusing to your users. You just need to add some logic to control when this should happen and you are set.
Have you activated the secondary links from the theme settings? That would be:
http://example.com/admin/build/themes/settings/name_of_your_theme
I believe once you have activated the option, the variable will be populated.
EDIT: Thinking a second more, I would also comment that I am not sure if the primary and secondary links are passed to the views templates. I believe those are passed to the page.tpl.php file instead. If I am right, and for some reason you want to add that variable to those passed to the views template, you will have to use a preprocess function, like explained here.
EDIT #2: Indeed if you only need the secondary menu used in a specific views template, another approach would be to simply call menu_secondary_links() from within the template. This is not the most elegant solution ever, as it puts in a theming element something that should belong somewhere else, but it's up to you to make the call whether that menu in the views is a core functionality or a styling element.
HTH!
You can use the following code to show secondary menu on any view
function YourTheme_preprocess_views_view(&$vars)
{
$menu_sec = menu_navigation_links('menu-secondary');
$vars['custom_menu'] = theme('links__menu-secondary', array('links' => $menu_sec));
}
or you can even use other preprocess function depending upon your needs.
Further you can call it on .tpl.php file using:
<?php
$menu_sec = menu_navigation_links('menu-secondary');
print theme('links__menu-secondary',
array(
'links' => $menu_sec,
'attributes'=>array(
'class' => array('nav', 'nav-pills', 'p-f-subfilter'),
)
)
);
?>
I need to assign an "active" class to my main-level navigation rendered by wordpress.
Here's my HTML:
<li>Home</li>
<?php wp_list_pages('title_li=&exclude=21'); ?>
See WP Codex for adding classes/ids to your wp template:
<li<?php
if (is_home()) {
echo " class=\"active\"";
}
?>>Home</li>
WordPress automatically adds relevant classes to list items that are made using the wp_list_pages() function. For example, it will add a class of current_page_item to the page which you are currently viewing - allowing you to style this particular list item differently.
This only works for pages and afaik does NOT work for posts. However, there is a slightly hack-ish way around it. If you have a list of posts from your loop, each post will have a class with post-## -- where ## is the ID of the post (as long as you use the get_post_class() function, or similar)
You can also get the ID of the current post being displayed by:
Outside of the list of posts you are outputting, preferably in your header.php, have:
$this_posts_id = $post->ID;
Then inside of the loop of the list of posts you are making:
if($this_posts_id == $post->ID;){echo "current";}
or something similar!
Hope that helps