Serendipity Forums

Ok i'm lost. I need to know how to embed my blog into a web page. Could someone help me.

Thanks

The answer depends largely on what you mean.

By far the easiest solution is to install the Show Entries via Javascript plugin. It will allow you to use Javascript on your web page to retrieve the recent entries. More details are in the README file.

If you just want to add dynamic content to an existing website, it's usually easier to reproduce the existing website within Serendipity. We use Smarty templating for our output. It looks a lot like HTML, but with extra {} among the <>. If you had the savvy to create an HTML + CSS website, you'll find converting it to Smarty pretty simple.

The hardest solution is to embed Serendipity directly into another PHP application or web page. You can read more about direct embedding on the Serendipity home page. It is difficult to get all the configuration correct, and will require some PHP knowledge. But if it's your only option, at least it's there.

We'll be happy to help you out with whatever solution you choose, of course. Just let us know what you're looking for.

judebert wrote:If you just want to add dynamic content to an existing website, it's usually easier to reproduce the existing website within Serendipity. We use Smarty templating for our output. It looks a lot like HTML, but with extra {} among the <>. If you had the savvy to create an HTML + CSS website, you'll find converting it to Smarty pretty simple.

Hi sindy; I hope you don't mind me jumping into your thread. I think this second option is also what I want to do with my football site-- recreate it in Serendipity so that people can post comments to what are now just static pages and so I can update the site just by posting new blog entries.

I checked out the Smarty site briefly, but I'm still a bit lost as to where to begin. It doesn't look like this can be done from within the Serendipity interface itself, can it? I am familiar with both HTML and CSS. Do I need to know PHP as well in order to get started on this?

(Sorry; I have actually been here months ago and asked this, but due to various reasons I haven't had time to get started until now. I am hoping I can put some work into retooling my site now, though, and I'm excited about the possibilities.)

Learning things as I go here; I realize a specific question will probably be more helpful...

Would step one be to create a static page in Serendipity and select the "Make this page the frontpage of Serendipity" option? Then my goal would be to make that page resemble my current index.html page?

Hi, and welcome to Serendipity!

I came to Serendipity via the same route as you: I wanted to update my static site more easily and allow comments on the pages.

I've just checked out your site, and it's a lot more sophisticated than mine was when I switched. Not to worry: you've already got the HTML, and you know how you made it, so this will be a snap! You're right that it can't be done from within Serendipity, but you've been creating your HTML offline so far, so you'll be familiar with everything we lay out for you here.

Step 1: Break the page into pieces. In particular, we're thinking of a banner, sidebars, and content. Serendipity puts the banner and sidebars on every page, so your "team schedule" pages will have them too. This makes the site look very consistent and 'integrated'.

In your case, the schedule buttons and ticker at the top of the page look like a banner. (We could turn the ticker into a separate nugget of HTML, but we'll save that for later.)

The team standings and season are your right sidebar, and it contains two nuggets of HTML. The menu and poll are your left sidebar, again with two nuggets of HTML.

All the other stuff is content. The "Mark Your Calendars" text is something we want to be at the top of the index page, while the "site updates" box will be replaced by summaries of your most recent entries.

Step 2: Create a new directory under your templates/ directory. Let's call it "afc-north" for our discussion. Copy the index.tpl and info.txt from your templates/default/ directory to templates/afc-north/. Fill out the new info.txt with your name, the new template's name, etc. Go to your Serendipity admin page and configure your themes; select your new afc-north template.

That's a lot of steps. All you really did is create a new template that looks exactly like the default template.

The index.tpl controls what the page looks like. It's mostly HTML, with some Smarty thrown in. The Smarty lets you insert HTML dynamically, depending on variables or by looping. It's very cool, and we'll cover some of it in just a second.

By looking at the index.tpl, you should see the basic structure of the page. You see the <head> and <body>. You can also see the banner, followed by the "main" page content, which includes the actual content, sandwiched between sidebars.

Anything between {} gets interpreted by Smarty. Serendipity tells Smarty what to print, your .tpl files tell Smarty where to print it. Smarty prints the appropriate entries for {$CONTENT}, and the correct sidebar for {serendipity_printSidebar side="whatever"}.

Step 3: Make the index.tpl look like your page. We're not worried about the sidebars' content here; we'll take care of those later. We want the banner to look right, and the sidebars to be positioned correctly.

Look at your HTML. Find the banner stuff and put it in the div with id "serendipity_banner". (If your banner is already in a div, you can add its class to the serendipity_banner div.) Find the sidebars and move the {serendipity_printSidebar} tags to take their place. Put {$CONTENT} in the place of the content.

You index.tpl should now look a lot like your original HTML, only simpler.

Step 4: Duplicate the original content. We'll want your intro text to be "sticky", which means it gets displayed at the top of the page, but only on the front page. That means we need to install the "Extended Properties of Entries" plugin. You'll find that on your admin page, under "Configure Plugins", "Add a new Event plugin". Just click the little icon to install it.

We'll also want to distinguish between the front page and other pages. I'd make a new category, "intro", as well as "schedules" and "news" or "content".

Create a new entry and copy the HTML for the intro text into it. Set its category to "intro" and click the checkbox for "Make entry sticky". Now it shows up at the top of the "intro" category page and the summary page.

Create new entries (they don't need to be static pages) for all the other pages. You can simply directly copy the HTML between <body></body> tags. Assign each to a category OTHER than the intro category (otherwise if we try to display the category, the intro text will show up at the top again).

Now you've got the original pages as entries. Move on to the sidebars. For each "nugget" of HTML, add a new SIDEBAR "HTML Nugget" plugin. Copy the original HTML into the Nugget. (The configuration of the Nugget is displayed when you add it; if you want to change it, just go to your admin page, "Configure Plugins", and click the nugget you want to change.)

From the admin page, click "Configure Plugins" and move the Nuggets to the appropriate sidebar and order. Be sure to click the save button.

Visit your blog. Everything should be in the right place and working, although it might not be too pretty. If anything is incorrectly placed, we need to modify the index.tpl and move it to the right spot.

Step 5: Style the page. You can start with the templates/default/style.css. Copy it to templates/afc-north/ and start copying the styles from your original stylesheet.

Your sidebar boxes are now in two new divs: a "serendipityleftSideBar" or "serendipityrightSideBar" div is the top container. Each is in a "serendipitySideBarItem container_html_nugget_plugin" div. There's a "serendipitySideBarTitle" div holding the nugget's title, if you gave it one, and a "serendipitySideBarContent" div holding the actual HTML. You can use these classes to improve your layout if you want.

Once you're done copying the styles, visit your blog again. Make sure to clear the cache, since most browsers cache the stylesheets. (In Firefox, using <shift>-Reload usually does the trick.) It should be a virtual duplicate of your original page.

Step 6: Ask more questions. I've given you the general idea of what to do. Something's going to go wrong, we know it will. But we're willing to help you out. Let us know where you're confused, and we'll figure it out with you.

Good luck! It's a lot easier than I make it sound. And we'll be here for you.

Thank you for your help, judebert! These sorts of instructions are exactly what I needed to start figuring this out.

I am trying to set up a parallel page to www.afc-north.com at www.afc-north.com/serendipity using s9y.

I have gotten through Step 3 of your instructions, putting the banner and sidebars into the layout of the page using the index.tpl file, and I think I have some other specific questions on how to proceed.

Banner: I was able to reproduce the row with the four big buttons exactly (with the addition of a few things to style.css). At this point, the buttons just go to the team schedules, which is redundant, since there are also links on the right to the schedules. The real intention for the buttons is for them to go to "headquarters" pages for each of the four teams. I figure that if I can turn the site into a blog, I can group articles pertaining to the Ravens on the Ravens headquarter page (famous games, coaches, etc.) and do the same for the other three.

I'll have to decide if I want those buttons at the top of every page on my site; I'm thinking I may not. Somewhat related to this: I removed the blog title and subtitle. Is that a bad thing to do for the sake of Google searches?

Ticker: I was pleasantly surprised to see that the Javascript still works, but there seems to be a glitch-- as soon as the end of the string scrolls on, it instantly jumps back to the beginning instead of giving the visitor time to read the entire message. I wonder if there's a plugin I can replace this with.

For the sidebars and content, I didn't bother making the styles match yet because there's more to be done on a larger scale still. I don't quite understand how to make each sidebar two separate nuggets.

Left Sidebar: I couldn't figure out what style to change to get rid of the thin blue border around the left sidebar.

Poll: The poll works with PHP-- the page it's on needs to be changed from .html to .php for it to display, so it's not working.

Content: I reproduced the "Mark your calendars" post-- this is exactly how I'd like to be able to update my front page!

Right Sidebars: I put them to the right of the sidebars that I already had on the page by default, since I haven't decided which of those to keep yet.


OK-- my main question is what to do next. Your Step 4 says to make my intro text "sticky." What is my intro text? The banner at the top, or the "Mark your calendars" post? I already put valign=top into the entire row, so it's already going to display at the top.


Thank you for your help-- I'm looking forward to learning more!

AFC_North wrote:Thank you for your help, judebert! These sorts of instructions are exactly what I needed to start figuring this out.

That's what I'm here for!

AFC_North wrote: I am trying to set up a parallel page to www.afc-north.com at www.afc-north.com/serendipity using s9y.

And it's looking awesome, I must say.

AFC_North wrote:Banner: ... The real intention for the buttons is for them to go to "headquarters" pages for each of the four teams. I figure that if I can turn the site into a blog, I can group articles pertaining to the Ravens on the Ravens headquarter page (famous games, coaches, etc.) and do the same for the other three.

And that's pretty easily handled by giving each team a category. We've even got a plugin that lets you switch templates when you display a new category.

AFC_North wrote:I'll have to decide if I want those buttons at the top of every page on my site; I'm thinking I may not. Somewhat related to this: I removed the blog title and subtitle. Is that a bad thing to do for the sake of Google searches?

The easiest way to move the buttons around will probably be with the {$view} variable. You can either add a class to the buttons, so they're hidden everywhere except when the desired view is displayed, or use an {if $view == 'whatever'} {/if} to output the HTML only when desired.

AFC_North wrote:Ticker: I was pleasantly surprised to see that the Javascript still works, but there seems to be a glitch-- as soon as the end of the string scrolls on, it instantly jumps back to the beginning instead of giving the visitor time to read the entire message. I wonder if there's a plugin I can replace this with.

I see the glitch. I don't know why it happens here, but not on the front page; Serendipity and Smarty don't change the way JS works (although you may need to surround your JS with {literal}{/literal} to keep Smarty from interpreting the {} as Smarty commands).

You could use the HTML Nugget In Head event plugin, which will allow you to insert HTML and Javascript in the head or body of the page. But it's no different from inserting the JS in index.tpl or entries.tpl (except that the plugin requires a bit more CPU on the server).

I think the problem is elsewhere. In particular, I notice the ticker on the new page starts immediately, while the ticker on the old page scrolls in from the right. It would be easy to duplicate the original behavior by adding a bunch of spaces to the front and back of the string.

AFC_North wrote:I don't quite understand how to make each sidebar two separate nuggets.

Left Sidebar: I couldn't figure out what style to change to get rid of the thin blue border around the left sidebar.

I couldn't figure that out either, even using FireBug. Usually it helps me track down these problems in minutes.

However, we're having a slight disconnect in concepts. You've kept the whole page as one table, with the banner split into a separate div, and the Serendipity content in two <td>s: one for the blog content and one for the Serendipity sidebar. Your original sidebars are still separate <td>s.

My concept is: get rid of the <td>s for the original sidebars. Use the Serendipity sidebars instead. Take the table that makes up your menu and put it in an HTML Nugget sidebar plugin. Put the Nugget in the left sidebar. Serendipity will now print it for you, and you can change it at any time by editing the HTML Nugget from "Configure Plugins" on the admin page.

For bonus points, split the table into multiple nuggets: one for each <tr>.

Same for the left sidebar. Serendipity's already printing one of those on its own (it's named serendipity_rightSideBar). You can move your left sidebar table into one or more HTML Nugget sidebar plugins, put them in the right sidebar, and Serendipity will print them for you inside the serendipity_rightSideBar.

If we can change them <div>s, you'll make kittens around the world very happy. (Whenever you use tables for layout, God kills a kitten.) It might make it easier to debug the blue padding, too; we have a couple of CSS gurus on the forum.

AFC_North wrote:Poll: The poll works with PHP-- the page it's on needs to be changed from .html to .php for it to display, so it's not working.

Not understanding; sorry. The Serendipity page is a .php file. You might be running into some security features that prevent us from calling PHP from our templates. We have a poll plugin, as I recall. It would probably be more secure to switch over to that.

If you're set on keeping it as-is, we can figure something out. But we'll have to make you aware of the dangers beforehand.

AFC_North wrote:Content: I reproduced the "Mark your calendars" post-- this is exactly how I'd like to be able to update my front page!

Progress!

AFC_North wrote:Right Sidebars: I put them to the right of the sidebars that I already had on the page by default, since I haven't decided which of those to keep yet.

If you turn them into HTML Nugget plugins (especially if you change the layout to work by CSS) you can decide dynamically, mix and match. Try it out and see what works best for you.

AFC_North wrote:OK-- my main question is what to do next. Your Step 4 says to make my intro text "sticky." What is my intro text? The banner at the top, or the "Mark your calendars" post? I already put valign=top into the entire row, so it's already going to display at the top.

Bad! Bad designer! Tables are for tabular data! No cookie!

I was talking about the "Mark your calendars" post, or whatever you want to always be at the top of the entry listings.

The overview page/front page/entry listing -- whatever you want to call it -- will take the place of your current "Site Updates" window. The most recent n entries will appear here, where n is configured in the "Configuration" admin page. If you want some particular entry to always show up above all other entries (like "Mark your calendars"), you make it "sticky". Sounds like you've already figured out how to make it sticky; if not, we can cover that, too.

AFC_North wrote:Thank you for your help-- I'm looking forward to learning more!

We'll be here!

Well, I'm getting closer, I think. I finally understood what you meant when you were talking about "HTML Nuggets." I've created four of these:

-- the INTRO, HISTORY, RIVALRIES, STATISTICS link on the left.
-- what is supposed to be a countdown to kickoff at top right, only I think I've messed up the Javascript somehow
-- the AFC North Standings table at center right
-- the 2007 NFL Season table at bottom right

Sadly for the sake of the kittens, each of these HTML Nuggets is still a table, but at least they're not nested tables anymore. I know I need to bring my web design principles up to date, but it seems I've never been able to get div's to display where they ought.

As you can notice, the HTML Nuggets are getting all spread out, making the page very tall, and I haven't been able to figure out why this is-- surely something in the template or style sheet needs to be changed, but what?

I am also trying to see if I can get the left sidebar to be the dark blue color it was on the original page while still leaving the right sidebar light blue. I have done so quite clumsily by changing the bgcolor in index.tpl, but I don't think that's how it's supposed to be done. (I don't insist on making the new page look exactly the same as the old; I'm just trying to see what can be done and what can't.)

Other things I have played around with adding: The poll-- I found that I was missing the following line of code in my page's header the last time I made a post here:

<?php
include_once "/home/content/a/f/c/afcnmk/html/advancedpoll/db/poll_cookie.php";
?>


I added it, though, and it still didn't seem to work. I decided to see what the Serendipity poll plugin was like, and it seems OK, although it doesn't have as many features as the one I was using before.

I have also added a "recent entries" listing. Would it still be possible for me to get this to display under the articles where my "Updates" box used to be, or is it better to leave it as a sidebar item?


Thanks again for your help; sorry about the jumbled quality of this post-- I'll be happy to clarify anything if it's unclear.

I think I got it. I'll see if I can answer everything, and you can always bring my attention back to anything I've missed.

I'm glad you're not insisting on pixel-perfect replication of the original page. Although it can be done, it's a lot harder than duplicating the style.

Your sidebar items are spaced out because each one has about twelve extra breaks (<br />). Seriously. Get FireFox and FireBug, load up your page, and inspect that item. Looking at the first one, I see the script countdown.js, one break, some embedded JS setting the date, and... nine more breaks before the table.

While you may have inserted them deliberately, I'm betting you didn't. In fact, I'm betting it's the fault of the nl2br plugin. It converts newlines (what you get when you press Enter) to <br /> tags. It's probably seeing all the newlines in your tables (unless you put all the the <table>, <tr>, and <td> tags on a single line) and converting them to breaks, which it's putting OUTSIDE the table. Go to that plugin's configuration and set it not to mark up nuggets, or turn it off altogether.

The next one has 32 breaks before and 2 after. When I delete them in FireBug, it looks correct, a lot like the original page.

To make the left sidebar dark blue, I just added "background: #1b1b30" to #serendipityLeftSideBar (in FireBug, of course; you'll want to do it in style.css).

I also got the INTRO/HISTORY/etc menu to hit the right margin by setting its width explicitly. (That's been bugging me. I hate the way divs and tables mix.)

As for the JavaScript: do you actually call startTime() anywhere in the document (besides itself)? And the event time isn't set because it's got a rogue <br /> at the end; turn off nl2br for nuggets and that'll fix itself.

I didn't see the include_once in your header. Maybe you've taken it out already. It's possible we can update the Serendipity poll plugin to support your poll software, too.

I think that's it. If I missed anything, let me know. You're making great progress!

OK-- checking in here again. Here are the links to my site, for convenience.

original site | Serendipity site

Stuff I've figured out:
The nl2br plugin was indeed the culprit that was adding all of the extra BR's. Telling it not to apply to HTML nuggets fixed the whole page.

I also figured out the glitch in the ticker's Javascript. The code was using a nonexistent image as a spacer at the beginning and end of the string, and either the PHP or Serendipity was removing it. I just told the Javascript to use my pixel.gif image (a single transparent pixel, stretched to the proper width) as the spacer instead, and that works fine.

I think I might try using the HTML Nugget in Head plugin you mentioned earlier for the ticker's contents, as that will make it much easier for me to make changes in what it displays (during the season, it shows the scores in each week's games).

Also, I'm still working on the left sidebar. I know it's royally screwed up right now.

Questions/brainstorming:
OK; I'm getting closer to the point where I'll have my front page reproduced in Serendipity, which will be awesome. What I'm trying to figure out now is what to do with the other pages on my site (both the ones that exist now, and possible future additions).

Like, say I decide to do a series of short articles about each player who has ever started at quarterback (QB) for each of these football teams. There's probably at least 75 of these players, all told, so that could certainly keep me busy for some time.

But let's imagine that I complete the QB articles. In its final form, there should be a page somewhere that lists all of the QBs for each team, with links to the articles, so a person can browse through them all.

But until then, I want people to be aware of the articles as I put them up, and to be able to share their comments on each QB. (It would be neat if people could still comment on the final pages after they were all done, too.)

My question, then, is what method should I use to put up pages like this?

1. Make each page a normal blog post, and give them a category "QUARTERBACKS" so that it's easy to generate a list of them. (Problem: the list would probably be in the order I decide to write them, not in any historically significant order.)

2. Make each page a static HTML page in Serendipity, but include a summary post that will be displayed on the front page to alert people about the new addition. (Question: If people left comments, would they go with the static page or just the summary?)

3. Add each page to my site in HTML by FTP, just as I've been doing, and make a blog post including the link to it to let people know each time I add something new.

Which one of the above three options (or something not on the list) would you recommend for this purpose?

I hope my question makes sense to you; as always, I will be happy to try to clarify my scattered thoughts if you have any questions. Thanks for the help!

The advantages of making the articles as blog entries are: automatically shown on the front page, formatted like the rest of the site, comments, and automatic availability for cross-linking from other blogs (good for search engine rankings).

I like those advantages a lot.

I'm also big on hierarchical structures, although I'm starting to shy away from that, recently. I'd probably have a category for "articles", under which would be a category for "quarterbacks".

If you're considering making it a reference (as opposed to a memoir or something), I'd actually make the categories reflect that: reference->team->quarterbacks.

While this will arrange them in the order you enter them, you have a few options to remedy that. You can enter them in the correct order; you can modify the category to display ascending or descending; you can create a sticky "index" post that has links to all the other posts in the correct order, and mark it "not shown on front page"; you can install the Properties/Templates of Categories plugin and make a custom template for the categories in question that retrieves the entries directly; you could even make a static page that references the other posts and make it the display page for the category.

I use the stick index post, myself. You can see an example on my blog in the "Electric Car" tab.

Hello; I'm back again after a long time of being too busy to do much work on my site. I hope you don't mind me resurrecting this thread once again.

I have a question about using the HTML Nugget In Head plugin-- I'm trying to see if I can use that to more easily change the text on the JavaScript ticker.

Is there a tag somewhere in the TPL file or elswhere that determines where the contents of the HTML Nugget will show up within the header of the page, or is it just always put at the very top of the page?

If it's the latter, then to keep my current layout, I'll have to put everything that's currently in the header in the Nugget. But really, the only thing I'm going to need to change regularly is the ticker itself. Is there any way to put some HTML (for the buttons) before the HTML Nugget?

Feel free to let me know if I'm just going about this wrong.

Update: My goal is to find a convenient way of changing the text that's displayed in the ticker. Right now, the only way I have of doing this is editing index.tpl, which is obviously not ideal.

The problem I've found is that the HTML Nugget in Head plugin only seems to give me the option of putting HTML at the very top of the page, and I want the ticker to appear below the header with the row of team buttons at the top.

I have managed to put the code for the ticker into the "serendipity_below_header" tag, which seems to have its advantages, since I think that means the ticker won't appear on other pages-- just the front. The only problem is that there doesn't seem to be a plugin for putting an HTML nugget in there!

I'll let you know if I figure something out, but feel free to chime in if you have an idea.

I can't find what you based your template on, so I don't know if the serendipity_below_header div will appear on pages other than the front page. It sounds like it would, but you've got a bit of an odd setup, with (it seems) mostly static pages accessed from a front page blog.

Looking at your page's source, it seems that you've got a table where one of the cells has a DIV that gets scrolled by a JS. I'm assuming the div is discovered by its id, "TICKER".

This looks like a job for the HTML Nugget on Page plugin (serendipity_event_page_nugget)!

I tested it by installing the plugin, setting it to "top of the content", no markup transformations (very important!) and "overview page only". Then I copied your <div> in. It showed up on my sandbox, scrolling.

To edit the text, all you have to do is configure the Nugget.

The only problem I can see for you is that this is the top of the content, not the just-below of the banner. Of course, you could manipulate your template to make it look the same, I suppose. But that's for a later post.

We might also be able to do something with the Markup: Include entry data/templates/blocks plugins. But once again, that's only if you don't like the Nugget on Page results.

How about a template option that you can access from manage styles? Then you could provide a field for your template into which you insert whatever code you want.

First, your template appears to be a derivative of carl_contest, which you have placed into templates/afc_north0, and then edited.

Assuming you have not already created one, you will need a text file named config.inc.php. At minumum, this is what that file might look like:
Now, in index.tpl, you can emit that code (or even the whole div containing it) with something like this:
So, the "if" condition requires your template option to be something other than blank, and it also requires the page view to be your true front page.

You could also write everything into index.tpl about that code that comes before and after your <span>'s that contain the actual changing code, making the ticker_code just the span stuff.

I have not tested this.... and my brain is a bit fried, but I think it should work.