Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
txp:section_list and icons
This would be great on a section_list container tag:
<txp:section_list default_title='<txp:image id="15" />'...> – replacing a text with an icon.
Didn’t think further yet.
Could there be a way of referencing txp:image(s) instead of section names, while keeping active class functionality?
Would be extremely useful for saving space on mobile devices and getting out of the way of having to use a hamburger menu.
Last edited by jayrope (2018-07-25 15:23:49)
A hole turned upside down is a dome, when there’s also gravity.
Offline
Re: txp:section_list and icons
Hi jayrope,
Do you mean like a house icon in place of the “home” text (I think that is what default_title does)?
Or do you mean a separate image to go along with each section where the text disappears leaving just the icon on small viewports?
The latter you could do by constructing your section form as:
<txp:section_list wraptag="ul" break="">
<li<txp:if_section name='<txp:section />'> class="active"</txp:if_section>>
<a href="/<txp:section />"><span class="menu-icon icon-<txp:section />"</span><span class="menu-text"><txp:section title="1" /></span></a>
</li>
</txp:section_list>And then use css to define background images for each section:
.menu-icon { … general css for menu icon backgrounds ... }
.icon-home { background-image: url('/assets/imgs/icon-home.png'); }
/* hide menu-text on small viewport widths */
@media only screen and (max-width: 600px) {
.menu-text { position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1 px; width: 1px; margin: -1px; padding: 0; border: 0; } /* visually hidden but readable by screenreaders */
}(or include your image in your css as an SVG).
If you don’t want to hard-code in css and would prefer a way to store an image ID alongside a section, I have a tentative (currently unpublished) section custom_field plugin that adds additional user-definable fields to the section edit panel.
TXP Builders – finely-crafted code, design and txp
Offline
Re: txp:section_list and icons
Jakob, ja genau, i thought of having a house icon in place of the home link.
However your latter solution is quite enticing. Thanx much for the good example!
At last your plugin sounds very good, as it allows for some sections to use an image and for others to use text i suppose? But everyone should benefit from this, when you find the time. No urgency here. If it’s really necessary i can handcode a navigation as needed. Thank you again.
A hole turned upside down is a dome, when there’s also gravity.
Offline
Re: txp:section_list and icons
jayrope wrote #313158:
Jakob, ja genau, i thought of having a house icon in place of the home link.
Would this be of help?
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Offline