How to wrap images in a HTML figure element? #374
Answered
by
markseuffert
kodersha
asked this question in
Ask a question
-
|
Hi. |
Beta Was this translation helpful? Give feedback.
Answered by
markseuffert
Sep 14, 2022
Replies: 6 comments
-
|
I edited my image.php, but I still can't get rid of p tag around figure.
$output = "<figure ";
if (empty($style)) $output .= "class=\"picture\"";
if (!empty($style)) $output .= "class=\"".htmlspecialchars($style)."\"";
$output .= ">";
$output .= "<img src=\"".htmlspecialchars($src)."\"";
if ($width && $height) $output .= " width=\"".htmlspecialchars($width)."\" height=\"".htmlspecialchars($height)."\"";
if (!empty($alt)) $output .= " alt=\"".htmlspecialchars($alt)."\"";
$output .= " />";
if (!empty($alt)) $output .= "<figcaption>".htmlspecialchars($alt)."</figcaption>";
$output .= "</figure>"; |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Do you have a plugin and a Markdown example to reproduce the problem? |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Markdown: My modified Yellow image.php plugin (Renamed to picture.php): Markdown still wraps image to p tag. Result: |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
I changed the shortcut in Markdown example: Generated output: <h1>Test page</h1>
<p>Some text here</p>
<p><img src="/media/images/photo.jpg" width="1000" height="400" alt="This is an example image" title="This is an example image" /></p>
<p><figure class="picture"><img src="/media/images/photo.jpg" data-action="zoom" alt="This is an example image" /><figcaption>This is an example image</figcaption></figure></p>Which output do you want to generate? |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Figure tag must not be inside p tag. |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Here's a example extension file <?php
// Picture extension, experimental
class YellowPicture {
const VERSION = "0.8.20";
public $yellow; // access to API
// Handle initialisation
public function onLoad($yellow) {
$this->yellow = $yellow;
}
// Handle page content of shortcut
public function onParseContentShortcut($page, $name, $text, $type) {
$output = null;
if ($name=="picture" && ($type=="inline" || $type=="block")) {
if ($this->yellow->extension->isExisting("image")) {
list($name, $caption, $style, $width, $height) = $this->yellow->toolbox->getTextArguments($text);
if (!preg_match("/^\w+:/", $name)) {
if (empty($caption)) $caption = $this->yellow->language->getText("imageDefaultAlt");
if (empty($width)) $width = "100%";
if (empty($height)) $height = $width;
$path = $this->yellow->lookup->findMediaDirectory("coreImageLocation");
list($src, $width, $height) = $this->yellow->extension->get("image")->getImageInformation($path.$name, $width, $height);
} else {
if (empty($caption)) $caption = $this->yellow->language->getText("imageDefaultAlt");
$src = $this->yellow->lookup->normaliseUrl("", "", "", $name);
$width = $height = 0;
}
$output = "<figure>";
$output .= "<img src=\"".htmlspecialchars($src)."\"";
if ($width && $height) $output .= " width=\"".htmlspecialchars($width)."\" height=\"".htmlspecialchars($height)."\"";
if (!empty($style)) $output .= " class=\"".htmlspecialchars($style)."\"";
$output .= " aria-hidden=\"true\" />";
$output .= "<figcaption>".htmlspecialchars($caption)."</figcaption>";
$output .= "</figure>";
} else {
$page->error(500, "Picture requires 'image' extension!");
}
}
return $output;
}
}Markdown example: ---
Title: Test page
---
Some text here
[image photo.jpg "This is an example image"]
[picture photo.jpg "This is an example image"]Generated output: <h1>Test page</h1>
<p>Some text here</p>
<p><img src="/media/images/photo.jpg" width="1000" height="400" alt="This is an example image" title="This is an example image" /></p>
<figure><img src="/media/images/photo.jpg" width="1000" height="400" aria-hidden="true" /><figcaption>This is an example image</figcaption></figure>Tested with Datenstrom Yellow 0.8.20. Hope it helps. 😄 |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
annaesvensson
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here's a example extension file
system/extensions/picture.php. It generates a HTML figure element both as block-level element and as inline element. You can adapt the code to your needs, make it your own. The API and the new shortcut handler give you control over the generated output. See also #392.