Photography Website

Hi. I am designing a new website which I will use for displaying and selling landscape and nature photos. For the Welcome page, I have set up a slide show of several key photos - no problems with a great choice of widgets. However, for the Gallery pages I am struggling with three issues:

1) I cannot see how to have (eg a Smart Grid with 10 photos) and give people the option of clicking on a photo and seeing it enlarged + with a title + with a sentence or two of text about the photo. They could then click it shut and click on another photo in the grid and see the relevant info for a different photo.
2) Some professional photographer sites have the option where when they click on a photo in a grid to see a larger version, they are prevented from doing a "Save As" + has brief statement about copyright etc.
3) Not as urgent as I may do this a bit later - but would it be possible to click on a photo and see as per (1) above plus an option for a buyer to select size they want, see price and add to cart?

Any help most appreciated.
Thanks.

Welcome to TalkGraphics

One way of accomplishing your first question is to use layers. You create a different layer for each photo and each layer contains the photo plus your text. You can link to the photos from a small thumbnail image. You can link your thumbnail to the popup layer using Web Animation > Reveal so the image is revealed when the visitor mouses over the thumbnail. You can see an example of this here http://www.placitasartists.com/r_nolda/ Also note this makes it very hard to copy the image. Which addresses your second question. There are also scripts you can add to your site that disable the visitors ability to right click on an image or to copy anything. I have not used one of these in years but at the time I did there were many ways for a visitor to foil this protection.

Others will have their own solution/suggestions.

Watermark the photos before you put them up on the web. Won't prevent a copy or save as but won't look that good either.

Thank you to both gwpriester and bkjohns. With the former, I will try what you suggest though I'm still on a major learning curve with layers etc. With the latter, I am still weighing up the pros and cons of watermarking - seems professional photographers are very divided over this.
A website (which also has a number of award winning photos) that illustrates what I'm looking for with my own gallery pages is:

https://www.iptravelphotography.com....=#.W1fjbtIzabg

I love the way you can see small thumbnail images and then by clicking on one that looks interesting you see a large version of the image along with information about the image and opportunity to purchase. Is this possible with Xara Web Designer - eg using layers as suggested above.

I looked at the website given by gwpriester - http://www.placitasartists.com/r_nolda/ - however, I do not want to do a mouse over but click on a thumbnail in a photo gallery and it comes up as per https://www.iptravelphotography.com....=#.W1fjbtIzabg. Still struggling as how to do that - even after looking at a number of videos etc.

Quote:

---

Originally Posted by bmcdon

I looked at the website given by gwpriester - http://www.placitasartists.com/r_nolda/ - however, I do not want to do a mouse over but click on a thumbnail in a photo gallery and it comes up as per https://www.iptravelphotography.com....=#.W1fjbtIzabg. Still struggling as how to do that - even after looking at a number of videos etc.

---

Patience Grasshopper. I would ignore the Smart Photo Grids for the moment and see what is possible out of the box.

To get started, you can create your own grid made of square boxes or rectangles. To save time I want you to import Square Photo Grid 34, which we are going to deconstruct immediately.

Select the grid and then ungroup it (Arrange > Ungroup). Accept the moan as we do not need a Smart Shape.
Still all selected, ungroup again. In the Page and Layer gallery, click into the page thumb and expand out the MouseOff layer. You should see 25 photos selects and the Status Line saying the same.

Open Utilities > Web Properties > Images > Photo pop-up group and tick the Pop-up photo checkbox and click the Apply button. You now have a basic photo gallery. Preview it.

In the Photo pop-up group, you can also change the Pop-up width and click the Options button to pick all the pop-up options, probably other than auto-starting the slideshow.

You can now select a single photo and add text to the Pop-up Title and the Image Caption.

Things to Note
Only use Soft-Group on the collection if you need to move them all around as a grid.
To add new images copy and paste a row or column, keeping Snap to Objects on and removing and re-adding the soft group.
Click on each one and note the ordering in the Page & Layer gallery and keep that sequence of top-left is bottom of the head and bottom-right is top of the head with next right or new row rising up one level. Xara cannot count, by the way and got it all wrong, professionally.
Just drop you photos onto a current thumb to replace it.

Do come back with things you still cannot do like adding hyperlinks or pop-up or changes styling.

Had we started with Smart Photo Grid 2, there would have been more complexity in breaking past Xara's design constraints.
I have done this and Posted it somewhere so if I or another TGer find if, adding it to this Thread might help others.

Acorn

Thanks Acorn - I've imported Square Photo Grid 34 so can work on it tomorrow as getting late here. Disappointed not straight forward with the Smart Photo Grids as they have some good features.

Quote:

---

Originally Posted by bmcdon

Thanks Acorn - I've imported Square Photo Grid 34 so can work on it tomorrow as getting late here. Disappointed not straight forward with the Smart Photo Grids as they have some good features.

---

Yes, they do but the designer forgot that people use grids to showcase then want a detailed view.

Found it! https://www.talkgraphics.com/showthr...art-photo-grid is actually fairly simple in hindsight now you understand the basics from Rob-Xara and my Posts.

Ordering was (is?) still a problem though: https://www.talkgraphics.com/showthr...o-grid-problem.

Good luck,
Acorn

Thanks Acorn - can now add title / caption to individual photos in Smart Grid Photo 1- much appreciated! I didn't realise I needed to use the ctrl key to click on an individual photo in the grid - so great to have that sorted and working.

I am now ready to move to the next step of clicking on the photo and being able to link it as per https://www.iptravelphotography.com....e#.W1j91tIzabg - or at least where I can add in several sentences of text about the photo clicked on and enlarged. Can someone explain how to do this as I'm still very much a learner?

A bonus would be to also have an option for purchase on the same page - but if I can just get the bit above sorted that would be really great at this stage.

OK, have spent another half day trying to obtain the above but no success. I'm now wondering if this is possible with Xara Web Designer and should I purchase a different package or am I just missing something obvious? I've designed two of my own business sites using Xara and have had no problems - just now with clicking on a photo in a photo grid gallery to open up an enlargement of the photo with photo details and possible purchase options.

Quote:

---

Originally Posted by bmcdon

OK, have spent another half day trying to obtain the above but no success. I'm now wondering if this is possible with Xara Web Designer and should I purchase a different package or am I just missing something obvious? I've designed two of my own business sites using Xara and have had no problems - just now with clicking on a photo in a photo grid gallery to open up an enlargement of the photo with photo details and possible purchase options.

---

No you are not missing the obvious. Xara packaged the HiSlide JS viewer (http://highslide.com/) but constrained it in lots of quirky ways.

You have three routes:

1. Learn/use simple HTML to add a long formatted text string into the Pop-up Title & Image Caption boxes.It is possible to add a couple of lines, links and a button.
2. Play around with HiSlide API and parameters.
3. Rethink and use Layers instead.

Attachment 121689 is really a bad mash-up of ideas I've explored this morning.

Don't buy anything else for the moment; you have a lot of exploring to get through yet.

Acorn

Again - thanks heaps Acorn - that is exactly what I needed and I've decided to try your Option 1 route using the Hislide Gallery.xar as a starting point. I have modified HTML coding in the past using Google to help.

I've copied your example into my Xara template. The only problem I have is that I am not getting the "Fuller details" to appear in web view - despite making sure I am using the same page names and code in the Pop-up Title & Image Caption boxes. The code I have is:

<h1>Default Heading 1 style</h1><button>Buy me!</button>

<div><a href="short.htm">Fuller details</a></div>

The page name the 'pictures' are on is 4.gallery and the Fuller details is 5.short. Any thoughts as I know there is something simple that I have not got right? Once I get this sorted, I think I can make good progress (hopefully).

Actually, I should add, that the first time I did it, it worked but the second time, with no change to the code, it didn't?? Yet when I use your file from above, repeatedly works.

Again, thanks so much for your help and the time to do the Hislide Gallery mock up.

Okay - had another play - "Fuller details" is there but not visible which means when I click where it should be, it takes me to the linked page. Really happy with this! Just not sure why the words don't appear at the bottom against the white

Back again - now on a roll and making good progress. By adding in HTML for font colour can now see the words to click on in order to link to more detail. For some reason, no matter what colour I specify always ends up as yellow/orange.
Code for Image caption - <font size="5" color="black">Click to see photo details</font><div><a href="short.htm">
I've probably got this wrong?

Again, thanks to Acorn for your help thus far which has enabled me to start making good progress - you are a great asset to the Forum!

Quote:

---

Originally Posted by bmcdon

Back again - now on a roll and making good progress. By adding in HTML for font colour can now see the words to click on in order to link to more detail. For some reason, no matter what colour I specify always ends up as yellow/orange.
Code for Image caption - <font size="5" color="black">Click to see photo details</font><div><a href="short.htm">
I've probably got this wrong?

Again, thanks to Acorn for your help thus far which has enabled me to start making good progress - you are a great asset to the Forum!

---

Try with <a href="short.htm" style="color: black; font-size: 14px;">Click to see photo details</a>

If you are doing a lot of styling, I would add a separate CSS file to the website header and use: <a href="short.htm" class="ShowDetails">Click to see photo details</a>

CSS:

Code:

---

<style>
.ShowDetails {
  color: black;
  font-size: 14px;
  }
</style>

---

Acorn

Great, that works perfectly. Thanks again Acorn!