Indexhibit Support

Hello, im currently putting together my sight and altering the workings of everything. I am trying to figure out how to get my text to line up on the side of the images like in the "horizontal" format (brian-mark.com/work/how-many-/) , but have my images scroll up and down as in the "over and over" format (brian-mark.com/work/world-currency/) . Is this possible with this system? and what would be the best way of going about it? Any help would be greatly appreciated. Thank You.

brian-mark.com

-Brian

Let's do this right as it may work for other users as well.
The text area content needs to be wrapped around a div. Then css is needed to move things around

1. Go to Admin/Assets/Plugins, format.over_and_over.php
Find lines 185-187. You should see the following:

1.         $OBJ->page->exhibit['exhibit'] = ($OBJ->vars->exhibit['placement'] == 1) ? 
2.             $s . $OBJ->vars->exhibit['content'] : 
3.             $OBJ->vars->exhibit['content'] . $s;

Change it to

1.         $OBJ->page->exhibit['exhibit'] = ($OBJ->vars->exhibit['placement'] == 1) ? 
2.             $s . "<div id='over_and_over_content'>" . $OBJ->vars->exhibit['content']  . "</div>" : 
3.              "<div id='over_and_over_content'>" . $OBJ->vars->exhibit['content']   . "</div>" . $s;

2. Now you can use css to move things around.
For example, in the same format at the end you'll see:

1.     function defaultCSS()
2.     {
3.         return "#img-container .spacer { height: " . $this->spacer_height . "px; }
4. #img-container .captioning { margin-top: " . $this->caption_top . "px; }";
5.     }
6. }

make it into:

1.     function defaultCSS()
2.     {
3.         return "#img-container .spacer { height: " . $this->spacer_height . "px; }
4. #img-container .captioning { margin-top: " . $this->caption_top . "px;  }
5. #img-container {  float: left; }
6. #over_and_over_content { float: left; width: 200px; }
7. #exhibit #over_and_over_content p { width: 200px; }";
8.     }
9. }

Notice that I gave #img-container and #over_and_over_content a float: left; and that #over_and_over_content has also a set width. Also I adjusted the paragraphs (p tags) inside the #exhibit #over_and_over_content to have the same width as the #exhibit #over_and_over_content div. Of course the width can be adjusted to whatever you like.

Also I do need to mention that if the #over_and_over_content div and the #img-container are wider than the width of your browser then the #img-container (your media) are going below your #over_and_over_content.
To avoid this you may need to add another css rule - for example:
assuming that the width of #over_and_over_content and the width of #img-container adds up to a maximum of 1024px you need to add:

1. #exhibit .container {
2.     width: 1024px;
3. }

this makes the parent div to have a set width and you're always going to have the desired layout. But in smaller screens you may need to scroll (you can't have it all...lol)

Hey, arsondpi. Thanks for the response/help. I inputted & altered the code as you had stated above but the only effect it has is it narrows the text box. I am trying to get the top of the first image of my exhibit to line right up with the title of the project like this project brian-mark.com/work/collected-matter/ . With the addition of the code it still sits below the information like brian-mark.com/work/postcards/ . Also I am not exactly sure where to place the div tag in relation to the code so it wraps the text. Thanks for your help.

-Brian Mark

That's because .container is set to 400px.
If you read my last post above you may need to adjust the width of #exhibit .container depending on the width of your images.
In this case you need to add

1. #exhibit .container { width: 1100px; }

to the function defaultCSS() part I posted on my first post.

Figured it out. I was placing the "#exhibit .container { width: 1100px; }" in the wrong place. Thank you very much for the help.