Twitter Facebook Instagram Mastadon Github

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 Offline

Official support hours:
Monday To Friday
From 09:00 To 17:00 Europe/London (BST)

Please post your question in the Forum and we will get back to you as soon as we can.

Ask Question
Categories
Tags
Subscribe  
  RSS Feed
Subscribe to this site with an RSS Feed Reader
New
 Task

popup with text in a box

JCE Editor
  JCE Editor
Willem Steen
  Willem Steen
  Tuesday, 12 September 2023
  4 Replies
  303 Visits
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
Oldest First  
Ryan
Ryan
2 weeks ago
·
#114652
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
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Willem Steen
Willem Steen
2 weeks ago
·
#114662
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
Ryan
2 weeks ago
·
#114663
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
Just because you're not paranoid doesn't mean everybody isn't out to get you.
Ryan
Ryan
2 weeks ago
·
#114672
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="/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="/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="/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="/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="/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="/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="/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="/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>
Just because you're not paranoid doesn't mean everybody isn't out to get you.
  • Page :
  • 1
There are no replies made for this post yet.
Be one of the first to reply to this post!