Jump to content
ridgedale

PW3 - Wierd Displaying of Images inside Figure Element in Admin

Recommended Posts

Reference: PW 3.0.62 and uikit3 based site using the Regular-Master profile.

I wonder if anyone has come across the problem of displaying images within the <figure> element before.

When editing a page:

If an image is added inside <p></p> tags without any align assigned, it displays normally at the size the user has specified. See screen grab example 1.

If an image is placed inside the <figure> element and left or right alignment applied, the size the image is displayed as in the editing view is significantly reduced. See screen grab example 2.

If an image is placed inside the <figure> element and center alignment applied, the size the image completely disappears in the editing view with only the caption text showing. See screen grab example 3.

The code used to display an image in <p></p> tags without aligment assigned is standard:

<p><img alt="" src="/<path-to-image>/image.jpg" width="128" /></p>

Examples of the code automatically being generated by PW3/UiKit3 from within the image editing interface are:

<figure class="align_left"><img alt="" src="/<path-to-image>/image.jpg>" width="128" />
<figcaption>Caption text</figcaption>
</figure>

<figure class="align_right"><img alt="" src="/<path-to-image>/image.jpg>" width="128" />
<figcaption>Caption text</figcaption>
</figure>

<figure class="align_center"><img alt="" src="/<path-to-image>/image.jpg>" width="128" />
<figcaption>Caption text</figcaption>
</figure>

Important Note: The images and and captions actually do display correctly when the website is browsed, but from the editing perspective it is not practical.

Any thoughts or advice would be appreciated.

Example1.png

Example2.png

Example3.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By VeiJari
      Hello forum,
      This is really a weird one, because front end editing works in a earlier website we did to a customer. 
      When I check the source code for current website it does initiate front end edit: 
      <span id=pw-edit-1 class='pw-edit pw-edit-InputfieldPageTitle' data-name=title data-page=1021 data-lang='1017' style='position:relative'><span class=pw-edit-orig>Tekijät</span><span class=pw-edit-copy id=pw-editor-title-1021 style='display:none;-webkit-user-select:text;user- select:text;' contenteditable>Tekijät</span></span>  But when I double click nothing happens (yes I'm 100% sure I'm superuser and logged in)
      I also tried to apply the front end with other methods than:
      $page->edit('title'); But didn't work either.
      We are using jquery 2.2.4, so it should not be a problem.
      Is this a bug related to current master or something else?
      Someone else having this problem as well?
    • By Martin Wuehr
      Hello everybody,
      I'm hosting a Processwire Installation for a client. It runs on Processwire 2.5.3. Over the years everything was fine but now there is an issue with one Image-Field in one Template. Trying to upload an Image the Error "Not enough Memory to load/resize" occure. Other Image-Fields in all other Templates working without any issue. The Images I Tried to upload are very small (600px * 420px). The Images blongs to a News feed, and worked before.
      I read about the problem in the forum but I can't get this solved. I have no access to the php.ini to modify the memory_limit.
      I tried to update the Processwire Verion but failed. (Tried 2.7 /2.8 / 3.2) Got Always Internal Server Error and in the error Log: 
      Compile Error:     Cannot redeclare PageEditFieldPermissionConfig()….
      Has anybody any idea how I can get this solved?
      Thank you so much
      Martin
       
    • By August
      Hi again, after trying pages2PDF, RockPDF and mpdf I'm not sure which of them I should use. Of course, there is also wirePDF.
      I merged mpdf with rockPDF, add a footer and a page in Landscape and that works, like in the code-snippet below but be am I on the right way?
      After that I tried a couple of times rendering an image. Nothing happend, the same with Pages2PDF too. I also copied an Image-URL within processwire and tried further getting an Image within the PDF-Document, but it still display only the red marked placeholder.
      I simply would like create an PDF on click from some Pages including the Images.
      Are there special requirements on Debian 10 with Apache and php 7.3 using Processwire 3.0.123.?
      Is there a guide that I didn't found?
      Is somebody out there who has a similar issue solved and would you be so kind to explain?
       
      $pdf = $modules->get('RockPdf'); $mpdf = $pdf->mpdf; # $mpdf->showImageErrors = true; $pdf->set('SetHeader', 'header text'); $mpdf->AddPage('L'); # $mpdf->Image(urlencode('site/assets/files/1845/image-2.275x200.jpg'), 0, 0, 210, 297, 'jpg', '', true, false); $pdf->set('SetFooter', ' <table width="100%"> <tr> <td width="33%">{DATE j.m.Y}</td>        <td width="33%" align="center">{PAGENO}/{nbpg}</td> <td width="33%" style="text-align: right;">whatever</td> </tr> </table>'); $pdf->show(); // generate pdf  
    • By Hardoman
      Hello community,
      we have a website running version 3.0.118. The owner would like to have a watermark merged to the images, that are being uploaded in the CKEditor as a requirement.
      Image upload besides the CKEditor within galleries and single images works as a charm already. We also use croppable image 3 there. (PIM2)
      To realize this requirement, I thought of using a hook in the admin area. So, I read a lot in our forums and tested this by adding a hook into the ready.php file.
      $this->addHookAfter('InputfieldFile::fileAdded',function(HookEvent$event){ wire('log')->save('test','Image upload works'); ... The log entry is being created correctly. But when I try to use the pim/watermark-function like in a template, he cannot find the watermark-image anymore. Furthermore, when I try to get the page-id, it does not seem to be accessible, because the application does not seem to know how to reference it, or I dont know the right way to do so…
      So my questions are:
       
      Is this the right attempt at all or will there be another, better workaround? It seems, I cannot access the page object (of the content page) within this scope or file but I would need it to save the processed image inside the right files/id folder Would it be better to place the hook into the admin-template? (or admin.php)
        Thanks for any hints in advance. 🙂
    • By toni
      Hi,
      I'm facing a strang problem. In my template I'm setting different sizes for srcset:
      $view->set('images', $page->picture); <img srcset="{$img->size(780,0)->url} 780w, {$img->size(1024,0)->url} 1024w, {$img->size(1440,0)->url} 1440w" src="{$img->url}" class="col__image"> All fine. However, the moment I reorder images in backend the different generated image sizes are broken.
      Does somebody has an idea what could cause it? 
      Version: ProcessWire 3.0.123 
       
      Thanks!
      Toni
×
×
  • Create New...