Snippet · Mecha CMS

Code snippet collection for developers.

Images Field

Author: Taufik Nurrohman · 1176 Views

Tweet

Extract images URL from page content.

Extract images URL from page content and put them in $page->images as array:

Hook::set('page.images', function($images, $lot) {
    $s = Page::open($lot['path'])->get('content');
    if (!$s || stripos($s, '<img ') === false) {
        return (array) $images;
    }
    if (preg_match_all('#<img(?:\s[^<>]*?)?\s+src=(["\'])(.+?)\1#i', $s, $m)) {
        return $m[2];
    }
    return (array) $images;
});

Extract the first image URL from page content and put them in $page->image as string:

Hook::set('page.image', function($image, $lot) {
    $s = Page::open($lot['path'])->get('content');
    if (!$s || stripos($s, '<img ') === false) {
        return $image;
    }
    if (preg_match('#<img(?:\s[^<>]*?)?\s+src=(["\'])(.+?)\1#i', $s, $m)) {
        return $m[2];
    }
    return $image;
});

Info: The plugin version of this snippet is now available as image plugin.

10 Comments

  • Alexander Liebrecht

    Hi Taufik,

    How does this hook work properly? I have now tried to insert a certain image URL in the Markdown Editor. But I understand correctly, that from this picture URL then in the frontend, the right picture is displayed?

    I hooked up the hook in the shield, in the index.php.

    How can I manage this?

    Thanks in advance.

    • Taufik Nurrohman

      Then you can show the first image URL in pages.php as the post thumbnail, something like this:

      <?php foreach ($pages as $page): ?>
      <article>
        <?php if ($page->image): ?>
        <?php echo HTML::img($page->image); ?>
        <?php else: ?>
        <?php echo HTML::img('no-image.png'); ?>
        <?php endif; ?>
      </article>
      <?php endforeach; ?>

      Note: https://github.com/mecha-cms/genome/issues/11#issuecomment-292769215

  • Alexander Liebrecht

    Something I do wrong. Under the URL https://mechacms.wpzweinull.ch/article/ich-teste-mal-die-images-url-die-innerhalb-eines-artikels-in-bilder-umgewandelt-werden-soll is an IMG image in the Article and nothing is displayed on the article page.

    The code with me in pages.php looks like this …

  • Alexander Liebrecht

    Oh so, PHP code is removed in the comments, I just see. OK, that would be something for a GitHub issue.

  • Alexander Liebrecht

    Your comment is incorrect broken. Sorry, I wanted to insert PHP code snippets before. Then it does not go at all.

  • Taufik Nurrohman

    Fixed now. Yeah, sorry for the inconvenience. It is for security. Allowing users to insert raw PHP code and even a simple HTML tags can lead into XSS attacks or PHP self script execution. Who knows, my robot can be so crazy and accidentally translated the code snippet as a function that can be interpreted. I must have been in a state of bad luck.

    It is fine for the HTML content type because normally a person needs to change <x> into &lt;x&gt; in order to make it appears as literal HTML syntax, but Markdown is different. In Markdown, we don’t need to encode the HTML string because the parser will automatically encode it if it is detected as code span/block. The comment security system is currently can’t do something like that so that any HTML tags you try to send will be stripped out (except the HTML tags that are listed in the HTML_WISE constant, plus an <img> tag).

  • Alexander Liebrecht

    Hi,
    OK, thank you for fixing. Yes, OK, I will not insert any more codes in the comments. The problem is solved now and I have the solution on GitHub posted.

    The last line PHP code had only to be added and already the pictures were displayed in pages.php in the frontend. So I like it very much.

  • Taufik Nurrohman

    Test comment here again.

  • Alexander Liebrecht

    Your comment is incorrect broken. Sorry, I wanted to insert PHP code snippets before. Then it does not go at all.

  • Taufik Nurrohman

    Test comment here.

    Sigh, just another update here.