You need to be logged in to post in the forum - Log In

An active JCE Pro Subscription is required to post in the forum - Buy a Subscription

Support is currently Online

Official support hours
Monday to Friday
09:00 - 17:00 Europe/London (BST)

#114644 popup with text in a box

Posted in ‘Editor’
This is a public ticket

Everybody will be able to see its contents. Do not include usernames, passwords or any other sensitive information.

Latest post by Ryan on Saturday, 16 September 2023 11:15 BST

Willem Steen
Good morning,
I would like to place a number of separate photos next to each other with the appropriate text underneath, preferably in a box.
I have JCE Pro
It concerns the 5 photos in the first row.

I can create a pop-up but not the text underneath it

https://www.steenfotografie.nl/?view=article&id=48:vervoerder-boxxpress-de&catid=40

Ryan
You can use the Figure format to apply a simple caption to an image, eg:

https://cdn.joomlacontenteditor.net/images/news/296/figure-example.gif

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Willem Steen
Good morning, Ryan

thank you for your quick correct answer!
It helps me a lot.
My next problem is, I want 5 images side by side of 250x167 of course with the text box. with a margin of 2.
And I can't do that now.

Please help me again.

Kind Regeards
Willem Steen

Ryan
My next problem is, I want 5 images side by side of 250x167 of course with the text box. with a margin of 2.


This can be done with Columns. It is a bit of a process, and is best started with each image before it has the Figure caption on it. For example:

  1. With all the images inside 1 paragraph, it is best to put them into individual paragraphs. Select each image, starting iwth the first, then press the Right Arrow key on the keyboard to move the cursor to the right of the image, then press Enter to create a new paragraph. Do this for each image until each is in its own paragraph.
  2. Place the cursor at the beginning and drag down to select all the images.
  3. Click the Columns tool in the toolbar. The number of Columns should be equal to the number of paragraphs / images. Set the Stack Width to Small and Gap Size to Small and click Insert.
  4. Click in each image, then select Figure from the Format list. Give each image a caption.


https://cdn.joomlacontenteditor.net/tmp/114644-popup-with-text-in-a-box.gif

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.

Ryan
Here is the HTML code for the above if you want to use it as a template:

<div class="wf-columns wf-columns-stack-small wf-columns-gap-small wf-columns-layout-auto" data-wf-columns="1">
	<div class="wf-column">
		<figure data-wf-figure="1"><a href="https://www.joomlacontenteditor.net/images/Website_Definitief/Fotoprojecten_Trein/Goederentreinen/BoxXpress.de/Modal_BoxXpress.de/Modal_BoxXpress.de_193_538/Modal_BoxXpress.de_193_538_0001-min.jpg" rel="" class="jcepopup" style="margin: 1px;" title="boxXpress.de Vectron 193 538"><img src="https://www.joomlacontenteditor.net/images/Website_Definitief/Fotoprojecten_Trein/Goederentreinen/BoxXpress.de/Modal_BoxXpress.de/Modal_BoxXpress.de_193_538/Modal_BoxXpress.de_193_538_0001-min.jpg" alt="boxXpress.de Vectron 193 538" width="250" height="167" style="border: 2px solid #ffffff; margin: 0px; padding: 0px; float: none;" data-alt="Modal BoxXpress.de 193 538 0001 min" /></a>
			<figcaption>Train 1</figcaption>
		</figure>
	</div>
	<div class="wf-column">
		<figure data-wf-figure="1"><a href="https://www.joomlacontenteditor.net/images/Website_Definitief/Fotoprojecten_Trein/Goederentreinen/BoxXpress.de/Modal_BoxXpress.de/Modal_BoxXpress.de_193_539/Modal_BoxXpress.de_193_539_0001-min.jpg" rel="" class="jcepopup" style="margin: 1px;" title="BoxXpress.de 193 539"><img src="https://www.joomlacontenteditor.net/images/Website_Definitief/Fotoprojecten_Trein/Goederentreinen/BoxXpress.de/Modal_BoxXpress.de/Modal_BoxXpress.de_193_539/Modal_BoxXpress.de_193_539_0001-min.jpg" alt="BoxXpress.de 193 539" width="250" height="167" style="border: 2px solid #ffffff; margin: 0px; padding: 0px; float: none;" /></a>
			<figcaption>Train 2</figcaption>
		</figure>
	</div>
	<div class="wf-column">
		<figure data-wf-figure="1"><a href="https://www.joomlacontenteditor.net/images/Website_Definitief/Fotoprojecten_Trein/Goederentreinen/BoxXpress.de/Modal_BoxXpress.de/Modal_BoxXpress.de_193_833/Modal_BoxXpress.de_193_833_0001-min.jpg" rel="" class="jcepopup" title="BoxXpress.de 193 833"><img src="https://www.joomlacontenteditor.net/images/Website_Definitief/Fotoprojecten_Trein/Goederentreinen/BoxXpress.de/Modal_BoxXpress.de/Modal_BoxXpress.de_193_833/Modal_BoxXpress.de_193_833_0001-min.jpg" alt="BoxXpress.de 193 833" width="250" height="167" style="border: 2px solid #ffffff; margin: 0px; padding: 0px; float: none;" /></a>
			<figcaption>Train 3</figcaption>
		</figure>
	</div>
	<div class="wf-column">
		<figure data-wf-figure="1"><a href="https://www.joomlacontenteditor.net/images/Website_Definitief/Fotoprojecten_Trein/Goederentreinen/BoxXpress.de/Modal_BoxXpress.de/Modal_BoxXpress.de_193_834/Modal_BoxXpress.de_193_834_0001-min.jpg" rel="" class="jcepopup" title=" BoxXpress.de 193 834"><img src="https://www.joomlacontenteditor.net/images/Website_Definitief/Fotoprojecten_Trein/Goederentreinen/BoxXpress.de/Modal_BoxXpress.de/Modal_BoxXpress.de_193_834/Modal_BoxXpress.de_193_834_0001-min.jpg" alt=" BoxXpress.de 193 834" width="250" height="167" style="border: 2px solid #ffffff; margin: 0px; padding: 0px; float: none;" /></a>
			<figcaption>Train 4</figcaption>
		</figure>
	</div>
</div>

Ryan Demmer

Lead Developer / CEO / CTO

Just because you're not paranoid doesn't mean everybody isn't out to get you.