Make multiple galerrias look like a portfolio grid layout.

resolved (18 posts) (3 voices)

DESIGNwithAP
Member

Not sure if this is possible, or maybe I have missed something. I am using the Awake theme version 2.3

I am doing a site for a home builder. In the portfolio section I would like it to look like a 2 or 3 column grid portfolio with each thumb being a different home. Then when you click on the thumb of a particular home it opens a lightbox that is filled with 9 or 10 pics of that same home. Currently when clicked the lightbox scrolls through the different homes (pics) that are laid out in the grid.

I have tried doing multiple gallerias which allows me to organize the pics and open them in lightboxes as I would like. but how do I get the gallerias to sit side by side in columns? Also how do I remove the thumbs beneath each one? (if this is the best way to do it)

I feel like their should be an easier way of doing this with the portfolio grid option. Please advise.

Thanks

Posted 9 months ago #

Elliott
Support

Hello DESIGNwithAP,

For this it would be better if you used the fancy_images shortcode, http://mysitemyway.com/docs/index.php?title=Fancy_Images.

It would look something like this,

[fancy_images]
[image]http://www.yoursite.com/images/1.jpg[/image]
[/fancy_images]

<a href = 'path to your image' rel = 'prettyPhoto[fancy_img_group_992]' style = 'display: none;'></a>
<a href = 'path to your image' rel = 'prettyPhoto[fancy_img_group_992]' style = 'display: none;'></a>

[fancy_images]
[image]http://www.yoursite.com/images/2.jpg[/image]
[/fancy_images]

<a href = 'path to your image' rel = 'prettyPhoto[fancy_img_group_113]' style = 'display: none;'></a>
<a href = 'path to your image' rel = 'prettyPhoto[fancy_img_group_113]' style = 'display: none;'></a>

The links that you see above are the extra images that will open up into prettyPhoto when you click on each home. You'll need to right click and view source each fancy_image to figure out the unique identifier used, "prettyPhoto[fancy_img_group_113]", for example.

Posted 9 months ago #

DESIGNwithAP
Member

Thanks. This is exactly what I am looking for. However when I click on each home image there are no images in the light box. And the unique identifier (group #) changes with every refresh. My site is on my testing server so I can't give you a link. But the code of my first gallery is below. the same format as you have above but with my own info.

[fancy_images width="250" height="250"]
[image title="1210 Washington Street"]http://localhost/MarkDSmith/wordpress/wp-content/uploads/2011/08/Washington_01.jpg[/image]
[/fancy_images]

Posted 9 months ago #
Elliott
Support

Open up /wp-content/themes/awake/lib/shortcodes/18-images.php and delete line 91,

$group = 'fancy_img_group_'.rand(1,1000);

And then on line 78 you should see this,

'height' => '',

On the next line add this,

'group' => '',

You should be able to set the identifier like this now,

[fancy_images group = "album1"]

Posted 9 months ago #
DESIGNwithAP
Member
Still the same result. Don't know if this will help but I have attached a screen shot of the portfolio page and corresponding source code form firebug. The highlighted code is the image on the left. just above that in red is where you can see it the [fancy_img_group_509] that # is what changes every time it loads.

Also I am not sure why the next album is pushed down like that either. I was going to try and tackle that next once I have the galleries working correctly.
Attachments
Screen-shot.jpg (120.8 KB, 9 downloads) 9 months old
Posted 9 months ago #
DESIGNwithAP
Member

This is the code from 18-images.php with line 91 deleted.

extract(shortcode_atts(array(
'width' => '',
'height' => '',
'group' => '',
'class' => 'true'
), $atts));

This is the html for that first album on the portfolio page:

[fancy_images group = "album1" width="250" height="250"]
[image title="1210 Washington Street"]http://localhost/MarkDSmith/wordpress/wp-content/uploads/2011/08/Washington_01.jpg[/image]
[/fancy_images]

Is this what you were thinking?

Posted 9 months ago #
Elliott
Support

Sorry, make sure to delete line 123 also,

$group = 'fancy_img_group_'.rand(1,1000);

If possible then send us a link to your site.

Posted 9 months ago #
DESIGNwithAP
Member

Sorry I am on a local testing server so I can't give you a link at the moment. But I did get it to work by replacing

rel = 'prettyPhoto[fancy_img_group_113]'

where the extra images are located with

rel = 'prettyPhoto[album#]'

Thanks for your help.

Any thoughts about why the second album is pushed down like that? Albums 3 and 4 line up just fine. If not I will send you a link to check out when the site goes live.

Posted 9 months ago #
Elliott
Support

Sounds like it could be a paragraph or a line break.

Try putting your shortcodes inside these,

[raw] [/raw]

Posted 9 months ago #
DESIGNwithAP
Member

It is definitely paragraph breaks. After filling out the eight galleries on the portfolio page it snuck in a handful of them. I see the <p> in the source code via fire bug. Where would I find them to delete them in the theme? Surrounding the shortcode with [raw] [/raw] doesn't do anything and ends up displayed in the browser. I have tried surrounding each gallery individually and all of them. Any other thoughts?

Thanks.

Posted 9 months ago #
Elliott
Support

I think using the [raw] [/raw] tags should have worked. If possible then send us a link to your site and paste the code you used here.

Posted 9 months ago #
DESIGNwithAP
Member

I placed [raw] [/raw] around the additional picture links for each gallery and it worked out perfectly. Thanks

One last question. I would like to place a title above each gallery. (in h3 preferably) I saw in another post how to add titles/descriptions to the individual photos within the light box. But how can I add a title above each gallery without screwing with the layout. Either by allowing the title that is already in each short code to display or by entering it in the html. I have attache my html so far as well as a screenshot of the page for you to get an idea of what it looks like now.

Thanks again for your help Elliott.`

Posted 9 months ago #
DESIGNwithAP
Member
Heres is the files I said I was going to include.
Attachments
porfolioPage_screenShot.jpg (45 KB, 5 downloads) 9 months old
portfolio_code.txt (11 KB, 1 downloads) 9 months old
Posted 9 months ago #
Elliott
Support
Hello DESIGNwithAP,

Are you wanting to get a title to display above each fancy_image? If so then you'll need to limit each fancy_image to 1, something like this,
```
<h3>your title</h3>
[fancy_image]path to your image[/fancy_image]

<h3>your title</h3>
[fancy_image]path to your image[/fancy_image]
```
Posted 9 months ago #
DESIGNwithAP
Member
That is what I tried before and the title displays just fine. But the title for the fancy image in the second column gets knocked down a line. (see attached) Is there a way to stop this from happening? Maybe adding something to the h3 CSS. I don't use h3 anywhere else in the site. I would also like to scoot it over a bit to line up with the left side of the pic. Just adding   didn't work. unless I placed in the wrong spot.
Attachments
porfolioPage_screenShot_2.jpg (48.1 KB, 3 downloads) 9 months old
Posted 9 months ago #
Elliott
Support

You'll want to use our column shortcodes, http://mysitemyway.com/docs/index.php?title=Column_Shortcodes

Posted 9 months ago #
DESIGNwithAP
Member

Works and looks exactly like what I was going for. Could not of done it without your help Elliot. Thanks a ton.

Posted 9 months ago #
PointM
Member

After careful consideration, decided to put each group or category of photos in its own page. Main reason was that these galleries would be referenced by a link on a page or post and I think it makes more sense just to show those photos instead of a page full of thumbnails containing photos that belong to another post or category. By having all images on the page, it gives users a better view and they can pick any to start and the rest will be shown in a lightbox like effect, easier and better.

Thank you again Elliot for your time.

M

Posted 3 months ago #