Jump to content

Archived

This topic is now archived and is closed to further replies.

Houston Haynes

Agency Section (isotope) - href *other* than item image

Recommended Posts

Houston Haynes

Hey folks - this is my first foray in Platform 5. Right now my focus is on the "Agency" plugin, where I want to do a few things with the Portfolio section. The default behavior is for each item to self-refer and link to the 'image' element in 'plag_portfolio_array'

'default'   => array(
                array(
                  'image'   => $this->base_url . '/images/project-1.jpg',
                  'title'   => 'Project 1', 
                  'text'    => 'Get the Album.',
                )

That same link is inserted *somewhere* as the href that pops up the full-size version of the image via the respective element's onclick. (see attached screenshot)

I'm looking to do the following:

  1. add a field to the Portfolio Item UI in the editor to hold a new href URL (ostensibly, a link to a page or post on my site), and
  2. find the correct syntax to pass that value back as a value in the "Portfolio Items" array such that isotope *knows* it as an href. 

I'm missing two pieces (at least so far):

  1. whether there is a default array element description that will serve this purpose (basically an override), or 
  2. if there's some form of declaration that needs to be made in order for the element to be mapped/recognized/passed on to isotope

It *seems* like there's some default behavior "behind the scenes" that I'm not aware of, and I'm hoping that to override this behavior will be relatively straightforward. I have spent some time looking at the docs/demos for isotop, aside from spelunking through the Agency plugin code. Although there are some examples of hard-coding URLs to items in the list, I still haven't quite connected the dots yet. Any help/advice on this would be greatly appreciated. Thanks!

 

Screen Shot 2016-08-04 at 12.39.27 PM.png

Share this post


Link to post
Share on other sites
Houston Haynes

I think I found the *beginnings* of my own answer...

Lines 568, 569 of pl-section-agency.php shows that the image URL is used for the "img" and "href" entries...

                          <a href="#" class="project-link" data-bind="plhref: image">
                            <img class="project-image" src="" data-bind="plimg: image">

 

Share this post


Link to post
Share on other sites
Simon

Thats a strange one, there isnt a url option either is there? Not sure why there is an anchor there at all.

Share this post


Link to post
Share on other sites
Houston Haynes

What's really strange is that I *can't* seem to find the UI elements for adding the Portfolio Item field (for HREF, presumably).

I changed the above-mentioned lines to

                          <a href="#" class="project-link" data-bind="plhref: href">
                            <img class="project-image" src="" data-bind="plimg: image">

and added the "href" element to the array (lines 123-132)

          array(
              'key'       => 'plag_portfolio_array',
              'type'      => 'accordion', 
              'title'     => __('Portfolio Items', 'pl-section-agency'),      
              'opts'      => array(
                pl_std_opt('image'),
                pl_std_opt('title'),
                pl_std_opt('text'),  
                pl_std_opt('href'),         /* This is new */   
              ),


But when I look for the element definitions to capture the info from the editor UI (as with other sub-sections) I can't seem to lay my eyes on it. Is it because it's an "accordion" function nested somewhere else? I've looked everywhere and have come up empty.
 

Share this post


Link to post
Share on other sites
Houston Haynes

Yeah it seems that Portfolio and Services use the same form, or at least forms that have the same field listing (all other sub-sections with accordion forms have their own explicit field definitions defined in nested arrays). I suppose I could define my own multi-array for Portfolio and see if it breaks. :)

Share this post


Link to post
Share on other sites
Houston Haynes

OK - the short answer is a qualified 'yes'. :cool:

I didn't have to create an entirely new multi-array, but rather just create a sub-array for the fourth "href" field.

          array(
              'key'       => 'plag_portfolio_array',
              'type'      => 'accordion', 
              'title'     => __('Portfolio Items', 'pl-section-agency'),      
              'opts'      => array(
                pl_std_opt('image'),
                pl_std_opt('title'),
                pl_std_opt('text'),
                array(                                                /* This is new */
                    'key'       => 'href',
                    'type'      => 'text',
                    'label'     => __('Link URL', 'pl-section-agency'),
                ),            
              ),

At some point I'll add a checkbox to use the image URL as the href (with that checked by default), and then clear the check once there's something int the text field. But for now I'll move on to fleshing out my site. The actual pages are just place-holders right now, but that will be changing over the weekend. 

 

Screen Shot 2016-08-04 at 6.00.40 PM.png

Screen Shot 2016-08-04 at 6.03.59 PM.png

Share this post


Link to post
Share on other sites
Simon

Easy huh.

The option arrays look complicated but in reality are pretty simple :)

Share this post


Link to post
Share on other sites
Houston Haynes

Yes - but *less* easy is figuring out how to parse the <div> markup to get category data in the isotope-item elements. That's more telling of my inexperience with Knockout than anything else. :) I'll open a separate thread on that if I can't get past the roadblock. Cheers!

Share this post


Link to post
Share on other sites

×