I'm trying to style a custom menu within drupal.
I've sucessfully styled to display a background image, but the problem is that the menu item title still displays. So I get a nice image, with blazoned all over it.
Is there a template function I could use to format the custom menu and remove the text portion from the hyperlink?
I've done something similar on my primary links (see below) but I could do with some help figuring out how to do so on the custom menus.
function primary_links_add_icons() {
$links = menu_primary_links();
$level_tmp = explode('-', key($links));
$level = $level_tmp[0];
$output = "<ul class=\"links-$level\">\n";
if ($links) {
foreach ($links as $link) {
$link = l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']);
$cssid = str_replace(' ', '_', strip_tags($link));
$link = preg_replace('#(<a.*?>).*?(</a>)#', '$1$2', $link);
$output .= '<li id="'.$cssid.'">' . $link .'</li>';
};
$output .= '</ul>';
}
return $output;
}
And then this called within the page.tpl.php
print primary_links_add_icons();
Thanks for any help!
theme_menu_tree would be the way to resolve this on the template.php itself. The meat of your function would be identical to your function above. Documentation is at http://api.drupal.org/api/function/theme_menu_tree
But, I would recommend using CSS for what you're doing. If the text is removed entirely (via php) then you'll be depending on the user's browser to display the images and CSS properly and make navigation possible.
You might consider including both the image and the text, but making the text portion display: none so that it degrades more gracefully if CSS isn't loaded properly.
Related
I am trying to create a side anchor navigation that will build out the side nav for every h2 tag header. I have the side nav portion working just the way I want it to. It pulls the h2 out of the wordpress the_content and creates an anchor link and replaces the value of the h2 with a string such as (#-this-is-an-anchor) if the first h2 in the_content is This Is An Anchor.
The part Im having a problem with is wrapping the_content h2's with the anchor id to connect to the side nav values. The below code is to display the body content, which is what Im having issues with.
<?php
$content = get_the_content();
preg_replace_callback( '#<h2.*?>(.*?)<\/h2>#',function($matches) {
global $h;
$h = array();
$h[] = $matches[1];
return'';
}, $content);
$anchor_div = '';
foreach($h as $h_tag) {
$anchor_div = str_replace(' ','-',strtolower($h_tag));
}
echo preg_replace('#<h2.*?>(.*?)<\/h2>#','<div id="'. $anchor_div .'"><h2>'. $h_tag.'</h2></div>', $content);
?>
Now this is working, however only the last h2 value is being displayed as the h2 replacement and the anchor link. You can see in the image what Im trying to do. This works if I wrap the preg_replace within the foreach statement, but duplicates everything. So having it outside is showing the right amount of content, but like I said, the last anchor value is only showing in the body.
Thanks for your help.
$anchors = [];
$new = preg_replace_callback('#(<h2.*?)>(.*?)<\/h2>#',function($matches) use(&$anchors) {
$anchor = str_replace(' ', '-', strtolower($matches[2]));
$anchors[] = [$matches[2], $anchor];
return $matches[1] . ' id="' . $anchor . '">' . $matches[2] . '</h2>';
}, $text);
This adds the id attribute to the h2 elements, and in $anchors you find the original h2 text contents and the used ids, so that you can create your navigation based on that.
I'm learning how PHP works, but at the same time I have to redesign an custom CMS.
CMS is written in PHP, I have restyled the default menu using CSS and added a side slide effect. But now, I need to keep this side panel opened, when I click on a link from the menu. I think, the easiest way is prevent page reload = to make menu links open in a page content section (<div id="content"></div>). But because in a source code, there are lots of functions, variables etc., I really need your help, how to proceed.
/Admin/index.php - content from menu sections (placed in separate files) is called here using a function
AdminLib/CSS/style.css - contains also styles for side menu
AdminLib/Include/menu.php - here is defined a side menu (ul, li)
/Admin/index.php
...
...
...
<body>
<?php if ($page != 'login') {
$menu_obj = new AdminMenu(dirname(__FILE__).'/Tabdefs/');
echo $menu_obj->GetHtml();
?>
<div class="site-wrap">
<?php
}
ContContent();
?>
</div>
...
...
...
AdminLib/Include/menu.php
...
...
...
//vrati html pro svoje menu
public function GetHtml() {
$html = '<ul class="navigation">';
$html .= $this->GetHtmlRecursive($this->menu_def);
$html .= '</ul>';
$html .= '<input type="checkbox" id="nav-trigger" class="nav-trigger" /><label for="nav-trigger"></label>';
return $html;
}
/********** PRIVATE ***********/
//vrati html pro vsechny polozky menu v poli $arr; Pokud tam nejaka ma sub, tak se vola rekurzivne
private function GetHtmlRecursive($arr) {
$html = '';
foreach ($arr AS $item) {
//neukazovane polozky rovnou preskakuju
if ($item['show'] != 'Y')
continue;
//ted jestli mam podpolozky, tak rekurzujeme
if (isset($item['sub'])) {
$html .= '<li class="nav-item">'.$item['nazev'].''.
'<ul class="nav-item">';
$html .= $this->GetHtmlRecursive($item['sub']);
$html .= '</ul></li>';
}
else {
//pokud podpolozky nemam, tak vypisu normalni polozku
$html .= '<li class="nav-item">'.$item['nazev'].'</li>';
}
} //foreach pres polozky $arr
return $html;
}
...
...
...
I trying to integrate something like this - using jQuery script (How to target the href to div - 2nd and 3rd link on JsFiddle) into my source code, but I need help with realisation - I wasn't able to make it working.
Instead of getting the links to target specific divs, you could always use anchor tags. They use the a tag to go to the relevant point on a page.
An anchor tag would be created like the following:
<a name="location1"></a>
To link to that with your a tag, you can then do:
Link Text
That link will then take you to the anchor location on the page.
If you really want to do it by div ID and use jQuery (which will enable you to scroll to it rather than a straight jump), then if you create your link to something like the following :
Link Text
If the page then has the div:
<div id="location1">Contrent of the div</div>
and your page has the function (either on page or in an external file) :
function scrollToLocation(location_id) {
$('body').animate({
scrollTop: $('#' + location_id).offset().top
}, 500);
}
There's more information on Stack Overflow in the following questions:
jQuery .scrollTop(); + animation
jQuery jump or scroll to certain position, div or target on the page from button onclick
I am trying to pull content from one page into another. I could be going about this the wrong way, but I am just trying to get the general method of how it is done. This is what I have so far trying to get the data I need. I am not getting the permalink or the image. The other issue is when applying the substr method to the $content variable it actually cuts the html tags off to making it to where anything after it gets nested into whatever html happens to be in the content. I appreciate any tips you may have. Here is the function I created to try and pull the content in it's initial stage.
function show_post($path) {
$post = get_page_by_path($path);
$title = apply_filters('the_title', $post->post_title);
$image = apply_filters('featured_image', $post->the_post_thumbnail);
$content = apply_filters('the_content', $post->post_content);
$link = apply_filters('the_permalink', $post->get_permalink);
echo '<h3>'.$title.'</h3>';
echo substr($content, 0, 300) . '...';
}
$path is the relative url of the website to where I am pulling content so lets say my url i want to grab data is www.test.com/about/bio I would make the path be about/bio.
I appreciate your help in this.
Im trying to edit my webisites blog that I inherited from a creator I have no contact with. I have been fiddling with the site for a little more than a week but I don't know how to edit the links in the blog index.
Here is the link to my site's blog:
http://bestdetails.com/blog/
As you can see the box is a link to the whole article, and in the article if you scroll down you can see the tags for the post.
I want the tags inside the box to show on the blog index page instead.
I want to put the tags where the red circle is:
I know that you can edit the blog in the blog.php, but I don't know what code or where in the HTML text to put that code.
In order to access the post tags, you have the function get_tags();
It is called this way:
$tags = get_tags();
$html = '<div class="post_tags">';
foreach ( $tags as $tag ) {
$tag_link = get_tag_link( $tag->term_id );
$html .= "<a href='{$tag_link}' title='{$tag->name} Tag' class='{$tag->slug}'>";
$html .= "{$tag->name}</a>";
}
$html .= '</div>';
echo $html;
The place to edit will depend on your Theme, it can be in the index, the page.php or the blog.php. Take a look at your Settings -> Reading and see what page is acting as home and which is acting as blog. After that go to pages and see what template is associated, if any.
I have just noticed that when viewing an individual node, that the seems to be Image:, Content: and Tags: embedded as a result from the render function. Does any one know how to remove these? (Google turns up nothing, like most Drupal questions)
Regards
EDIT:
Lets say I have a page which loads in taxonomy nodes into a carousel. If I view the page It looks pretty much as intended. If I view each of the nodes individualy /taxonomy/node it appears as:
Image:
[the images]
Content:
[the content]
Tags:
[list of tags]
Same goes if instead of the previous page loading the nodes as they currently do and I do it like so:
$ids = taxonomy_select_nodes(array(1));
$professional_nodes = node_load_multiple($ids);
foreach( $professional_nodes as $view ) {
echo '<li>' . drupal_render(node_view($view) ) . '</li>';
}
I get the same outcome.
There are several ways to do that, here is a quick solution
Try to print the teaser version of the nodes, and customize the appearance of the teaser from manage display page admin/structure/types/manage/page/display/teaser.
You will just need to add teaser as a second argument to node_view to print the teaser version.
$ids = taxonomy_select_nodes(array(1));
$professional_nodes = node_load_multiple($ids);
foreach( $professional_nodes as $view ) {
echo '<li>' . drupal_render(node_view($view, "teaser")) . '</li>'; // the edited line.
}
Hope this works... Muhammad.