Recent
Categories
View Replies (9)

SKYLAR_J4: Issue With CSS Class 'caption'

  1. Bug
0
Votes
Undo
  1. dautrich
    dautrich
  2. Sherlock Holmes The Voice
  3. Commercial Templates
  4. Saturday, 24 December 2022
  5.  Subscribe via email
Hi Ciaran

In my sites, I extensively use the CSS class 'caption' with template SKYLAR. Here is an example screenshot from the J3 version (s. SKYLAR_J3_Caption_ok.jpg). The image caption is displayed as expected.
In J4, the caption is not displayed (s. SKYLAR_J4_Caption_missing.jpg).

The HTML code of the article is identical for J3 and J4 and is shown in HTML_Code_of_Article.pdf.

The custom CSS is more or less identical for J3 and J4; all entries for all kinds of captions are identical. See my J4 custom.css in custom.css.pdf.


I also would like to bring to your attention that the display of the figure-element is not identical in the J3 and J4 versions of SKYLAR. In J3, the figcaption is inside the border of the figure-element (s. SKYLAR_J3_figcaption.jpg), whereas in J4 it is outside (s. SKYLAR_J4_figcaption.jpg).


Regards

Rolf
Attachments (5)
SKYLAR_J3_Caption_ok.jpg SKYLAR_J3_Caption_ok.jpg
SKYLAR_J4_Caption_missing.jpg SKYLAR_J4_Caption_missing.jpg
J3_J4_caption.zip
SKYLAR_J3_figcaption.jpg SKYLAR_J3_figcaption.jpg
SKYLAR_J4_figcaption.jpg SKYLAR_J4_figcaption.jpg
Responses (9)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Rolf

May I suggest sending temporary administration access to your Joomla installation to info@joomla51.com and we will examine this issue further. For our reference please paste a link to this post in your email.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 1
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Rolf

Thank you for allowing us access to examine this issue.

Unfortunately this appears to be an issue with Joomla 4 as it uses a newer version of the Tiny MCE editor which no longer dynamically grabs the caption from the title attribute. Instead, you must now set the caption separately once enabled via the image edit.

If you wish you can set us up with temporary admin access and I will attempt to add the JS required to re-enable this feature.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 2
dautrich
dautrich
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

What type of admin access do you need (in addition to Superuser access to the J! Backend)? FTP access?

Regards

Rolf
  1. more than a month ago
  2. Commercial Templates
  3. # 3
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Rolf

All we require is superuser access so we can amend your template.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you

To amend we have added the following to the Custom Code -> Head Custom Custom of the Custom Code field of your template style settings...

<script>

document.addEventListener("DOMContentLoaded", function() {

  const imgs = document.querySelectorAll(".maincontent img");

  

  for (const img of imgs) {

    const caption = document.createElement("p");

    caption.classList.add("img_caption");

    caption.innerText = img.getAttribute("title");

    img.after(caption);

  }

});

</script>


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 5
dautrich
dautrich
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

Sorry, but your code does not provide compatibility between the J3 and J4 versions of SKYLAR.

Your code for the J4 version adds a caption to all images, whereas in the J3 version an image-caption is shown if and only if the class caption has been added to the <img> tag. This also leads to double caption in <figure> elements. This can best be seen here: https://staging.nickdautrich.de/lebensjahre/2008

Is it possible to test for the caption class in your Javascript?

Regards

Rolf
  1. more than a month ago
  2. Commercial Templates
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Rolf

Assuming your caption class is on your img element, you can amend the code to the following...

<script>

document.addEventListener("DOMContentLoaded", function() {

  const imgs = document.querySelectorAll(".maincontent img.caption");

  

  for (const img of imgs) {

    const caption = document.createElement("p");

    caption.classList.add("img_caption");

    caption.innerText = img.getAttribute("title");

    img.after(caption);

  }

});

</script>


Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 7
dautrich
dautrich
Sherlock Holmes The Voice
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Ciaran

That looks perfect!

Question: Are you going to incorporate that patch into the next version of SKYLAR_J4? If not, I'm fine with the custom code.

I assume that you don't need access to my sites anymore. Therefore, I will deactivate your Super User account and re-activate the .htaccess on the admin directory.

Thanks and regards

Rolf
  1. more than a month ago
  2. Commercial Templates
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Rolf

Thank you for the update.

As the code may have an effect on the 'Joomla 4' method of adding image captions, it is unlikely that it will be included with the template but good to know that the code now works and can be added as needed.

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 9
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!