Hugo based website with widget menus also being dropdown menus? - html

I am using the hugo-academic theme for a webpage. Is it possible to have a widget's menu link (from the homepage) also be a dropdown menu
like this?
So when I am scrolling down the main page (homepage) it would highlight the widget I am seeing at the moment (as a hugo academic page would do), but at the same time, it is a drop-down menu in case I want to go to more specific webpages.

Here is an example if you want to put the "projects" widget in the home. You only need to put in the sub-menu url an # to link your widget
[[main]]
name = "Projects"
url = "#projects"
identifier = "projects"
weight = 1
[[main]]
name = "Project 1"
url = "#projects1"
parent = "projects"
weight = 1
[[main]]
name = "Project 2"
url = "#projects1"
parent = "projects"
weight = 2
If you have a widget_page "Project", you need to put the root project and then the #
url = "projects/#project1"
You can see my repo for an example: github.com/valentinaandrade/movid-site

Related

R shiny - Add logo in browser window using titlePanel

I want to add a logo to the browser window in the same way as all browser windows are usually displayed:
titlePanel allows to add easily images to the application title, by using:
titlePanel(title = div(img(src="myAppImage.jpg"), "My App Name")
It is also possible to add the title that should be displayed by the browser window with windowTitle as a parameter.
However, it does not work when adding an image to the browser window. I tried:
titlePanel(title = div(img(src="myAppImage.jpg"), "My App Name"), windowTitle = div(img(src="myBrowserImage.png"), "My Browser Name")). But this gives the following browser name: <img src ...>
What is the correct way of writing it?
Not inside the titlePanel but you can add following inside the ui:
tags$head(
tags$link(rel = "icon", type = "image/png", sizes = "32x32", href = "/myBrowserImage.png"))
Also you should put the image inside www folder.
As #phago29 indicated, one way to write it is:
useShinyjs(),
## Window title
tags$head(
tags$link(rel = "icon", type = "image/png", sizes = "32x32", href = "myBrowserImage.png")),
# App title ----
titlePanel( title = div(img(src="myAppImage.png"), 'myAppTitle'), windowTitle = "myBrowserTitle" ),
# Rest of the UI
)
With the png images in a subfolder called "www".

tumblr custom content per tagged category

With tumblr, I need to add custom title and description meta tags on tagged category pages.
such as url.com/tagged/lifestyle needs different title/description than url.com/tagged/history
Does anyone know a block level conditional for this, or a way to make custom templates for each tagged category?
I can manipulate the title using a hack via jQuery, but this will only run on page load.
//Add an id to the title tag:
<title id="chTitle">Tumblr Blog</title>
// get the current page url
$href = document.location.href;
$primaryDir = document.location.pathname.split("/")[1];
$secondaryDir = document.location.pathname.split("/")[2];
if($secondaryDir == 'lifestyle') {
$('#chTitle').text('Lifestyle');
}else if($secondaryDir == 'history') {
$('#chTitle').text('History');
}else{
$('#chTitle').text('Title Default');
}
You could actually just take the secondary directory and pass it as a variable into the page title.
$('#chTitle').text($secondaryDir);
But you would need a default fallback for pages with no secondary dir. blog.tumblr.com/submit etc.

chrome.contextMenus: context menu entry for specific links only

Currently I have a custom context menu entry Login when I right click on a link.
However, I wonder if there is a possibility to present my custom context menu entry only for specific types of links? Currently my code looks like this:
var context = 'link';
var title = 'Login';
var id = chrome.contextMenus.create({"title": title,
"contexts":[context],
"onclick": login});
function login(e){
var url = e.linkUrl;
url += ((url.indexOf("?")>-1)?"&":"?") + "Login=admin&Password=admin";
window.open(url);
}
I would like to have a context filter so that I could choose to show the entry only if the link has a certain format, e.g. http://.../myspecificurl/....
Basically I need something like:
var context = 'link[href*=/myspecificurl/]';
or a callback upon rendering the context menu.
It's documented as targetUrlPatterns using match patterns.
chrome.contextMenus.create({
"title": title,
"contexts": [context],
"onclick": login,
"targetUrlPatterns": ["http://*.example.com/*"]
});

Change image according to theme in ASP.NET MVC

What would be the best way to change the source of an image according to a theme selected? Ideally you will just have a CSS for each theme and set the image as a backround for example (that is what I currently do).
However what I need to do now is use an actual image that is functional and is part of the presentation, it is not just an image that is part of the design. This image will look slightly different depending on the theme.
I am saving the theme that each user has selected in the database. I want to be able to change the source of the image when a user requests a page according to the theme in the database. I am using dependency injection (StructureMap), MVC 4 and EF 5. I want to somehow assign value to ViewBag.MyImagePath in my _Layout page and then all pages to just have src="#ViewBag.MyImagePath".
You could write a theme aware image helper:
public static class HtmlExtensions
{
public static IHtmlString ThemeAwareImage(
this HtmlHelper htmlHelper,
string image,
string alt = ""
)
{
var context = htmlHelper.ViewContext.HttpContext;
var theme = context.Session["theme"] as string;
if (string.IsNullOrEmpty(theme))
{
// the theme was not found in the session
// => go and fetch it from your dabatase
string currentUser = context.User.Identity.Name;
theme = GetThemeFromSomeDataStore(currentUser);
// cache the theme in the session for subsequent calls
context.Session["theme"] = theme;
}
var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
var img = new TagBuilder("img");
img.Attributes["alt"] = alt;
img.Attributes["src"] = urlHelper.Content(
string.Format("~/images/{0}/{1}", theme, image)
);
return new HtmlString(img.ToString(TagRenderMode.SelfClosing));
}
}
which could be used in your views to render those images:
#Html.ThemeAwareImage("foo.jpg", "This is the foo image")
As a better alternative to using the Session to store the current user theme you could cache it in a cookie or even better make it part of your routes in which case your site will be much more SEO friendly.

Magento: Add (and retrieve) custom database field for CMS pages

I want to assign custom parameters to CMS pages in Magento (i.e. 'about', 'customer service', etc), so they can be grouped.
The end goal is to use the parameters for each page to show (or hide) them in a nav menu. Writing a quick method in the page/html block to retrieve the pages (active only) for the menu was easy, but I can't figure out how to group them so that 'testimonials', 'history', and 'contact' are associated with 'about', and 'return policy', 'shipping', and 'contact' are associated with 'customer service'.
Any help to point me in the right direction would be greatly appreciated.
Thanks!
Unfortunately the cms pages are not entities and custom attributes are not supported.
My suggestion will be to overload Mage_Cms_Model_Page, create an associated table with your data, and in the new class constructor assign a new property to your_page object.
Perhaps just use URL key field in admin as your category denominator? E.g:
CMS page 1 URL key: about/testimonials
CMS page 2 URL key: about/history
CMS page 3 URL key: about/contact
CMS page 4 URL key: customer-service/return-policy
...
Then just loop through them in your template or have a method in a custom block class to group them together using regex based on the first part before slash.
Did you look for using of setData / getData for storing custom values? It works me well for custom blocks - I set value in controller and read it at block rendering.
I decided to go in a different direction with this. Here is what I did.
In admin interface:
Created static blocks for each page (i.e. 'Page: About')
Created a product category called CMS (URL Key: content), set Is Active to 'no'
Created child categories for each content category (i.e. 'about'). Set Is Active to 'yes' and Display Mode to 'Static block only' and selected corresponding static block.
Created child categories for each content category as above.
In code:
Created two new methods in (local copy of) Catalog/Block/Navigation.php to get the current parent category and its children:
public function getNavCategory($category)
{
if($category->getLevel() == 3){
return $category;
} else {
$parentCategory = Mage::getModel('catalog/category')->load($category->getParentId());
return $parentCategory;
}
}
public function getNavChildCategories($category)
{
$layer = Mage::getSingleton('catalog/layer');
/* #var $category Mage_Catalog_Model_Category */
$categories = $category->getChildrenCategories();
$productCollection = Mage::getResourceModel('catalog/product_collection');
$layer->prepareProductCollection($productCollection);
$productCollection->addCountToCategories($categories);
return $categories;
}
Created a modified version of app/design/frontend/MYINTERFACE/MYTHEME/template/catalog/navigation/left.phtml to iterate through categories and child categories. Working example at: http://67.228.100.26/content/about