Dynamically generated Navigation Diagram using Custom Fields

Question

I am attempting to dynamically generate a Navigation Diagram (as seen at http://zinderlaw.indigo-grove.com) that uses custom fields on the page to fill in the href tags of the imagemap.

I am not certain I should be here or in StackOverflow, however this is for a WordPress theme, so I thought this would be most appropriate. Please let me know if I am in error.

Recently, I acquired a last-minute client whose deceptively simple HTML design revealed a diabolical twist that is causing havoc on my WordPress theme. Three graphical navigations whose imagemap link content changes on nearly every single page.

Temporarily, I jury-rigged them using the Enhanced Text Widgets and the Widget Logic plugins which allowed me to place the code in sidebar widgets and display them on certain pages. However, even what appeared to be repeating was not actually repeating, so a new solution needs to come around.

I decided to use the custom fields on each page so that future users could easily make changes. My initial trial seemed to work, however I am having trouble implementing it.

I tried several ways to add the graphic and image map. The coordinates for the three graphics vary greatly so I thought arrays would work best. I thought I could make the array with a placeholder variable for the href which would be taken from the page. Initially, it seemed to work until I added the other two sets, and then it started giving errors since graphic1 has 12 fields while graphic2 and graphic3 have 6 each.

I am still mostly new to programming. I feel I am close to the solution here, but I have run out of time. I hope there is someone here who can help.

Here is what I added to functions.php:

// Create function for the custom-fields
function zlthemeAddNavDiag($graphic, $zlthemeGraphicSlots) {
    // create fields for Navigation Diagram / Navigation Graphic
    class zlthemeNavGraphic {
        public $navDiagram;
        public $navLocations;
    }
    $homePageDiag = new zlthemeNavGraphic();
    $homePageDiag->navDiagram = 1;
    $homePageDiag->navLocations = array(
        '<area shape="poly" coords="301,117,191,40,203,24,313,100" href="'.$zlthemeGraphicSlots[0].'" alt="Not-For-Profit" />',
        '<area shape="poly" coords="321,129,338,137,288,292,266,286" href="'.$zlthemeGraphicSlots[1].'" alt="Corporate Compliance" />',
        '<area shape="poly" coords="94,294,263,294,264,312,94,313" href="'.$zlthemeGraphicSlots[2].'" alt="Corporate Counsel" />',
        '<area shape="poly" coords="11,130,27,126,87,294,68,300" href="'.$zlthemeGraphicSlots[3].'" alt="Information Technology" />',
        '<area shape="poly" coords="48,95,139,32,148,48,60,111" href="'.$zlthemeGraphicSlots[4].'" alt="Healthcare" />',
        '<area shape="rect" coords="129,122,226,166" href="'.$zlthemeGraphicSlots[5].'" alt="Our Clients" />',
        '<area shape="poly" coords="190,60,282,124,274,137,185,72" href="'.$zlthemeGraphicSlots[6].'" alt="Crisis Response" />',
        '<area shape="poly" coords="285,145,298,150,261,268,244,260" href="'.$zlthemeGraphicSlots[7].'" alt="Regulatory Affairs" />', 
        '<area shape="poly" coords="109,262,241,262,242,282,108,280" href="'.$zlthemeGraphicSlots[8].'" alt="Governance" />',
        '<area shape="poly" coords="67,154,105,246,88,253,55,160" href="'.$zlthemeGraphicSlots[9].'" alt="Operations" />',
        '<area shape="poly" coords="59,128,170,53,179,69,67,147" href="'.$zlthemeGraphicSlots[10].'" alt="Contracts" />',
        '<area shape="rect" coords="117,181,243,223" href="'.$zlthemeGraphicSlots[11].'" alt="Client Challenges" />'
    );
    $clientChallengesDiag = new zlthemeNavGraphic();
    $clientChallengesDiag->navDiagram = 2;
    $clientChallengesDiag->navLocations = array(
        '<area shape="poly" coords="181,19,300,100,293,118,175,34" href="'.$zlthemeGraphicSlots[0].'" alt="Crisis Response" />',
        '<area shape="poly" coords="297,123,316,130,268,276,250,269" href="'.$zlthemeGraphicSlots[1].'" alt="Regulatory Affairs" />',
        '<area shape="poly" coords="91,274,251,274,254,291,91,292" href="'.$zlthemeGraphicSlots[2].'" alt="Governance" />',
        '<area shape="poly" coords="29,123,85,280,66,287,9,132" href="'.$zlthemeGraphicSlots[3].'" alt="Operations" />',
        '<area shape="poly" coords="20,107,153,19,168,27,28,120" href="'.$zlthemeGraphicSlots[4].'" alt="Contracts" />',
        '<area shape="rect" coords="82,124,254,178" href="'.$zlthemeGraphicSlots[5].'" alt="Client Challenges" />'
    );
    $ourClientsDiag = new zlthemeNavGraphic();
    $ourClientsDiag->navDiagram = 3;
    $ourClientsDiag->navLocations = array(
        '<area shape="poly" coords="191,24,292,100,286,115,178,41" href="'.$zlthemeGraphicSlots[0].'" alt="Not-For-Profit" />',
        '<area shape="poly" coords="295,125,317,135,269,277,250,270"href="'.$zlthemeGraphicSlots[1].'" alt="Corporate Compliance" />',
        '<area shape="poly" coords="78,277,246,276,246,296,78,295"href="'.$zlthemeGraphicSlots[2].'" alt="Corporate Counsel" />',
        '<area shape="poly" coords="31,133,79,271,64,277,11,130"href="'.$zlthemeGraphicSlots[3].'" alt="Information Technology" />',
        '<area shape="poly" coords="19,109,157,16,164,33,26,126"href="'.$zlthemeGraphicSlots[4].'" alt="Healthcare" />',
        '<area shape="rect" coords="98,124,233,187"href="'.$zlthemeGraphicSlots[5].'" alt="Our Clients" />'
    );
    $navGraphicList = array($homePageDiag, $clientChallengesDiag, $ourClientsDiag);
    switch($graphic[0]) {
        case 1:
            return ('<img src="'.get_template_directory_uri().'/img/Zinder-Law-nav-graphic.gif" alt="Our Clients, Their Challenges" width="330" height="299" border="0" usemap="#Gui" />');
            break;
        case 2:
            return ('<img src="'.get_template_directory_uri().'/img/Zinder-Law-nav-graphic_client_challenges.gif" alt="Client Challenges" width="330" height="299" border="0" usemap="#Gui" />');
            break;
        case 3:
            return ('<img src="'.get_template_directory_uri().'/img/Zinder-Law-nav-graphic_our_clients.gif" alt="Our Clients" width="330" height="299" border="0" usemap="#Gui" />');
            break;
        default:
            alert("No setting!");
    };
    foreach($navGraphicList as $list) {
        if($list->navDiagram === $graphic){
            print_r(array_values($list->navLocations));
        };
    };
}

On each test page, I add this code:

$zlthemeGraphicNav = get_post_custom();
echo '<p>The array count is: ' . count($zlthemeGraphicNav) . '</p>';

if(count($zlthemeGraphicNav)>=6) {
    $zlthemeChooseGraphic = $zlthemeGraphicNav['nav-graphic'];
    $zlthemeGraphicSlots = $zlthemeGraphicNav['slot'];

    zlthemeAddNavDiag($zlthemeChooseGraphic, $zlthemeGraphicSlots);
}

There is another issue here, if I don't add the if statement, it shows on all pages, even if I try to use the code indicating it is not the homepage. However, that is minor compared to the rest.

I have made so many minor adjustments to get this far, I feel like I am about to completely break everything.

Here are the problems:

It tries to fill in the variables on all the fields and it doesn't exist for all fields.
It is not showing the returned values of the function to the page. I have tried using return and echo and print_r, but it just sits there pleasantly blank after I remove the extra long homePageGraphic location array.

Should I be hiding the arrays somewhere else? I could get away with the first graphic and array being hardcoded to the homepage or using the original widget, since it is only on one or two pages, however I would like to be able to use this dynamically if possible.

I feel like I am missing something that is quite simple. Please help.

The dev website is located here: http://zinderlaw.indigo-grove.com so you can see what it should be outputting.

Nia Skywalk · Accepted Answer · 2015-06-18 05:16:11Z

Ah, I see a few places where I went wrong.

For one, in the switch statements, when I tried to return answers using echo, I was using parentheses, which work fine in one offs, but apparently cause an error in a function(?). Thanks to the one who edited my first code! I would not have seen that.

So when I changed this:

switch($graphic[0]) {
        case 1:
            return ('<img src="'.get_template_directory_uri().'/img/Zinder-Law-nav-graphic.gif" alt="Our Clients, Their Challenges" width="330" height="299" border="0" usemap="#Gui" />');
            break;
        case 2:
            return ('<img src="'.get_template_directory_uri().'/img/Zinder-Law-nav-graphic_client_challenges.gif" alt="Client Challenges" width="330" height="299" border="0" usemap="#Gui" />');
            break;
        case 3:
            return ('<img src="'.get_template_directory_uri().'/img/Zinder-Law-nav-graphic_our_clients.gif" alt="Our Clients" width="330" height="299" border="0" usemap="#Gui" />');
            break;
        default:
            alert("No setting!");
    };

to this:

switch($graphic[0]) {
    case 1:
        echo '<img src="'.get_template_directory_uri().'/img/Zinder-Law-nav-graphic.gif" alt="Our Clients, Their Challenges" width="330" height="299" border="0" usemap="#Gui" />';
        break;
    case 2:
        echo '<img src="'.get_template_directory_uri().'/img/Zinder-Law-nav-graphic_client_challenges.gif" alt="Client Challenges" width="330" height="299" border="0" usemap="#Gui" />';
        break;
    case 3:
        echo '<img src="'.get_template_directory_uri().'/img/Zinder-Law-nav-graphic_our_clients.gif" alt="Our Clients" width="330" height="299" border="0" usemap="#Gui" />';
        break;                  
    default:
        echo "No setting!";
};

It worked as I was expecting.

Further, I realized I forgot to add the array position to the $graphic string when I tried to use it to compare numbers here, also I was using three equals instead of two:

foreach($navGraphicList as $list) {
    if($list->navDiagram === $graphic){
        print_r(array_values($list->navLocations));
    };
};

So changing it to:

foreach($navGraphicList as $list) {
    if($list->navDiagram == $graphic[0]){
        var_dump($list->navLocations);
    };
};

Allowed me to actually call the correct values.

After I discovered the answer, I was able to quickly finish the code I need:

foreach($navGraphicList as $list) {
    if ($list->navDiagram == $graphic[0]){
        echo '<map name="Gui">';
        foreach($list->navLocations as $map){
            echo $map;
        };
        echo '</map>';
    };
};

Although I found these solutions on my own, I still cannot discover a good answer to my related question of how to add the longer array without adding additional code or values on each page. For now, this array will be two deep instead of three. If anyone can comment with any ideas, I would much appreciate it.

@rpl was the one whose edit helped.

Nia Skywalk
– Nia Skywalk

2015-06-18 05:20:40 +00:00
Commented Jun 18, 2015 at 5:20 — Nia Skywalk
– Nia Skywalk, Commented Jun 18, 2015 at 5:20

Stack Exchange Network

Dynamically generated Navigation Diagram using Custom Fields

1 Answer 1

Your Answer

Hot Network Questions

Dynamically generated Navigation Diagram using Custom Fields

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions