 |
| Print, video, sounds |
|
Movable Type text, images category pages
|
 | |||||
  |
| There are several ways you can add different text and images to each of your category pages. I used the category description field for the text and images named the same as the category. Other approaches might be to use a custom field, or use the iframe element to add a chunk of HTML to the category template. Begin the suffering First, go to Entries>Categories and select a category. You will see a text box where you can write some plain text. Unfortunately this cannot be HTML, or things would be a lot easier. Write whatever you want to appear on that particular category listing page. Once you have written something in the "Description" box of all the categories you want to have this text on page you have to invoke its appearance on the page. Go to Design>Templates>Archive Templates>Category Entry Listing. Click on that and you can add the tag that will write the category description. That tag is: <div class="category-description"> <$mt:CategoryDescription$> </div> This creates a division with the name "category-description". You will use this in your stylesheet to make the text bigger or bold or space it away from the other text. When you hit the "Save and Publish" button at the bottom of the "Category Entry Listing" page, Moveable Type will co re-create all your category listing pages with the description added where ever you put it in the template. For me, I did after the headline "Recently added in the ......" headline and the |
|
| |
| <mt:Ignore><!-- Limit number of entries.... stuff that prints out all the entries. When you go to look at your new category page, be sure to hit refresh so you see the changes. The text will be the same tiny text you see everywhere else on the page. You will fix this by editing the stylesheet template in Movable Type. Advanced suffering I also wanted a picture at the top of the page, and not only that a different picture depending on the category. Since 99.94% of the internet is narcissists posting about their cats, you will have categories like "Persian," "Feral," "Siamese," and in a nod to the movie Wag the Dog, "Calico." You want the right picture for each category page, but first make sure you can put a picture in at all. Now you can add the picture as an Asset, and then use the link to that Asset in this template page we are editing, but I am more direct. First, just add an image link to the Category Entry Listing. For me, being a weirdo that does not even like cats, much less want to write about them, my image link was: <img class="category-image" src="images/Bloatware.jpg" alt="Bloatware blowfish"> Once again, you give the picture a class, so you can size the image in the Movable Type style sheet. Be aware this will put the same image in all your category pages, but lets crawl before we soar with the eagles. Hit "Save and Publish" once again. It is easy to forget this or to just hit "Save" and waste more time. |
|
| |
| The other half of this job is putting the image on your site. Since I
don't use the Asset goofiness of Movable type I just found and named an
image with the category name, in this case Bloatware.jpg. Move this to
your website host with FileZilla or some other ftp program. For me, I
have created a sub-directory under this blog called /images/. I moved
the picture there. First suffer was you don't prefix the sub-directory with a slash. So its not /images/Bloatware.jpg, its images/Bloatware.jpg. Another misery you might encounter is that Linux web hosts are case sensitive. So Bloatware.jpg is different than Bloatware.JPG or bloatware.jpg. Also watch out for jpeg, or gif, or png. Everything must be exactly the same, including Images/ is not the same as images/. Using backslashes is another way to waste a few hours of your life. OK did you remember to hit "Save and Publish" once again? Now you should be able to see that same picture on all your category pages. Be sure to hit refresh. Now lets make it and the text. Fire up your 87-dollar install of Stylizer. If you do not use this you are an idiot and you should close this page and never come back. Paste in the URL of one of your category pages into the address bar of Stylizer. Hit the space-bar. As you hover over the picture, you will see it get highlighted. Click. On the bottom of the page you will see the path of all the style rules. Click the last one, in this case, "category-image". Now right next to that is the "Make Rule" button. Hit that. Then go to the right pane, I add the rule "width = 512". You can add spacing and margins and all the image CSS you want. |
|
| |
| Do the same for the category description text on the rendered HTML page
in your Stylizer. For me I added rules to make the font bigger, and to make it bold. You can do any and all the text rules. Advanced suffering OK, gracefully and effortlessly getting the new stylesheet in Stylizer does not get it on your Movable Type. The simple way is to highlight the rules you create, or each rule one at a time. You do a copy, or <ctrl>C. Then go to your Movable Type and go Design>Templates>Stylesheet. Click into the stylesheet and paste the rule. Do that as needed, for both the text and image. Do a "Save and Publish". Now when you go look at the category pages on your browser (hit refresh) you should see the images sized and the text bolded and whatever you figured out in Stylizer. There is a way to get Stylizer to upload the changed stylesheet to your web host. You hit the little dropdown arrow on the "Save" button. It will want to save local on your computer, but you can give it an ftp location and very very carefully make sure you are sending it to overwrite the CSS file on your web host where Movable Type is installed. Here is the potential disaster of doing this. If you do go back into Moveable Type and hit "Save and Publish" on the stylesheet template, it will overwrite the new one with some old version. Everything will be lost. Welcome to suffering. |
|
| |
| Fortunately Movable Type has a fantastic feature to keep this from
happening. In your Stylesheet template file, go to the bottom to the
accordion "Template Options". Open it up. Set the field "Link to File"
to the exact same thing that is in the field "Output File". So for this
blog, my output is Suffer.css. Now put the same file into the "Link to
File" box. I am pretty sure you can just hit "Save" but why not be sure
and hit "Save and Publish". Now Movable Type will look at the css file-date and time first. So if yoru Sylizer or anything else overwrote the Movable Type-generated file, Movable Type will change its internal file to that. If you change it in Movable Type, and it sees the css file is older, it will overwrite it to what you entered in Movable Type, It is the best of both worlds. You can do the same things for the other templates, if you want to edit them on your home computer with Notepad++ and upload them to your web host. Movable Type will only overwrite an older file, and will adopt a newer file as its own so it is saved in the database. Postgraduate suffering OK, sorry to digress, but I am both OCD and ADHD. So remember we wanted a different picture for each of your cat categories. Now you change your Category Listing Entry template file to not give a single image, in my case Bloatware.jpg. Instead you use the MT code: <img class="category-image" src="images/<$mt:ArchiveTitle$>.jpg" alt="<$mt:ArchiveTitle$>"> |
|
| |
| See, now each category page will go look for an image with the same
name, the name of the category. If you have a category that does not have an image, you will see the name in simple text instead of any
image. That is because your browser is putting in the alt text since it cannot find the image. If that is a problem, just take out the
alt="<$mt:ArchiveTitle$> in the code above. All the normal misery cautions about hitting refresh, watching out for case, and making sure
you have Movable Type really publishing the stuff apply. And remember, alleviate a person's suffering for a day and you make their life better,
teach them how and you both suffer together. Suffer on. Oh, another pro tip, if you still can't see what you expect, be sure to look at the HTML source of the page. In Firefox, they have hidden that in Tools>Web Developer>Page Source. |
|
| |
This post is in these categories: |  |
  |
