ElectricFeet, I copy and pasted your code into my projects page & it is not working, can you please tell me what to do. I tried messing around with rdellconsultings pseudo code and am failing all around, please advise.
JUST ONE MORE HINT PLEASE 🙂
Karen
Karen, having looked at your current page, I’d assume that what you have done is the following:
When you Edit Page, there are 2 tabs: Visual and Text.
The code that @ef gave you needs to be inserted using the Text tab, and I think you may have used the Visual tab.
So cut the text, change to Text tab and paste back that HTML code.
Hello, I did as suggested and switched to text and repasted ElectricFeets code, and the line up is off. I added 6 pictures and it is responding really weird…..take a look http://mbmfabricators.com/u-of-m-frieze-building/projects/
Hi again, now I used rdellconsulting code and it is a little closer, I put in 6 pics and the went in as one single, next line one single, next line is 3 pics like I wanted and then the next line is a single again. I am going to go back right now and try and look at the code and see if I can figure out the line that has the 3 across and delete the rest and see if it works. I think this is what rdell consulting was wanting me to try in the very beginning of this thread…….teach a man to fish 🙂
I am going to go and try! Karen
Hi,
ok, this is where I think the secret lies,
<div class=”span4″><img alt=”” />xxxxxxx</div>
if the span is 12 than that would equal 1 pic, but is it says span4 anf 3 pics are showing up on that line, than that must be the span of 12 divided by 4 to fit in 3 pics.
If my guess is correct and I changed the span to
<div class=”span3″><img alt=”” />xxxxxxx</div>
Then I would be able to fit 4 pictures on each line.
I am going to go experiment a little.
Karen
You’re getting it Karen 😉
Hi,
What are the set of seven x’s in 3 rows at the bottom of my projects page?
Thanks, Karen
Extra / spare copies of what you posted in your previous post on this thread is my guess.
Hi guys, I added 6 pictures, and the first 3 are in a row of 3 are in the 3 columns like I want, but the next 3 are singular. I think that maybe I need to add a repeat code to this to make all pics I add fall into three columns over and over. Is this a correct guess?
Thanks, Karen
Code should look more like this:
<div class="row-fluid">
<h2 class="wp-caption-text">Lake Plug</h2>
<div class="span4">
<a class="grouped_elements" rel="tc-fancybox-group22" href="http://mbmfabricators.com/wp-content/uploads/2014/01/DCP00106.jpg" title="DCP00106">
<img class="alignnone size-thumbnail wp-image-528" height="150" width="150" alt="DCP00106" src="http://mbmfabricators.com/wp-content/uploads/2014/01/DCP00106-150x150.jpg">
</a>
</div>
<div class="span4">
<a class="grouped_elements" rel="tc-fancybox-group22" href="http://mbmfabricators.com/wp-content/uploads/2014/01/DCP00105.jpg" title="DCP00105">
<img class="alignnone size-thumbnail wp-image-527" height="150" width="150" alt="DCP00105" src="http://mbmfabricators.com/wp-content/uploads/2014/01/DCP00105-150x150.jpg">
</a>
</div>
<div class="span4">
<a class="grouped_elements" rel="tc-fancybox-group22" href="http://mbmfabricators.com/wp-content/uploads/2014/01/DCP00101.jpg" title="DCP00101">
<img class="alignnone size-thumbnail wp-image-526" height="150" width="150" alt="DCP00101" src="http://mbmfabricators.com/wp-content/uploads/2014/01/DCP00101-150x150.jpg">
</a>
</div>
</div>
<div class="row-fluid">
<h2 class="wp-caption-text">Compuware Building</h2>
<div class="span4">
<div id="attachment_524" class="wp-caption alignnone" style="width: 160px">
<a class="grouped_elements" rel="tc-fancybox-group22" href="http://mbmfabricators.com/wp-content/uploads/2013/11/DCP00100.jpg" title="Lake Plug">
<img class="size-thumbnail wp-image-524" height="150" width="150" alt="Lake Plug" src="http://mbmfabricators.com/wp-content/uploads/2013/11/DCP00100-150x150.jpg">
</a>
</div>
</div>
<div class="span4">
<a class="grouped_elements" rel="tc-fancybox-group22" href="http://mbmfabricators.com/wp-content/uploads/2013/11/comp41.jpg" title="comp4">
<img class="alignnone size-thumbnail wp-image-520" height="150" width="150" alt="comp4" src="http://mbmfabricators.com/wp-content/uploads/2013/11/comp41-150x150.jpg">
</a>
</div>
<div class="span4">
<div id="attachment_535" class="wp-caption alignnone" style="width: 160px">
<a class="grouped_elements" rel="tc-fancybox-group22" href="http://mbmfabricators.com/wp-content/uploads/2013/11/compuware-office1.jpg" title="Compuware Building">
<img class="size-thumbnail wp-image-535" height="150" width="150" alt="Compuware Building" src="http://mbmfabricators.com/wp-content/uploads/2013/11/compuware-office1-150x150.jpg">
</a>
</div>
</div>
</div>
You’ll have to make adjustments to get what you want, but this will hopefully show you the right direction.
There’s also this great article from nikeo that explains it. (For some reason I hadn’t spotted it before now.)
Thanks Electric feet, I will go check it out. I have been working on it all day and seem to not get past 2 columns. You would think that if I could figure out two the third would be simple (just repeat code) but NO!!! these is where I’m at.
<div class=”row-fluid”>
<div class=”span4″>
[caption id="attachment_535" align="alignnone" width="150"]<img class=”size-thumbnail wp-image-535 ” style=”border: 4px solid black;” alt=”Compuware Building” src=”http://mbmfabricators.com/wp-content/uploads/2013/11/compuware-office1-150×150.jpg” width=”150″ height=”150″ /> <span style=”font-family: georgia, palatino; font-size: 14px; color: #000000;”>Compuware Building</span>[/caption]
</div>
<div class=”row-fluid”>
<div class=”span4″>
[caption id="attachment_524" align="alignnone" width="150"]<img class=”size-thumbnail wp-image-524 ” style=”border: 4px solid black;” alt=”Lake Plug” src=”http://mbmfabricators.com/wp-content/uploads/2013/11/DCP00100-150×150.jpg” width=”150″ height=”150″ /> <span style=”font-family: georgia, palatino; font-size: 14px; color: #000000;”>Lake Plug</span>[/caption]
</div>
</div>
</div>
<div class=”row-fluid”>
<div class=”span4″>
[caption id="attachment_473" align="alignnone" width="150"]<img class=”size-thumbnail wp-image-473″ alt=”Detroit Institute of Arts” src=”http://mbmfabricators.com/wp-content/uploads/2013/11/front2-150×150.jpg” width=”150″ height=”150″ /> <span style=”font-family: georgia, palatino; font-size: 14px; color: #000000;”>Detroit Institute of Arts</span>[/caption]
</div>
</div>
Hello,
I went to the article above that ElectricFeet suggested and copy/pasted the 1/4-1/4-1/4-1/4 code into my editor. I added 4 pics and it did one one first line and 3 on the second. If there are 3 pics across thats great or even if there are 4 across thats fine too ( 1/4 I am assuming that is 4 pics across in the 12 grid) but I cannot figure out how to make it so that every pic I add goes nicely into an even number of columns I.E. 3 across 3 across 3 across
4 across 4 across 4 across 4 across
