Photo Gallery Forums

Hi, 

I'm a new user of X3 Photo Gallery with only limited experience in html and css. I'm trying to rebuild my html / css based website with X3 Photo gallery. Most pages have been easy to rebuild and look very nice. 

I've asked the following question in this forum yesterday and my post was removed and my forum account was deleted and I don't understand why, so I'm sorry about asking again: 

I'd like to have a single page which looks as follows: a text paragraph, then an image with a caption, then another text paragraph, then an image with a caption etc. Like this:

text
image with caption
text 
image with caption
...

When clicking on an image, the image viewer is launched and the image with caption is shown at a larger size.  

I've posted a link yesterday which might have been the problem, so here it goes again (just remove it if links are not allowed): 

Close-up Photography with the Nikon Z MC 105mm f/2.8 VR S (photographylife.com)

It's just an example of how I would like to build the page. 

Best wishes, 
Markus

Hi Markus. Sorry, your post was deleted by mistake yesterday.

About achieving this kinda layout, it's really just a page with text, images, text, images added to your "content" section. For example in X3 page, just write your text and then insert images as required, see screenshot:

 

The images are uploaded into the same page, and if you don't want to display them in a separate "gallery", you can just hide from, in which case you are only displaying them when embedded manually into the "content". As for the popup (when clicking an image), it uses X3's popup mechanism as https://demo.photo.gallery/examples/plugins/popup/.

Optionally, you could use X3's gallery instead, listing images vertically like in this example:
https://demo.photo.gallery/galleries/landscapes/

This would work, but is not as flexible, as the layout will basically be [image+description][image+description].

Thanks a lot, Karl. That was very helpful. 

There are two minor drawbacks: 

• The image caption only seems to show up when the image is opened (popup). 
• When the image is opened (popup), I can't click from one image to the next (I can live with that).  

For the first drawback, I could just type the caption as simple text below the inserted image. 

Best wishes,
Markus

It's a bit unclear in your response what option you are referring. As you can see in my previous post, I offered two solutions, one where you just write out the text/images in your content, and one where you use the actual X3 gallery with descriptions. In the first case, you can just write the text of course, and with the second option, you can definitely show the descriptions below each image also before each image is opened.

It's not clear why you can't click from one image to the next in the popup ...

Karl, 

I'm sorry for being unclear. I was referring to the first option (a page with text, one image, text, one image etc. added to the "content" section). 

When I I click on the first image, it opens in the image viewer but can't switch to the next image. Maybe a wrong setting?


My content text looks as follows:

<a href="{{path}}DSCF0004.jpg" data-popup-title="Messier 8 in the constellation Sagittarius." data-popup><img src="{{path}}DSCF0004.jpg" alt="Messier 8 in the constellation Sagittarius." /></a>


Text

<a href="{{path}}m8.jpg" data-popup-title="Search chart for Messier 8." data-popup><img src="{{path}}m8.jpg" alt="Search chart for Messier 8." /></a>

Text

The "gallery" is set to "hide". 

Best wishes, 
Markus

You can group your images, which makes them open in the  same popup. There are two ways described here under the heading Groups: https://demo.photo.gallery/examples/plugins/popup/

Thanks a lot, grouping the images worked! 

Markus

utopia wrote:When I I click on the first image, it opens in the image viewer but can't switch to the next image.

Ahh, ok. So when you are using the popup manually like this, it will by default just open the clicked file and that's that. However, as outlined in the popup examples page, you can "group" popups by assigning rel="mypopup" (or whatever group ID you want to use) in the <a>.

utopia wrote: My content text looks as follows:

<a href="{{path}}DSCF0004.jpg" data-popup-title="Messier 8 in the constellation Sagittarius." data-popup><img src="{{path}}DSCF0004.jpg" alt="Messier 8 in the constellation Sagittarius." /></a>

Ok, so include the "rel" attribute on all popup links:
Hope this helps.

Thanks Karl, 

it worked. A first draft of the website is now online. 

Utopia Photography

The particular page I was talking about (image - text - image) is here and appears to work: 

Messier 27

I also experimented with two columns for better readability. 

Best wishes, 
Markus

utopia wrote:The particular page I was talking about (image - text - image) is here and appears to work: 

Messier 27

Yes  :clap: