He-e-elp!
I set the gallery style to Critique and brought the photos in OK. Then it all went foul. I tried a blend of the code in one of Allen's tutorials with your suggestion for presenting a series of photos. The photo code went OK I think, but the page is a mess.
http://deborahjackson.smugmug.com/gallery/6930140_xwrGd
Basically, I want a series of paragraphs with a heading and type underneath.
After the paragraph called 'texture' ending with '...abstract, clean and contemporary' I want the first series of three photos, the textural shots of water and withered wood.
After the paragraph called 'stories' ending with '... and continue the story' I want the second series of four photographs showing a story around a beach scene.
I would like to be able to bold and change the colour of the headings and for the text to be presented in paragraphs, with appropriate margins.
Here is the gallery description I have entered:
<html>
<div id="galDescText">
<p>
Have you ever fallen in love with an image, an artwork, a sculpture and just known you had to bring it home to your place? I have. Such a spontaneous and joyful thing, as though the piece awakens, speaks to or fulfills a part of you.
The other way to buy art for your home or workspace is a little more considered. I'd like to share a few ideas. There are so many ways to select and display photographic art images that it's possible to create a very unique expression in your home or workspace.
Your space.
First up, what are you seeking to achieve with your space? How do you want people to feel as they enter the room, relax onto your sofa or take a seat at your table - peaceful, nourished, vital, creative? What do you like about the space currently? What's not working? What would you like to change or enhance? What does the space need?
Dark and heavy space - consider something clean and light to lift the mood or alternatively, go for a dramatic effect with strong colour. Very ordered space - bring in an element of humour or surprise. A little too perfect - try something random or quirky. Is it a space for peace and tranquility - bring in something that will harmonise and connect the other elements in the room. Too much clutter - use scale and simplicity to give the eye a restful place to land.
Colour.
Is there a defined colour pallete in the room that you would like to work with? Alternatively, you may have a space that is monochrome, based around shades and textures from the same base tone. You could continue this theme or choose to add some drama with a hero colour. Maybe you need the colour of the artwork to tie together existing pieces in a room.
There is a lot written about how colour affects mood - blue is thought to be calming and expansive, green refreshing, the right shade of yellow can invoke sunshine, red can awaken physical passion and energy, earthy colours can be grounding. The actual shade of colour and the interplay of different colours all combine to create the effect you're seeking.
Texture.
Balance contemporary surfaces and materials with textures from nature - rough, flowing, light-filled, aged. Similarly, rooms with antique or rustic furniture can be connected into the modern world with imagery that is abstract, clean and contemporary.
</p>
</div>
<div id="galDescImg">
<center>
<table cellspacing=20>
<tr>
<td>
<center>
<img src="/photos/446239631_vsu6a-Th.jpg ">
</center>
</td>
<td>
<center>
<img src="/photos/446239389_aqbAb-Th.jpg ">
</center>
</td>
<td>
<center>
<img src="/photos/446239585_nWFqA-Th.jpg ">
</center>
</td>
</tr>
</table>
</center>
</div>
<div id="galDescText">
<p>
Cropping.
The square crop is popular right now, bringing a fresh look to wall art. When you find an image you like, you may want to experiment with the cropping tool in the shopping cart to capture the proportions that most appeal to you.
Alternatively, a simple image can work well split into three verticals and hung with a small separation between each piece.
Stories.
Some images work really well when displayed as a series and may even tell a story - about cycles of life or parts of a whole. Seeing one object in relation to another can bring out its natural beauty. Alternatively, you may want to pick up on a theme already in your room - a colour, a sea shell, a texture - and continue the story.
</p>
</div>
<div id="galDescImg">
<center>
<table cellspacing=20>
<tr>
<td>
<center>
<img src="/photos/446239777_aPxiR-Th.jpg ">
</center>
</td>
<td>
<center>
<img src="/photos/446239950_h28wN-Th.jpg ">
</center>
</td>
<td>
<center>
<img src="/photos/446239902_wYGbW-Th.jpg ">
</center>
</td>
<td>
<center>
<img src="/photos/446239805_7hUFz-Th.jpg ">
</center>
</td>
</tr>
</table>
</center>
</div>
<div id="galDescText">
<p>
The finish.
SmugMug, the organisation that will print and deliver your order on my behalf, offer a range of interesting photo finishes - lustre, gloss, matt, metallic, rolled or mounted canvas.
Of course, matting and framing is an important final step in displaying your photographic art to best advantage. You may also like to consider a new technique like that used by Fotoflot where the photographic print is fused with acrylic - the image and display become one.
Enjoy the exploration. If you'd like help brainstorming a solution, send me an email with a photograph of the space you are working with and a few notes about what you are seeking to achieve. I'd love to share a few ideas and help create a space where you and your people feel just great.
</p>
</div>
<p>
Contact me here <a href=mailto:name@domain.net>
<span class=”myEmail”>Email</span></a>
</p>
</div>
</html>
Here is the CSS code I have entered:
.gallery_6930140 #galDescImg {
position: relative;
height: 300px;
width: 195px;
margin-top: 20px;
margin-left: 60px;
}
.gallery_6930140 #galDescText {
position: relative;
font-size: 1em;
font-weight: bold;
color: #ccc;
text-align: justify;
width: 750px;
margin-top: -350px;
margin-left: 350px;
}
.myEmail {color: #fff;}
.myEmail :hover {color: red;}
/* set the height to push the footer down */
.gallery_6930140 #albumDescription {
background: #444;
height: 350px;
}
/* remove stuff for clean page look */
/* some of these may not be needed */
.gallery_6930140 .nophotos h3 {display: none;}
.gallery_6930140 #searchBox {display:none;}
.gallery_6930140 #breadcrumb {display: none;}
.gallery_6930140 .journal_entry {display:none;}
.loggedIn .gallery_6930140 .journal_entry {display:block;}
.gallery_6930140 .pageNav {display: none;}
.gallery_6930140 #albumNav_top {display: none;}
.gallery_6930140 #albumNav_bottom {display: none;}
.gallery_6930140 .play_slideshow {display: none;}
Can you suggest what I need to change to get some formatting happening? I tried a few things myself, with disasterous consequences.
Thanks,
Deborah
First, go into the customization screen for that gallery. Set the gallery style to Critique. That will remove the choice of styles (by the viewer) and will lock the gallery into Critique style. The reason I suggest Critique is that it isn't too constrained from a width standpoint, but it does leave some blank space along the sides.
Next, you'll need to pull the links for those photos. For each photo you want to show, go into the gallery where the photo lives, click Share, then Get a Link. Copy one of the links for the photo. The links on that page are for the standard photo sizes. I usually change those to use custom sizes - http://www.smugmug.com/help/custom-photo-sizes.
Once you have the links, you will be able to construct the <img src statements that you need.
For example, here's the code I pulled from the share page:http://denise.smugmug.com/photos/444483236_rFq6f-M.jpg
When I use that, I remove the beginning piece of the url. It's not needed if the photo is in your smugmug gallery, and if you remove it the url that the viewer used to enter your site will be used, either your user.smugmug.com name, or your custom domain. So with the change, the entry I use for the img src statements (examples below) look like this:/photos/444483236_rFq6f-M.jpg (http://photos/444483236_rFq6f-M.jpg)
If you'd like the group of photos centered on a "line", I'd suggest using an HTML table. Here's an example of a table with three images on one line. Keep in mind that you'll want to select sizes that work for your page (as opposed to the 300x300 that works for me...).
your text.... words, words, words
more words
<center>
<table cellspacing=20>
<tr>
<td>
<center>
<img src="/photos/444498849_kGUg3-300x300.jpg">
</center>
</td>
<td>
<center>
<img src="/photos/444483236_rFq6f-300x300.jpg">
</center>
</td>
<td>
<center>
<img src="/photos/444498849_kGUg3-300x300.jpg">
</center>
</td>
</tr>
</table>
</center>
...more text...
Hopefully this will give you a reasonable starting point.
Let me know if you have more questions.
--- Denise