565999 - Change events page layout

Status: VERIFIED FIXED

(Websites Graveyard :: drumbeat.org, defect)

Description

[Matt Thompson]

Replace the current "Drumbeat Festival" jpeg image on the events page
http://www.drumbeat.org/events

with short text and three link boxes, as per mock-up:
http://mzl.la/bMF0Fw

Comment 1

[Matt Thompson]

Copy:

Drumbeat Events: Local engagement for global impact

Drumbeat events bring together people with diverse talents and passions to protect and grow the open web. From teachers, artists and designers to bloggers, lawyers, and inspired geeks and tech people, we’re building community from the local level up. Through face-to-face interactions, open collaboration, and fun.

Participate in a local Drumbeat event

Organize a local Drumbeat event

Share your project at a local event

Comment 2

[Matt Thompson]

@ Ned:

These will all link to new pages we need to create:
* Participate in a local Drumbeat event
* Organize a local Drumbeat event
* Share your project at a local event

All details, URLs and copy is here:
https://wiki.mozilla.org/Drumbeat/website/events_copy

Can you create these pages?

Comment 3

[Ned Schwartz]

Hey Matt,

When you say create these pages, do you mean create them in Drupal? Or just static mock ups?

Comment 4

[Matt Thompson]

@ Ned: Yes, I mean create them in Drupal.

Comment 5

[Paul Booker]

@Ned

Matt asked if i could take a look at this bug today. Just wanted to let you know as this bug is assigned to you.

@Matt
 
I have updated my local working copy of drumbeat the site seems to working very slowly. It might be worth getting a more recent update of the database for my local server

@Ned
I'll start investigating how the "event" page is put together. I may need some help in finishing the task as i am not a web designer. 

Best,
Paul Booker
Appcoast

Comment 6

[Paul Booker]

I have discovered so far that what needs to be changed is in a panel on a page. Looking for the template that builds the content inside the panel ..

Comment 7

[Ned Schwartz]

awesome! Thanks so much - I am happy to take over the actual html and css when you have figured out how to put it together.

Comment 8

[Paul Booker]

Hi Ned - 

I haven't managed to figure out where the HTML content for the "Drumbeat events marquee" pane @ admin/build/pages/nojs/operation/page-event_landing_page/handlers/page_event_landing_page_panel_context/content is currenty being drawn from although i suspect this may be a caching problem somewehere. 

However you can go ahead and delete the content for that pane and create some new content.

Let me know if i can be of any further asistance 

Best, 
Paul Booker
Appcoast

Comment 9

[Matt Thompson]

Thanks Paul!

@ Ned: are you ok to run with this now?

Comment 10

[Paul Osman [:paulosman]]

re: Comment 8

The event page has some content rendered by the drumbeat_custom module. To configure the logo that appears on that page, go here:

admin/settings/drumbeat/event-logo

Comment 11

[Paul Booker]

If all we want do is change the image that will work fine. Do you know how panels knows about this image? I couldn't figure it out quickly :-)

If we want to replace the "Drumbeat events
marquee" image with HTML as per ..

https://wiki.mozilla.org/images/3/38/Drumbeat_--_events_page_wireframes_--1.1.jpg 

.. i think we will need to delete the current content in that panel and then add our HTML content to that panel. This approach seems to work fine on my local server.

Comment 12

[Paul Osman [:paulosman]]

If deleting the content in the panel and adding our HTML works, that's fine. As for how the panel knows about the image, I hadn't gotten that far :) I assume the answer lies in the drumbeat_custom module though.

Comment 13

[Paul Booker]

I had a good look through the drumbeat_custom.module as i figured that i may be looking for some kind hook_X_alter function for panels that would throw light on what was happening. However i only found ..

<code>
function drumbeat_custom_panels_pane_content_alter(&$content, $pane, $args, $context) {
  if ($content->module == 'views') {
    if ($content->subtype == 'views-event_updates-block_1') {
      $path = 'event-updates/rss.xml';
      $link = l(theme('image', drupal_get_path('module', 'drumbeat_custom') .'/images/updates-rss-icon.gif'), $path, array('html' => TRUE));
      $content->title .= '<span class="feed-icon">'. $link .'</span>';
    }
  }
}
</code>

I guess ill just have to admit defeat here (for now) since fortunately we can just step over this problem :-)

Best,
Paul Booker
Appcoast

Comment 14

[Ned Schwartz]

@Paul(s)

Thanks so much for looking ito this. It sounds like I won't be needing the image functionality at: admin/settings/drumbeat/event-logo

I will just update the html at: admin/build/pages/nojs/operation/page-event_landing_page/handlers/page_event_landing_page_panel_context/content

I have tested it and it looks like I am a good to go on this tomorrow!

Comment 15

[Paul Booker]

(In reply to comment #14)
> @Paul(s)
> 
> Thanks so much for looking ito this. 

Hi Ned, Your welcome:-)

Comment 16

[Ned Schwartz]

svncm "Bug 565999 - Change events page layout -- css and images for new layout"
Sending        all/themes/drumbeat/css/style.css
Adding  (bin)  all/themes/drumbeat/images/event_action1.png
Adding  (bin)  all/themes/drumbeat/images/event_action2.png
Adding  (bin)  all/themes/drumbeat/images/event_action3.png
Transmitting file data ....
Committed revision 545.

Comment 17

[Ned Schwartz]

at: admin/build/pages/nojs/operation/page-event_landing_page/handlers/page_event_landing_page_panel_context/content

1) remove / hide "Drumbeat Events Marquee
2) In the 'Left Block' choose Add content
3) choose "New custom content"
4) In the body paste the following:

<h1>Drumbeat Events: Local engagement for global impact</h1>
<p>Drumbeat events bring together people with diverse talents and passions to protect and grow the open web. From teachers, artists and designers to bloggers, lawyers, and inspired geeks and tech people, we’re building community from the local level up. Through face-to-face interactions, open collaboration, and fun.</p>
<ul id="event_actions">
<li>
  <h4><a href="events/participate">Participate in a local Drumbeat event</a></h4>
  <a href="events/participate"><img width="180" height="180" title="Participate in a local Drumbeat event" alt="Participate in a local Drumbeat event" src="/dbl/sites/all/themes/drumbeat/images/event_action1.png" /><a href="events/participate">
</li>
<li>
  <h4><a href="events/organzie">Organize a local Drumbeat event</a></h4>
  <a href="events/organzie"><img width="180" height="180" title="Organize a local Drumbeat event" alt="Organize a local Drumbeat event" src="/dbl/sites/all/themes/drumbeat/images/event_action2.png" /></a>
</li>
<li>
  <h4><a href="events/events_for_project_leads">Boost your project at a local event</a></h4>
  <a href="events/events_for_project_leads"><img width="180" height="180" title="Boost your project at a local event" alt="Boost your project at a local event" src="/dbl/sites/all/themes/drumbeat/images/event_action3.png" /></a>
</li>
</ul>

Comment 18

[Ned Schwartz]

5) clickfinish'
6) click 'update and save'

Comment 19

[Ned Schwartz]

create three pages with the following titles and urls:

Participate in a local Drumbeat event
events/participate

Organize a Local Drumbeat Event
events/organize

Drumbeat Events Can Take Your Project to the Next Level
events/events_for_project_leads

Comment 20

[Ned Schwartz]

(In reply to comment #17)

the html for #4 should be:

<h1>Drumbeat Events: Local engagement for global impact</h1>
<p>Drumbeat events bring together people with diverse talents and passions to protect and grow the open web. From teachers, artists and designers to bloggers, lawyers, and inspired geeks and tech people, we’re building community from the local level up. Through face-to-face interactions, open collaboration, and fun.</p>
<ul id="event_actions">
<li>
  <h4><a href="events/participate">Participate in a local Drumbeat event</a></h4>
  <a href="events/participate"><img width="180" height="180" title="Participate in a local Drumbeat event" alt="Participate in a local Drumbeat event" src="/dbl/sites/all/themes/drumbeat/images/event_action1.png" /><a href="events/participate">
</li>
<li>
  <h4><a href="events/organize">Organize a local Drumbeat event</a></h4>
  <a href="events/organize"><img width="180" height="180" title="Organize a local Drumbeat event" alt="Organize a local Drumbeat event" src="/dbl/sites/all/themes/drumbeat/images/event_action2.png" /></a>
</li>
<li>
  <h4><a href="events/events_for_project_leads">Boost your project at a local event</a></h4>
  <a href="events/events_for_project_leads"><img width="180" height="180" title="Boost your project at a local event" alt="Boost your project at a local event" src="/dbl/sites/all/themes/drumbeat/images/event_action3.png" /></a>
</li>
</ul>

Comment 21

[Ned Schwartz]

This is done!