Text over image in JCE

[williama]

Hi guys, is there a way to easily add large white text over an image added in JCE.
Rather than a description, more of a title at the very center of the image.

Thank you.

[cms-4all]

Hi,

that´s easy:

Adding large white text over an image in Joomla using the JCE Editor can be achieved in a few straightforward steps. Here’s how you can do it:

1. **Upload and Insert the Image**:
- Open the JCE Editor where you want to add the image.
- Click on the “Image” icon to open the image manager.
- Upload your image if it isn't already uploaded, then select the image and click on the “Insert” button.

2. **Add a Text Layer Over the Image**:
JCE does not natively support adding text directly on images. You will need to use a workaround by creating a layer over the image or using custom HTML/CSS:

**Option A: Using a Module or Custom HTML**
- You can use a Joomla module that supports text overlays such as a slideshow or custom HTML module. These modules allow you to place text over images and position it accordingly.
- Install and use a module where you can insert both text and images, and position the text over the image.

**Option B: Using Custom HTML and CSS**
- Go back to your article or custom module and switch to HTML view in JCE.
- Add the following HTML and CSS snippet around your image code:

----------------------
<div style="position: relative; text-align: center; color: white;">
<img src="your-image-url.jpg" alt="Descriptive Text for Image" style="width: 100%;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: white;">
Your Title Here
</div>
</div>
----------------------

- Replace `"your-image-url.jpg"` with the URL of your image.
- Adjust `"Your Title Here"` with your desired text.
- Modify the `font-size` and other styles to suit your preferences.

3. **Preview and Adjust**:
- Save your changes and preview the article or module to ensure the text appears as desired over the image.
- Adjust the CSS styles if needed to better center the text or change its appearance.

Best,
Jan

[williama]

That's great, thank you so much. I think option B is the best bet for what I need.

**Option B: Using Custom HTML and CSS**
- Go back to your article or custom module and switch to HTML view in JCE.
- Add the following HTML and CSS snippet around your image code:

----------------------
<div style="position: relative; text-align: center; color: white;">
<img src="your-image-url.jpg" alt="Descriptive Text for Image" style="width: 100%;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: white;">
Your Title Here
</div>
</div>
----------------------

- Replace `"your-image-url.jpg"` with the URL of your image.
- Adjust `"Your Title Here"` with your desired text.
- Modify the `font-size` and other styles to suit your preferences.

However, is there any way to have so that the text resizes with the image. The image scales to the size of the window, but the text does not at the moment, and stays the same. Thank you.

[cms-4all]

To ensure that the text resizes dynamically with the image as the window size changes, you will need to use responsive CSS. This involves setting the font size using viewport units, which scale based on the size of the viewport (the visible area of the web page).

Here's how you can adjust the CSS in your HTML snippet to make the text resize with the image:

Adjusted HTML and CSS

-------------------------
<div style="position: relative; text-align: center;">
<img src="your-image-url.jpg" alt="Descriptive Text for Image" style="width: 100%;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 3vw;">
Your Title Here
</div>
</div>
------------------------

Explanation

- Font Size (`font-size: 3vw`): The font size is set using viewport width units (`vw`). `1vw` is equal to 1% of the width of the viewport. This setting will make the font size adjust based on the width of the screen. For example, `3vw` will make the font size 3% of the viewport width. You can adjust this value to get the desired text size at different screen sizes.

- Image Scaling (`width: 100%`): The image is set to scale to 100% of the width of its container. As the window resizes, the image will scale accordingly, and so will the text because its size is based on the viewport width.

- Test on Various Devices: Preview your page on different devices and screen sizes to ensure the text scales properly with the image. Adjust the `vw` unit as necessary to optimize readability across devices.
- Min and Max Font Size**: Sometimes using `vw` alone can make the text too small on very narrow screens or too large on very wide screens. To handle this, you can use CSS clamps or media queries to set minimum and maximum font sizes:

font-size: clamp(12px, 3vw, 24px);

This example sets the minimum font size to 12 pixels, the preferred size to 3% of the viewport width, and the maximum size to 24 pixels.

Best,
Jan

[williama]

Hi Jan, many thanks for the reply and the detailed explanation. I really appreciate it.
I can see how that works, thank you.

The only trouble is that these images get displayed in a category blog-styled view, the images get resized and placed at different points, so this would not work for this. Is there a way to do the same thing, but resize dynamically based on the picture size, rather than the window size?

Thank you.

To ensure that the text resizes dynamically with the image as the window size changes, you will need to use responsive CSS. This involves setting the font size using viewport units, which scale based on the size of the viewport (the visible area of the web page).

Here's how you can adjust the CSS in your HTML snippet to make the text resize with the image:

Adjusted HTML and CSS

-------------------------
<div style="position: relative; text-align: center;">
<img src="your-image-url.jpg" alt="Descriptive Text for Image" style="width: 100%;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 3vw;">
Your Title Here
</div>
</div>
------------------------

Explanation

- Font Size (`font-size: 3vw`): The font size is set using viewport width units (`vw`). `1vw` is equal to 1% of the width of the viewport. This setting will make the font size adjust based on the width of the screen. For example, `3vw` will make the font size 3% of the viewport width. You can adjust this value to get the desired text size at different screen sizes.

- Image Scaling (`width: 100%`): The image is set to scale to 100% of the width of its container. As the window resizes, the image will scale accordingly, and so will the text because its size is based on the viewport width.

- Test on Various Devices: Preview your page on different devices and screen sizes to ensure the text scales properly with the image. Adjust the `vw` unit as necessary to optimize readability across devices.
- Min and Max Font Size**: Sometimes using `vw` alone can make the text too small on very narrow screens or too large on very wide screens. To handle this, you can use CSS clamps or media queries to set minimum and maximum font sizes:

font-size: clamp(12px, 3vw, 24px);

This example sets the minimum font size to 12 pixels, the preferred size to 3% of the viewport width, and the maximum size to 24 pixels.

Best,
Jan

[Pavel-ww]

The only trouble is that these images get displayed in a category blog-styled view, the images get resized and placed at different points, so this would not work for this. Is there a way to do the same thing, but resize dynamically based on the picture size, rather than the window size?

Hi @williama.

Yes, there is such a way. Using @container instead of @media and/or min(), max(), clamp() functions for font size.

https://developer.mozilla.org/en-US/doc ... er_queries
https://youtu.be/U9VF-4euyRo?si=08NTedsVRIizuuKO
https://youtu.be/3_-Je5XpbqY?si=3lFol6h69NjWgoQX

To ensure that the text resizes dynamically with the image as the window size changes, you will need to use responsive CSS. This involves setting the font size using viewport units, which scale based on the size of the viewport (the visible area of the web page)....

Looks like an answer from AI, and by the way, rather outdated approaches . Using AI also requires knowledge to choose relevant answers

Example of using AI

1.jpg

[williama]

Hi Pavel, sorry for the late reply, and thanks for the help. I see what you mean AI-wise.
To be honest, this is getting a little beyond my expertise now. I did try what you suggested, but I couldn't figure it out. Instead, I decided to just add the text to the image in photoshop. Not the most elegant way to do things, but it does work.

The only trouble is that these images get displayed in a category blog-styled view, the images get resized and placed at different points, so this would not work for this. Is there a way to do the same thing, but resize dynamically based on the picture size, rather than the window size?

Hi @williama.

Yes, there is such a way. Using @container instead of @media and/or min(), max(), clamp() functions for font size.

https://developer.mozilla.org/en-US/doc ... er_queries
https://youtu.be/U9VF-4euyRo?si=08NTedsVRIizuuKO
https://youtu.be/3_-Je5XpbqY?si=3lFol6h69NjWgoQX

To ensure that the text resizes dynamically with the image as the window size changes, you will need to use responsive CSS. This involves setting the font size using viewport units, which scale based on the size of the viewport (the visible area of the web page)....

Looks like an answer from AI, and by the way, rather outdated approaches . Using AI also requires knowledge to choose relevant answers

Example of using AI
1.jpg

[gws]

I decided to just add the text to the image in photoshop.

Personally I think this is the best solution.