Jump to content

Peter Falkenberg Brown

  • Posts

  • Joined

  • Last visited

  • Days Won


Community Answers

  1. Peter Falkenberg Brown's post in responsive image captions was marked as the answer   
    Dear All,
    I simplified the method above, and instead of using the figure / figcaption method, I used
    a single <div> with the class "caption_left". Then, I placed a <br> code after the image, and pasted the
    caption after that -- all in the same div.
    It seems to work quite well in FF, IE, Chrome, and Opera, except that the width of the div
    has a delay in its adjustment until the image fully loads. I used a combination of CSS and
    JQuery code to make the div width the same as the image, so that the captions would
    follow the image width.
    Because there's no child div to mess with (i.e. figcaption), the vertical div overwrite issue is no longer a problem.
    Here's my code.
    .caption_left { float: left; max-width: 50%; height: auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.7em; color: #003333; font-style: italic; font-weight: normal; text-align: left; line-height: 1.5em; margin-right: 10px; } JQuery:
    <script> $(window).load(function() { $(".caption_left").each(function(){ image_width = $( this ).find("img").width(); $( this ).width( image_width ); }); }); </script> [EDIT]
    Because I have both a caption_left and caption_right style, I changed the JQuery to use a wildcard for "caption_":
    <script> $(window).load(function() { $('[class*="caption_"]').each(function(){ image_width = $( this ).find("img").width(); $( this ).width( image_width ); }); }); </script> [END OF EDIT]
    I used the above method on a complex page of images with long captions, and sidebar divs
    which had images and captions inside them. All worked well, except that at the end of the image
    resizing, my page had blank spaces at the bottom of the main content column, because the images
    inside the column had resized upward.
    Adding a window.resize command fixed it, thus:
    <script> $(window).load(function() { $('[class*="caption_"]').each(function(){ image_width = $( this ).find("img").width(); $( this ).width( image_width ); }); $(window).resize(); }); </script> [END OF SECOND EDIT]
    Then, in site/modules/InputfieldCKEditor/mystyles.js, I added the two caption styles so that
    I could easily apply that style to a div in the body field, into which I would add the image:
    CKEDITOR.stylesSet.add( 'mystyles', [ { name: 'Caption Left', element: 'div', attributes: { 'class': 'caption_left' } }, { name: 'Caption Right', element: 'div', attributes: { 'class': 'caption_right' } }, The only gotcha that I can see is that when the images have long captions, the div widths take a moment to adjust
    down to the image widths, after the images load.
    * Anyone know how to make that faster?
    * Any thoughts on the solution above?
    => I also noted that my previous figure/figcaption styling messed up the magnific-popup styles that I used, based on this post:
    ... suggesed by Martijn and Teppo. So, I deleted my figure / figcaption styles, and the popups went back to normal.
  2. Peter Falkenberg Brown's post in .htaccess 301 Redirects - Swapping Subdirectory For All Articles - Syntax Question was marked as the answer   
    Dear Teppo,
    Thank you!
    Removing that one little preceeding slash did the trick. Now it works like a charm.
    Sigh. Apache rewrite rules give me a headache.
    Problem solved, and thanks again!
  3. Peter Falkenberg Brown's post in TinyMCE converting html entities to characters was marked as the answer   
    Dear SiNNuT,
    By the way, based on your excellent comment that since ProcessWire stores everything as UTF-8, and the link at StackOverflow that you listed, which then led me to this article (from 2003!):
    "The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)", by Joel Spolsky
    I educamated myself, and said, "Duh", and realized, as you so correctly pointed out, that I don't need the entities anyway.
    I just need to make sure I have this line in my templates:
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> When I checked, I was already using that line. So, I'm removing my entity declaration from TinyMCE.
    Sigh. One learns something every day. One hopes.
    Well... better to do it correctly now, than to continue in ignorance.
    Addendum: and then one reads an article like this:
    which says that one should use html entities. Lot's of opinions.
    But I just checked, and after removing my TinyMCE entity declarations, and purging my cache, and re-logging in,
    I was able to paste a copyright symbol in the body text, and it displayed correctly -- no entity needed.
    Thank you again, for your help.
  • Create New...