Contributors Section

General web design discussion, including HTML, CSS, and JavaScript

Contributors Section

Postby gsw28 » Tue Dec 18, 2012 2:05 pm

I have this contributors section of my site here: that I made in dreamweaver. I hope by seeing this you will understand what I am trying to achieve.

And I have tried to recreate the same thing with magicedit, but I cannot get this work right.

I dont know what I'm doing wrong. I think my me=names or magicedit repeat areas are messed up. I dont know, please help.
Posts: 8
Joined: Fri Dec 07, 2012 4:40 pm

Re: Contributors Section

Postby raw10 » Tue Dec 18, 2012 3:20 pm

Okay, what you probably want to do is nest MagicRepeats to accomplish this. And each contributor needs to have a page that can be edited with their image, bio, and a section for all of their contributions. We'll leave that page for a second and just focus on how to do the contributors.html page.

One problem is that you have three columns, so you'll need three top-level repeats (since without HTML5 you can't split content over columns). Here's what one column would look like:

Code: Select all
<magicrepeat me_name="contributors1">
  <p class="font_body_copy"><span class="font_title1"><magicedit me_name="title" me_plain>Title</magicedit></span><br>
    <magicrepeat me_name="list" me_repeat="yes">
      <span class="font_body_copy_lineheight"><span class="font_date"><img src="assets/web_graphics/bullet.jpg" width="8" height="12"></span>
      <a href="contributor.html"><magicedit me_name="contributor" me_plain>Name</magicedit></a></span>

The ONLY thing you need to change for the other columns is the top level me_name. Use "contributors2" and "contributors3", for example, for the other two columns.

Now, you also need a "contributor.html" page. On that page you will also have this code in the title:

Code: Select all
<magicedit me_name="contributor" me_plain>Name</magicedit>

That way the two pages will be synched when editing the name from either place. You will also need a place for the head shot and bio for the contributor, but that should be easy. The more challenging thing is a list of contributions. So on the contribution page you could use another MagicRepeat for each contribution that looks like this:

Code: Select all
<magicrepeat me_name="relatedArticles" me_repeat="yes">
    <td align="left" valign="top"><span class="font_date"><img src="assets/web_graphics/bullet.jpg" width="8" height="12"></span></td>
    <td align="left" valign="top" class="font_date"><magicedit me_name="date" me_plain>20XX Month</magicedit></td>
    <td align="left" valign="top"><a magicedit me_name="link" href="#">Article Title</a></td>
  <tr cl_visible="=CLManager.activeAccount:isAdmin">
    <td colspan="3">&nbsp;</td>

That second row is there to hold the edit buttons. There is no way to automatically associate each article with its author because of the loose way MagicEdit is architected, but this will allow you to easily add articles to each contributor's page without having to change the static HTML.

Note that you need to use me_repeat="yes" on any MagicRepeats that are nested inside another.
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Return to Web Design

Who is online

Users browsing this forum: No registered users and 1 guest