WordPress and non-conventional uses: the point of view of a web designer
Introduction: In this article I’ll treat an argument that crosses some programming activities that are far from my background; I’m not only talking about the knowledge of WordPress but also the implementation of small scripts (in my case asp) that haven’t been developed by me. Personally I’m interested in using the tools at my disposal to satisfy some particular needs and try to “bend” these tools in a non conventional way (even if simple) to make them really useful. The article wants to have a helping tone and be open to more professional and strong solutions and also alternative.
The “steady balls” situation
The graphic solution adapted by my “one page folio” consists in a big image inserted as a background to the contents. The use of the image gets stronger with the use of the css keeping the position steady respect to the contents. The particularity of the solution consists in having an image that adapts itself to the resolution of the browser window following the factor form of 100%. Obviously there are many solutions that create this effect, I chose the easier one to implement and the “cleaner” one under the markup/css profile. Practically a div gets inserted after the tag <body> and before the contents, in this way:
<body> <div id="backG"> <p><img src="background_image.jpg" alt="" /></p> </div>
To note that the reference of the image is made in the markup and not through the css, this detail is very important for the developments of my solution. In time there’s the need to change this background image to make my page more interesting and publish captivating images. The procedure for the update of this image is simple: identify the image, rename it (because otherwise I had to change every time the reference to the name in the markup) and upload it through ftp. All considered nothing hard to do, but I wasn’t satisfied yet.
The need: immediacy!
The main need of users that use the clients of the social network in mobility is to satisfy the immediacy: I see something funny or interesting? Good, I take a photo and publish it on Twitter/Facebook/Flickr. I do it immediately as soon as I feel the need. This sense to show gets lost if you have to go home, download the photo from the Iphone and then post it on the browser. Satisfy the same need was my target also because I wanted to take the most of the great potentiality of the background image to communicate with the visitors. It’s a matter of finding a way to make dynamic this image and have the possibility to modify it by mac/Ipad/Iphone.
The solution: first steps
Immediately I thought that WordPress could be the solution to my problems. I gradually came up to this idea because in my static site I was doing a similar operation, even if it was more banal and obvious: import the feed Rss of my blog. On the page of my site there’s a script in asp that does a simple parsing of the Xml and then “prints” in the interested DIV the latest posts of my blog.
In this situation two factors were interesting: the first one is the script containing a variable that decides how many posts to visualize. Setting this variable at 1, I could visualize only the last content from my blog. The second and the most important is that during the parsing I could choose to import not only the title, link, date, author and description but mainly the content of the post. Studying a little bit WordPress and the anatomy of the feed Rss I understood that video and images usually get inserted in the body of the post. At this point I realized that I had the necessary tools to accomplish my target: it was a matter of importing in another point of the site the Rss flux of my blog and choose to visualize the content of one post (the last one). As seen previously the image path (img src) is inserted in the markup, so that this could be changed in a dynamic way.
The idea was to take the most of the posts of WordPress to make dynamic my background image. Therefore I could write a post, inserting an image uploaded from the mac in the content. At this point all you need to do was do the parsing of the Xml taking only the attribute “content:encoded” that contains (in a tag <p>) my image. But it wasn’t enough! Importing only the last post I would have visualized also the normal articles of my blog. So, it could happen to visualize not a photo but the text of another article. I knew of the existence of the categories, so searching I found the solution: interrogate the feed Rss putting a specific category. Here’s the solution:
Analysing this url, you can hint that WordPress gives me the possibility to import the feeds not only of a determined category, that in case I called “background”. Another piece was fixed: to change the image through WordPress, I should write a post assigning it a specific category: that is background. Let’s go to the practical implementation. It was a question of making dynamic by the importation of the attribute “content” the path of the image:
<body> <div id="backG"> <p><img src="<strong>attribute to make dynamic</strong>" alt="" /></p> </div>
Checking through the markup coming from WordPress in correspondence of the “content” I saw that it contained besides the tag img (and its path) also the tag <P>. So the code above becomes simply:
<body> <div id="backG"> content from the RSS feeds </div>
During the parsing
Case "content:encoded" foto = objNodo.firstChild.nodevalue
I associated to the variable photo the Rss attribute “content:encoded” that contains the tags and the path of the image. then in asp I “printed” this variable in the markup:
<body> <div id="backG"> Response.Write (photo) </div>
Done. Summarizing the different phases: – create a category to associate only the posts that have background images
– import the Rss feed coming from WordPress associating only the selected category for the post-images
– import only the last post of the category and take the attribute “content-encoded” from the item Rss – substitute in the markup the variable (for example photo) associated the content with the beginning “static” one, in the specific:
<p><img src="attribute to make dynamic" alt="" /></p>
The solution: next steps
Someone could say: all this work to avoid to upload a photo by fpt? Well, first I was talking about immediacy and communicating with one’s public with images in mobility. Using WordPress, it now allows me to update my background even by Iphone using the free application for the updating of one’s blog.
I take a photo and I publish it writing a new post, being careful to choose the category selected for this activity. To note that to publish a photo we don’t need to write a text or a title or tags, all we have to do is upload the photo, choose the category and publish the post!
The principle of immediacy and of mobility seems to be respected, or not? It’s useless saying that the application for WordPress is available also for Ipad. Besides these main opportunities, the solution to use WordPress allows me to have a historic archives of my photos and have a sort of emotional time-line. Moreover for those who want to update the photo from mac/pc in the company area and under proxy, this solution allows to avoid the restrictions due to the closure of the doors 20-21 ftp, even if this problem can be avoid using the upload by http that many housing companies have adapted (Aruba is an example).
In the research of easy but professional solutions you need to resolve all the problematic behaviours that a “non standard” solution can create. In this situation there was one “contraindication”. The problem to resolve was to see in the list of the important posts of my site also the ones regarding background images. Considering that for the visualized posts I would have had the title and the attribute “description”, in correspondence of a post containing only a background image, only an empty line because I don’t give a value the fields title and description. The problem gets easily resolved changing the url of the Rss flux useful in populating this section. The url of default:
must exclude the category that characterizes the posts useful for the background images. In my case the category “background” has an ID equal to the value “72”, the correct url of my Rss flux becomes:
As you can see with “?cat=-72” I excluded from the visualization the not necessary posts. Obviously this step is useful also in the modification of the url of your blog where the users click to subscribe to the Rss. This solution of the exclusion of one or more categories from the flux of the feeds can be made also with the a plug-in called Advanced Category Excluder. Once installed we can go to the “ACE” card and then on “categories”. In this frame we can choose among all the categories, the ones to exclude from the Rss flux. The plug-in gives the possibility to exclude the categories even from other areas like archives or comments.
Last consideration. When you upload a photo from mac/pc through the WordPress panel remember to eliminate the dimensions of the image using the tab “HTML”. If you don’t do it the background image will not adapt 100% to the monitor. This detail isn’t necessary if you used the application for Iphone/Ipad.
In this article we saw how WordPress can be used as a tool to make dynamic our website, even if it’s not created with server-side technology. Surely it’s not the “cleanest” practice, but it avoids a lot of porting problems. As said the article is open to other solutions and changes. A question that I still don’t have an answer: is it possible to interrogate in some way the WordPress Rss flux personalizing it with calls at single posts or pages?
At the end, one last consideration: is it convenient to bent a CMS (WordPress in this case) for the use of whatever web dynamic application? Does it always suit? And in what cases it’s better to use solution ad hoc and why? I’m here waiting for your comments!
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »