Indexhibit

Login:

Created by:
Daniel Eatock &
Jeffery Vaska

Built with Indexhibit

Mix of over and over format and horizontal format?

 

Indexhibit version: 2.0
Thread is resolved.

brianm
UNITED STATES
1 year(s) ago
Permalink Post

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

Best Answer!
arsondpi
GREECE
1 year(s) ago
Permalink Post

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.

Best Answer!
arsondpi
GREECE
1 year(s) ago
Permalink Post

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)

brianm
UNITED STATES
1 year(s) ago
Permalink Post

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

arsondpi
GREECE
1 year(s) ago
Permalink Post

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.

brianm
UNITED STATES
1 year(s) ago
Permalink Post

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

 

This thread has been closed, thank you.