Forums » Creating a custom layout for Exhibit Builder

RSS feed for this topic

Info

  • Posted in Plugins
  • Started 1 year ago by rduckworth
  • 8 posts by 2 users
  • Latest reply from Jeremy Boggs

  1. rduckworth Posted 1 year ago

    Hi,

    I'm trying to build a custom layout for Exhibit Builder and I could use some help. This is my first experience with Omeka, and I'm not really trained in PHP/CSS, but I'm the best we've got at the moment. (Thank goodness for the W3C resources.)

    What I'd like to have is basically a three-row structure. The first row would be the exhibit page navigation. On the second row, there would be a central image flanked by single thumbnails (to be used for "previous" and "next" images in the exhibit sequence). The third row would be a block of text spanning the width of the three images.

    So far, I've managed to get the exhibit page nav and text block formatted the way I want, but the images aren't cooperating. When I tried to wrangle them using a table structure, they were all on the same row, but it messed up the sizing, and the "next" thumbnail ended up in the middle of the secondary navigation column.

    Is there a good way to do this that I just haven't found/understood yet, or am I envisioning the impossible?

  2. Jeremy Boggs (Moderator) Posted 1 year ago

    This doesn't sound impossible at all. But can you share the code you've developed somehow? Or a link to a page that is having the issue you describe? It would be much easier to help debug this issue if we could see a page.

    Offhand, I'd say it would be much easier to just use CSS to float the images in a certain direction (maybe your larger image float:left; and your other images float:right;, instead of relying on tables. Specific CSS will depend on what markup you've used for your layout.

  3. rduckworth Posted 1 year ago

    Sure. The page I'm using to test my fiddling is: http://exhibits.congregationallibrary.org/exhibits/show/1843churches/churches/1stcongregational

    I stripped out the table formatting after I saw that it was clashing with the existing CSS. I've probably mangled the code more than necessary, since it's been a process of trial and error thus far.

    I did try just using floats, but I couldn't get all three images on one line that way. The problem seems to arise from the fact that I want the thumbnails in two different locations (i.e. thumbnail - main image - thumbnail) rather than grouping them together on one side or the other.

    The Firebug extension in Firefox has been helpful in determining where the problems are, but I can't seem to figure out how exactly to fix them. I'd really appreciate any advice you could give.

  4. rduckworth Posted 1 year ago

    Yikes, maybe I did come up with something more difficult than it seems.

    Looking at the existing layouts, it seems that they're all based on a four-column structure, but only have one or two types of content across that width. So maybe the three sections I'd like isn't an option?

    Or maybe I'm just defining the elements wrong. As I mentioned at the top, I don't quite know what I'm doing when it comes to PHP yet.

  5. Jeremy Boggs (Moderator) Posted 1 year ago

    PHP isn't actually the problem; The CSS and HTML are. I think what you're trying to has been referred to as the "holy grail" of CSS layouts. You might be able to accomplish this using something like the following for your HTML:

    <div id="small-image-left"></div>
<div id="small-image-right"></div>
<div id="big-image-center"></div>

    And the CSS should be:

    #small-image-left {float:left; width: 24%;}
#small-image-right {float:right; width: 24%;}
#big-image-center {width: 50%;}

    You can, of course, rename the IDs to your liking; I just use those values for descriptive purposes. The order would be important, though, with the way CSS handles floated elements.

    There are a few tutorials on creating a three-column layout with a big center column. I haven't tried any of them myself, but hope they're helpful:

  6. rduckworth Posted 1 year ago

    Wow. Okay. That looks like exactly what I've been searching for, I just didn't know what it was called to find it by.

    The second link looks particularly helpful, since it gives step-by-step explanations of how and why it works.

    I'll let you know how it goes.

  7. rduckworth Posted 1 year ago

    Success! Thank you so much for all your help. I'll be sure to give you a shout-out when we officially launch the new site.

  8. Jeremy Boggs (Moderator) Posted 1 year ago

    Glad you got it working!

Topic Closed

This topic has been closed to new replies.