Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2018-07-25 15:21:08

jayrope
Plugin Author
From: Berlin
Registered: 2006-07-06
Posts: 635
Website

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, though only when there’s gravity.

Offline

#2 2018-07-25 15:52:26

jakob
Moderator
From: Germany
Registered: 2005-01-20
Posts: 3,159
Website

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

#3 2018-07-27 17:32:02

jayrope
Plugin Author
From: Berlin
Registered: 2006-07-06
Posts: 635
Website

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, though only when there’s gravity.

Offline

#4 2018-07-28 06:41:09

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 6,910
Website

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.org | hblack.net | LABS | State Machines | NeMe @ github

Offline

#5 2018-07-28 16:45:39

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 1,315
Website

Re: txp:section_list and icons

that is what i used here (but in colour)


…. texted postive

Offline

Board footer

Powered by FluxBB