WordPress.org

Ready to get started?Download WordPress

Forums

New Plugin: Fancy Drop Case Letters (43 posts)

  1. TechGnome
    Moderator
    Posted 10 years ago #

    I got fancy drop case letters on my site (woo-hoo). I did by creating a plugin. I'm making it available in case anyone else would like to give it a go. It's straight forward and easy. Just add the plugin, activate it, update your CSS file, and you are good to go.
    TG

  2. john1000
    Member
    Posted 10 years ago #

    well all great but as i put the code as provided into file and save it as tg-dropcaseletter.php
    di it all by the letter but for me it doesnt show anything.
    its completely dead.

  3. thomasso
    Member
    Posted 10 years ago #

    Well, I just install the plug-in, it took a little effort, but is seems to work fine. My first problem was setting up the background image. Once I activated it the WP-Plugin, I could see the text-letter, but no background image. The problem was in the CSS. So this is what added to show the b-image and alignment over the image in the CSS:
    --note that I had to take out the quote marks (' ') out of the ulr line, before it would read the image:
    Before: background transparent: url ('tileop2.jpg'):
    So this is what I ended up with... Perhaps the last 3 line are redundent, but it seems to line up the text over the image now.
    .drop-case {
    float: left;
    display: inline;
    background-image: url(tileop2.jpg);
    background-repeat: no-repeat;
    font-family: “Times New Roman", Times, serif;
    height: 75px;
    width: 80px;
    text-align: center;
    color: #4933CD;
    font-weight: bold;
    font-size: 5em;
    letter-spacing: 0px;
    word-spacing: 75px;
    line-height: 75px;
    }
    I'm going to fiddle with some more: change the image, size and style of the text, etc...
    http://www.thomasso.com

  4. TechGnome
    Moderator
    Posted 10 years ago #

    john1000 - the only thing I can think of is if you activated the plugin or no.
    if you can, turn it on and let me know, and I'll take a look at the blog and see if I can spot what's up.
    Tg

  5. TechGnome
    Moderator
    Posted 10 years ago #

    In fact it was even easier than I thought. Get the latest version of plugin (0.3) here: http://techgnome.anderson-website.net/posts/2004/07/24/drop-case-letter/
    TG

  6. J3r0m3
    Member
    Posted 10 years ago #

    'tileop2.jpg' : where do i get this file?

  7. TechGnome
    Moderator
    Posted 10 years ago #

    UPDATED! Verion 0.4 is now available at at my site. It fixes a MAJOR flaw when multiple tags are at the begining of the post (such as a followed by a ... it would cause the script to run until the server cuts the connection.
    Jerome - I got it from here originally: http://www.celtic-clipart.com but feel free to use any graphic you want. That simply was the one I was using at the time.
    In additon to the celtic-clip art site, people have asked me about the letters I now use on my site. I got them here: http://www.iconarchive.com/ just click on the "Decorative Caps" in the left menu.
    TG

  8. TechGnome
    Moderator
    Posted 10 years ago #

    Sorry, it's left over from my days of journalism and yearbooking, drop case is the technical term (As opposed to lower casing)... It refers to when you take the init letter, capitalize it, make it over size, then drop it so that the top of the graphic is flsih with the top of the text (that's where the "drop" comes from...)
    Personaly, it doesn't bother me what the name is, so "Fancy First Letters" is OK with me...
    TG

  9. Amit Gupta
    Member
    Posted 10 years ago #

    Sorry, it's left over from my days of journalism and yearbooking, drop case is the technical term (As opposed to lower casing)... It refers to when you take the init letter, capitalize it, make it over size, then drop it so that the top of the graphic is flsih with the top of the text (that's where the "drop" comes from...)
    All true but if I remember correctly, its Drop-Cap & not Drop-Case. :) Feel free to consult a dictionary or a thesaurus & tell me if I'm wrong. ;)

  10. TechGnome
    Moderator
    Posted 10 years ago #

    now that you mention it... I think you are right... but what ever....
    Beel - yeah, I haven't gotten around to fixing that jsut yet. Oddly enough, what you used your $preLetter for, I simply included as part of $imageFolder: $imageFolder = '/wp-images/dc-images/cheswick/chis_'; 6 of one, half-dozen of another.
    TG

  11. thomasso
    Member
    Posted 10 years ago #

    Well version 4 seems to be working out OK. I did make some other adjustments however, nothing to the PHP file, I made numbers also becuase I have some posts that start off with that. It was just a matter of making them and calling them 1.jpg, 2.jpg....
    One thing that I did notice that seems to make a little difrence speed whys, was cutting the name of the imgae file to just the cap. letter, i.e. "A.jpg, B.jpg" and so forth instead of "char_A.jpg". Glad to see it listed in the Word Press Wiki anyway.

  12. danithew
    Member
    Posted 10 years ago #

    "Drop-caps" will bring up numerous results in a google-search. I also found another synonym that seemed to work: "initial caps"

  13. Anonymous
    Unregistered
    Posted 10 years ago #

    When the post is a password protected entry, the images is broken and named as .gif only

  14. TechGnome
    Moderator
    Posted 10 years ago #

    Hrmmmm..... I'll have to look into that as well.
    Thanks for the heads up.
    TG

  15. Narada
    Member
    Posted 9 years ago #

    I got the following error: Warning: Cannot modify header information - headers already sent by (output started at /wp-content/plugins/tg-dropcaseletter.php:71) in wp-login.php on line 257 when I tried to make a post after using the plugin. Then I couldn't login at all because it failed on the error above.

  16. TechGnome
    Moderator
    Posted 9 years ago #

    Open the file tg-dropcaseletter.php. There should be no spaces or enters after the final closing ?> at the very end. If you can put your cursor on the line below it, delete that line. That's typically what the problem is.
    TG

  17. Cantello
    Member
    Posted 9 years ago #

    Any idea on how to achieve lined-up drop-caps with the rest of the text for several browsers? Currently I manage to get lined-up caps with firefox with the abovestanding CSS snippet, but in IE the caps are still above the rest of the text.
    Any ideas?

  18. TechGnome
    Moderator
    Posted 9 years ago #

    Are you using images for the drop case?
    If so, you may want to pare-down the CSS for the drop case to the following:
    .drop-case {
    float: left;
    padding: 0 5px 0 0;
    }
    If you are using straight text and CSS, post a link (if yo ucan) and I'll take a look and see what I might be able to do.
    TG

  19. TechGnome
    Moderator
    Posted 9 years ago #

    The problem of t.gif vs T.gif is a server issue, some servers are case sensitive, others not. It should be a simple fix, which at this point I haven't implemented yet (along with a number of other items.) I've been snowed under by other projects so this has gotton put aside. The fix would be a simple strtolower() on the initial letter variable as it is added to the directory and the file extention.
    Edit the plugin, find the line where it displays the image:

    if ($showImage) {
    $firstLetter = "<img src='".$imageFolder.$firstLetter.$imgExt."' alt='".$firstLetter."' title='Drop Case Letter - ".$firstLetter."' />";
    }

    Add strtolower as the src attribute is built

    if ($showImage) {
    $firstLetter = "<img src='".$imageFolder.strtolower($firstLetter).$imgExt."' alt='".$firstLetter."' title='Drop Case Letter - ".$firstLetter."' />";
    }

    That should fix the case sensitivity problem.
    TG

  20. Anonymous
    Unregistered
    Posted 9 years ago #

    Any way to dont use the IMAGES?

  21. TechGnome
    Moderator
    Posted 9 years ago #

    yeeeesss.... it's in the file. There's an option $useImage set it to False... then add an entry into your CSS file, similar to thomasso's here: http://wordpress.org/support/10/9704#post-58155 -- it this thread, but his post is back up at the top. When I originaly wrote it, I was using just the CSS, but then i found the imaged I'm using and converted it over.
    TG

  22. rmack005
    Member
    Posted 9 years ago #

    Why a div as the containing element instead of a span? Using a div will seperate the first letter from the rest of the content when styles are disabled (or not supported). span, being an inline element, doesn't have this side effect. And if for some reason the drop cap needs to be displayed as a block level element, there's always:
    display: block;
    I've modified the plugin to use a span; it works great.

  23. TechGnome
    Moderator
    Posted 9 years ago #

    In all honesty, it's because I'm not a big fan of spans - hacve had probs w/ using them in the past, but the point is well taken.
    Tg

  24. Anonymous
    Unregistered
    Posted 9 years ago #

    Was the plain font issue resolved?, I would like to use the plugin with plain regular font but unfortunately the first letter is not aligned with the rest of the text, any idea?

  25. TechGnome
    Moderator
    Posted 9 years ago #

    here's what I use in my CSS, and it works fine for me:

    .drop-case {
    font-weight: bold;
    font-size: x-large;
    color: #bc0707;
    float: left;
    }

    If it doesn't work, you can try playing with the CSS or try rmack005's version with the span.
    Tg

  26. Anonymous
    Unregistered
    Posted 9 years ago #

    Thanks TG - I think the way it looks is probably the best I can get - unless you have another suggestion - results can be seen at http://www.origenes.info
    Thanks Again - very nice plugin!

  27. Anonymous
    Unregistered
    Posted 9 years ago #

    Apparently the firtst letter alings correctly whne you use FireFox, for IE is above the rest of the text.

  28. Anonymous
    Unregistered
    Posted 9 years ago #

    Please help me out!
    I believe something went wrong after I install the plugin ... now I cannot login in to the Admin section.
    any ideas?

  29. Mark (podz)
    Support Maven
    Posted 9 years ago #

    Use ftp, and delete the plugin.
    You should then be able to login to your blog.

  30. Anonymous
    Unregistered
    Posted 9 years ago #

    Thanks for the FTP tip, i got it fixed.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags