X3Photo Gallery Forums

utopia · 30 Jul 2024, 12:45

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

30 Jul 2024, 23:31

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].

utopia · 31 Jul 2024, 04:11

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

31 Jul 2024, 05:26

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 ...

utopia · 31 Jul 2024, 06:29

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

metallissimus · 31 Jul 2024, 07:32

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/

utopia · 31 Jul 2024, 07:45

Thanks a lot, grouping the images worked!

Markus

31 Jul 2024, 21:53

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>.

<a href="ocean-1.jpg" data-popup rel="mypopup">ocean 1</a>
<a href="ocean-2.jpg" data-popup rel="mypopup">ocean 2</a>
<a href="ocean-3.jpg" data-popup rel="mypopup">ocean 3</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:

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

Hope this helps.

utopia · 02 Aug 2024, 06:50

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

02 Aug 2024, 23:19

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

Messier 27

Yes :clap:

X3Photo Gallery Forums

Text with images in between10 posts

Text with images in between

Re: Text with images in between

Re: Text with images in between

Re: Text with images in between

Re: Text with images in between

Re: Text with images in between

Re: Text with images in between

Re: Text with images in between

Re: Text with images in between

Re: Text with images in between