Featured images in wordpress

My current theme for the blog is not so good when the included text is not as deep as the featured picture. While not having a featured picture is OK for a screen based reader, it’s not so good for those using the wptouch interface. Maybe it’s not so good for deep pictures either.

A google search brings up the codex and these two, similarly named links, together with the codex pages,

With zbench the image and entry text are contained in a single <DIV> with a class name of “entry”. The text is contained in a <P> tag. The image class is “attachment-extra-featured-image wp-post-image”.

  1. Would it look better within a table? This would need to be developed in index & archive pages
  2. Should I use the thumbnail feature?
  3. Can I use the CSS? NB The <P> does not have a class name.

The deep pictures would be solved by by the thumbnail features.

Maybe I should consider the HTML recognition within the excerpt functions.

ooOOOoo

Also the facebook feed does not use the featured picture, but finds the first picture within the post, maybe even the post page since it often uses the up arrow on the vote this up widget.

Rendering RSS on my blog or wiki

I have today installed JP’s Get RSS Feed, a wordpress plugin. I shall be using this to replace my delicious linkrolls using the delicious rss location. See also my snip on Delicious Linkrolls.

It requires a shortcode/codesnip to invoke it’s parameters e.g

 
[jp-rss-feed 
    url="http://feeds.del.icio.us/v2/rss/davelevy/convoyswharf" 
    numitems="7" getdesc="50" ] 

I should document this differently, but the snip must be on one line, and no space between the [ & the ‘jp’.

There’s a few more parameters which are documented on their home page

Another widgit

and now we have another RSS rendering widget

This was found to be broken on 17th October 2016.

Pop Up Meerkats

For various reasons I wanted to make a pop-up on hover using a picture. I found the following URL,

Here’s the CSS code

<STYLE>
  a.imPop       { position:relative; z-index:20; }
  a.imPop:hover { display:inline; z-index:30;}
  a.imPop span  {display:none;}

  a.imPop:hover span { display:block; position:absolute; 
                       top:1em; left:1em;
                       width:64px; height:64px;}
</STYLE>

Here’s the picture, we plan to use,

Here’s the HTML,

<a title="sample" href="http://davelevy.info/images/wiki/ao.png">Meerkat
<span><img alt="ao" src="http://davelevy.info/images/wiki/ao-w200.png" border="0" /></span></a>

The span tags are crucial and one needs to be careful about how wordpress deals with tags. The HTML can be implemented using the HTML add in, Code Embed or writing it natively using wordpress’s text editor.

ooOOOoo

To see the pop up picture effect, hover over the word, Meerkatao, the picture should pop up

Decorating Blockquotes

Now I have one of those pretty quote decorations in my quotes on this wiki.

  1. The decoration is an image.
  2. I used mspaint to capture a large quote mark. I used Engravers MT.
  3. I then used paint.net to rotate and flip it, crop it, and then make the white background transparent. As advised in the paint.net forums, I used the magic want tool, capture the background and then “cut” it out.  The file needs to be a transparency supporting format for this to work.

    quote

  4. I uploaded the file to my web server.
  5. I then used the WordPress CSS editor to add the following code,
.entry blockquote { background: #EEE url("http://davelevy.info/TOKENS/OQuote_GreyTransparent.png") no-repeat; }

As you can see, the background rule takes two arguments, a base colour and the image, the rune required is the no-repeat key word. It also benefits from the definition of some padding rules. In my case,

     padding-left: 16px; padding-top: 16px;

and now onto fixing the code tag.

Snipsnap Themes

Snipsnap offered multiple look and feels and for the advanced CSS coder, offered many opportunities to manage itl. My changes were relatively simple. In fact it might have been Snipsnap that took me to Blue Robot which influenced me a lot.

Green Robot Theme

On the previous bliki, implemented in Snipsnap, I implemented a Green Robot Theme. This was based on Blue Robot, which rather inspired me as you can see if you read the code and comments of what remains of my static site.

This is documented on the Snipsnap wiki at

CSS

I should also capture some comments on the CSS used by Snipsnap, it is/was a good looking blog in my opinion.

Green Robot

It used Georgia as a serif font, and Verdana as the sans-serif font. It’s basic content was san-serif , and the blog headings and dates used the Georgia font. The full css can be found on the snipsnap site.

The picture above suggests that when the blog comes across, some of the articles there, will document the progress and discoveries made as at the time, which it seems was 2006. It’s getting to be a long time ago.

HTML Slide Shows

I wanted to create a scrolling picture show as a banner on all the pages in a micro site. Many sites use this for their front page decoration. I didn’t want to use animated gif because of the age of the technology.It’s obviously becoming easier. Basic Tips below, shows how to use the HTML META tag with http-equiv=”refresh”attribute set.

How to do it

The example asks the user to start the slide show, I didn’t want this. I create a bunch of slides as .htm[l] pages. Each slide page contains only the picture, and the meta tag, although a title and other meta data is probably a good idea.

<HTML>
<HEAD>
<TITLE>some title</TITLE>
<!------  This page is an image container and URL ------->
<META HTTP-EQUIV="refresh" CONTENT="8;url=ss2.html"> 
</HEAD>
<BODY>
<IMG SRC="picx/dlr-postbox.png" ALT="DLR" WIDTH="1024" HEIGHT="102" BORDER="0"> 
</BODY>
</HTML>

Each page points at the next page and has a time period defined in seconds. I, then implemented the slide show host page within an IFRAME.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<CENTER>
<IFRAME SRC="ss1.html" SCROLLING="NO" WIDTH="1024" HEIGHT="102" MARGINWIDTH="0" MARGINHEIGHT="0"> 
</IFRAME> 
</CENTER>
</BODY>
</HTML>

That’s it! The default margins don’t seem to be 0, so they need to be set. The frame is used to ensure that the image is displayed on the host page load.

Links

Planet (Venus) Themes (CSS)

I use Sam Ruby’s Planet Venus. The package comes with two themes, I have always rather liked the ‘Fancy’ theme. This article was finished in May 2011, and talks about the css required to amend a planet output page in HTML/CSS. It was written for my planet G3 feed which was a G3 RSS repeater. It may just be a useful source for those who wish to create new themes. (I shall be doing this in March/April 2015 as I develop the refresh of davelevy.info.) Continue reading “Planet (Venus) Themes (CSS)”

Implementing an XML feed viewer in HTML

Viewing an XML feed via an HTML browser

I decided to have another go as I was looking to consume some planet feeds on a static web page. I found Display Your Feed on a Static HTML Page Using FeedBurner’s BuzzBoost using Google and this points at Feedburner’s Buzzboost, which is part of their feed publicity toolset. Continue reading “Implementing an XML feed viewer in HTML”

Snipsnap Problems

This was copied across from the snipsnap bliki on 26th July. It’s all a bit redundant now, but it might be useful for others. This was a pagfe that documented my work in building the configuration and in some places represented a work in progress. In some cases, the resolution is not documented and in others I failed to resolve it. I eventually gave up on snipsnap. Hope this page helps someone! Continue reading “Snipsnap Problems”

Extending Snipsnap (superceded)

This article, which was originally about how to extend snipsnap & was copied across from the snipsnap bliki on 20th June 2013, I gave up on Snipsnap later in the year, and the project has been abandoned by its authors. This content is thus pretty much superseded and the title but not the link has changed to reflect this.. There has been some minimal reformatting undertaken. There are two idioms used which are snipsnap specific; they have been left as originally published and are now a nonsense. Other things will read oddly as I did not pursue my plans. Embedding Disqus broke the backup utility, or more accurately broke the restore. Continue reading “Extending Snipsnap (superceded)”