Image Menu
Permalink
Hi,
here's a working Image Menu template for the auto-nav block.
Description:
To install, just put the archive's files into your root webfolder: './' (not into your ./concrete folder). Afterwards it should be available in the templates section.
To assign an image to a page, create one in gif format, named just like your page name is, e.g.: page name: "Home", image name: "Home.gif"; put the images you want to have appeared in your autonav block into your custom 'themes/mytheme/images' directory.
For selected navigation elements you can create an image named "Home_selected.gif" or "Products_selected.gif".
For selected hover navigation elements you can create an image named "Home_selected_hover.gif" or "Products_selected_hover.gif".
For hover navigation elements you can create an image named "Home_hover.gif" or "Products_hover.gif".
A sprite technique like this onehttp://www.shopdev.co.uk/blog/animated-menus-using-jquery/...
is the result :)
Cheers
--synlag
here's a working Image Menu template for the auto-nav block.
Description:
To install, just put the archive's files into your root webfolder: './' (not into your ./concrete folder). Afterwards it should be available in the templates section.
To assign an image to a page, create one in gif format, named just like your page name is, e.g.: page name: "Home", image name: "Home.gif"; put the images you want to have appeared in your autonav block into your custom 'themes/mytheme/images' directory.
For selected navigation elements you can create an image named "Home_selected.gif" or "Products_selected.gif".
For selected hover navigation elements you can create an image named "Home_selected_hover.gif" or "Products_selected_hover.gif".
For hover navigation elements you can create an image named "Home_hover.gif" or "Products_hover.gif".
A sprite technique like this onehttp://www.shopdev.co.uk/blog/animated-menus-using-jquery/...
is the result :)
Cheers
--synlag
It works now like you can see in the example page, but in this solution, you've to edit main.css and add some javascript to your header or in a javascript file.
That's why, the template does not know what the height and width of your page buttons is.
To solve this i need an image helper. My php is not really skilled, so it might take a while to write it, but i'm on.
Then the javascript code must be added in some way to the header ...
back in the concrete api ^^
That's why, the template does not know what the height and width of your page buttons is.
To solve this i need an image helper. My php is not really skilled, so it might take a while to write it, but i'm on.
Then the javascript code must be added in some way to the header ...
back in the concrete api ^^
works now how described in the first post. file attached in next post ^^
simply put the entire archive into your root dir. (do not copy it into your ./concrete dir)
How it works -> first post.
Now, you can also create an gif for a selected button which is hovered, e.g.: page name: "Home", img name: "Home_selected_hover.gif"
In context to this issue
http://www.concrete5.org/index.php?cID=6090...
, addHeaderItem doesn't work so far within templates, so i had to include the necessary js and css files via header_required.php; that's why it's overwritten.
it'd be nice, if header_required.php
could look globally in ./js and ./css like
but somehow this
doesn't work.
Next point is, when installing js, css, tools via package, it seems to me that a package does not update header_required.php to include the needed js,css ... files, which could be installed through a package.
Any thoughts how to handle this?
How it works -> first post.
Now, you can also create an gif for a selected button which is hovered, e.g.: page name: "Home", img name: "Home_selected_hover.gif"
In context to this issue
http://www.concrete5.org/index.php?cID=6090...
, addHeaderItem doesn't work so far within templates, so i had to include the necessary js and css files via header_required.php; that's why it's overwritten.
it'd be nice, if header_required.php
could look globally in ./js and ./css like
$this->addHeaderItem('<script type="text/javascript" src="' . REL_DIR_FILES_TOOLS_REQUIRED . '/i18n_js"></script>');
but somehow this
$this->addHeaderItem('<script type="text/javascript" src="' . DIR_REL . '/' . DIRNAME_JAVASCRIPT . '_js"></script>');
doesn't work.
Next point is, when installing js, css, tools via package, it seems to me that a package does not update header_required.php to include the needed js,css ... files, which could be installed through a package.
Any thoughts how to handle this?
what you're basically trying to do is inject code into the header from the template (view). An older discussion about it:http://www.concrete5.org/community/forums/customizing_c5/addheaderi...
You're idea has one problem in my opinion, it doesn't support more than one template. I'd like to select a custom template and with that template a custom javascript. If I select another custom template, only the javascript belonging to that template should be included.
This, I call it, "auto-magic" you're describing isn't very flexible and you must understand what the system is doing, means you have to read the documentation.
Imho it's better if addHeaderItem would work out of a template because it's much easier to copy a block/template this way...
But I'd like to hear more thoughts about this..
You're idea has one problem in my opinion, it doesn't support more than one template. I'd like to select a custom template and with that template a custom javascript. If I select another custom template, only the javascript belonging to that template should be included.
This, I call it, "auto-magic" you're describing isn't very flexible and you must understand what the system is doing, means you have to read the documentation.
Imho it's better if addHeaderItem would work out of a template because it's much easier to copy a block/template this way...
But I'd like to hear more thoughts about this..
as i described in the installation advices the js and css files are included via modified header_required.php file.
But i'd prefer the method to do it via template. The header is printed before we get to the template. So how could we insert something into the view, which is still rendered to ca 20%? I think this is not a good method to do. There must be a way to collect template, package or application related files, which are needed to get printed in the header of a page, before we reach a template or app itself.
I posted one above. extend header_required.php, but what is when another package overwrites our header_required.php?
Should we look into
first?
But i'd prefer the method to do it via template. The header is printed before we get to the template. So how could we insert something into the view, which is still rendered to ca 20%? I think this is not a good method to do. There must be a way to collect template, package or application related files, which are needed to get printed in the header of a page, before we reach a template or app itself.
I posted one above. extend header_required.php, but what is when another package overwrites our header_required.php?
Should we look into
$this->addHeaderItem('<script type="text/javascript" src="' . REL_DIR_FILES_TOOLS_PACKAGES . 'mypackages_js"></script>'); $this->addHeaderItem('<script type="text/javascript" src="' . REL_DIR_FILES_TOOLS_BLOCKS . 'myblocks_js"></script>');
I'm new to C5 so bare with me. I have no idea what you mean by moving the "archive" to the root folder. This is no folder called archive. Do you mean to move everything in the /concrete folder to the root directory?
yourwebsite/
has a lot of folders, also a yourwebsite/concrete folder, but this is for the core, so don't put it there!
yourwebsite/ has also
yourwebsite/css
yourwebsite/js
yourwebsite/elements
That's where the files have to go.
Put your images, named like described in the first post into your mytheme/images directory.
has a lot of folders, also a yourwebsite/concrete folder, but this is for the core, so don't put it there!
yourwebsite/ has also
yourwebsite/css
yourwebsite/js
yourwebsite/elements
That's where the files have to go.
Put your images, named like described in the first post into your mytheme/images directory.
Hi All,
I still think this is a really valuable block but have only now had a chance to re-test it...
In 5.3.0 and now 5.3.1 i just can't get it to work. When i include the header_required.php in the elements folder it completely wipes out the site and edit bar except for the concrete logo.
When i remove it the template is calling the page.gif image but of course the js and css isn't being called to produce the rollover.
As i said this is really valuable and could be a great standard template for the core files. Any ideas?
Many thanks,
O
I still think this is a really valuable block but have only now had a chance to re-test it...
In 5.3.0 and now 5.3.1 i just can't get it to work. When i include the header_required.php in the elements folder it completely wipes out the site and edit bar except for the concrete logo.
When i remove it the template is calling the page.gif image but of course the js and css isn't being called to produce the rollover.
As i said this is really valuable and could be a great standard template for the core files. Any ideas?
Many thanks,
O
sure, ideas are there :)
template will be reworked as package.
It could work in this way:
1. if button images(default, selected, hover) are applied directly to a page via filemanager, render them (tutorial ->http://www.codeblog.ch/en/2009/03/concrete5-templates/... thx remo!)
2. else if no image is found the font could be rendered via gd library (...)
template will be reworked as package.
It could work in this way:
1. if button images(default, selected, hover) are applied directly to a page via filemanager, render them (tutorial ->http://www.codeblog.ch/en/2009/03/concrete5-templates/... thx remo!)
2. else if no image is found the font could be rendered via gd library (...)
It's a great addition to the autonav, thanks, and going to be really useful.
However currently the template calls on the root folder for the images not themes/mytheme/image. I'm no good at php so wouldn't know what to change to make this right, as currently it's a bit messy to have all those image files floating around in the root folder.
In addition to that, i can't seem to get the hover to work, only the _selected.gif which works brilliantly. Maybe that's related to my first point.
Again, many thanks for this.
O