While Safari and Google Chrome don't mind, Firefox might not like to show your .tiff file. Avoid using .tiff files and instead use
.jpg
.gif
and
.png
filetypes. Firefox seems to digest these just fine. Don't be fooled by the fact that you can indeed upload a .tiff file while using Wordpress in Firefox. When you get to the site, your image won't be there!
Monday, September 5, 2011
DFC custom notes: developing on a subdirectory, hosting on a root
I recently added files to the root of a host site that helps to direct my root web address to the subdirectory folder where I developed it. This is an easy process and takes about a half hour to do.
Visit the Wordpress codex and you'll find this advice. For my own transfer I started at step 7 of this instructional page:
http://codex.wordpress.org/
below)
"You’ll now have to log in at
http://mydomain.com/
will be in control of the root just as if that were its actual
location. Once you have installed WordPress and logged in to the Admin
area, go to Settings > General and ensure that the settings for your
WordPress address (URL) points to
http://mydomain.com/
points to http://mydomain.com/. "
Visit the Wordpress codex and you'll find this advice. For my own transfer I started at step 7 of this instructional page:
http://codex.wordpress.org/
Then I came back and followed the advice of Wordpress guru Chris Coyier, from his nifty
book Digging Into Wordpress:(he is using "blackmothsuperrainbow" as his subdirectory, cuz he's
awesome, so substitute "wordpress" for "blackmothsuperrainbow" in thebelow)
"You’ll now have to log in at
http://mydomain.com/
will be in control of the root just as if that were its actual
location. Once you have installed WordPress and logged in to the Admin
area, go to Settings > General and ensure that the settings for your
WordPress address (URL) points to
http://mydomain.com/
points to http://mydomain.com/. "
Now visit your site--- and Wordpress is neatly tucked away. Check all of your links as certain plugins can cause make this switch over read a few links in a different way ( I'm not sure why). When I changed my website I had to update two links. Other than that the switch was a breeze!
DFC: templates for Navigation options
There are several options you can use for navigation in your site. You can find descriptions of these and images of what they look like in the "Pages" section of your dashboard. Look under the "Pages" section and click on "All Pages" . Now look for pages that are called "Template #......." These are unpublished "draft" entries that only the owner of the site can see when they are in the dashboard.
Each template has an image of what a navigation model would look like. There are instructions on how you can use each model and suggestions as to how a couple models could be combined if desired. The model that is used on your site ( the requested model called "big button link") is also there so that if you change the style but want to revert to the old style you can. The requested model is labeled as "Template #5 Navigation: Big Button Link".
Out of all of the models the least complex is "Template #2: Exposed menu". This Template requires one change and to add a new image the owner to the site need only create a new page or post for the material.
The second most simple model is the "The Fake Sidebar" model . This model pushes the video right and leaves "prev" and "next" arrows below left. A menu for the three sections of the portfolio goes right. In the model I've provided there is room to expand the size of the video. The alignment of the arrows can be adjusted by changing the margin of the left most arrow. Remove the arrows and you will have jut a sidebar model for navigation that does not need to be updated when you add a new image.
The most manual is "Template #3: Arrows and Growing Menu". Template #3 is also the most transparent model as the code used to create it is very simple; that is to say it is the slow but steady way.
Remember that with all models you will need to add a thumbnail to the main pages of films, commercials, and showreels that links back to the new individual page you create for your content.
Above: Navigation option #4: fake sidebar
Each template has an image of what a navigation model would look like. There are instructions on how you can use each model and suggestions as to how a couple models could be combined if desired. The model that is used on your site ( the requested model called "big button link") is also there so that if you change the style but want to revert to the old style you can. The requested model is labeled as "Template #5 Navigation: Big Button Link".
Out of all of the models the least complex is "Template #2: Exposed menu". This Template requires one change and to add a new image the owner to the site need only create a new page or post for the material.
The second most simple model is the "The Fake Sidebar" model . This model pushes the video right and leaves "prev" and "next" arrows below left. A menu for the three sections of the portfolio goes right. In the model I've provided there is room to expand the size of the video. The alignment of the arrows can be adjusted by changing the margin of the left most arrow. Remove the arrows and you will have jut a sidebar model for navigation that does not need to be updated when you add a new image.
The most manual is "Template #3: Arrows and Growing Menu". Template #3 is also the most transparent model as the code used to create it is very simple; that is to say it is the slow but steady way.
Remember that with all models you will need to add a thumbnail to the main pages of films, commercials, and showreels that links back to the new individual page you create for your content.
Above: Navigation #1: text and image
Above: Navigation #2: Exposed menu
Above: Navigation option #3: the All Image option
Above: Navigation option #5: the Big Button Link w/ all thumbs
at bottom as one, big button. This is the design requested for the site.
Sunday, September 4, 2011
DFC Custom Notes: Some basic html
As you go through your DFC site you'll see some basic html. It will be helpful if you can start to recognize what some of these mean and here's a bits of code you'll see very often. Go into any post or page and click in the "html" tag to see the code that shapes some of your site.
<p></p>
...That open and closes a paragraph.
You'll see this for basic text that appears in a site: <p> hello there! I am your site!</p>
<h2></h2>
...Any tag that has "h" and a number is a bit of text that will appear with a variation in size. The "h" stands for heading and the number stands for a size. The lower the number the bigger the size!
<iframe></iframe>
...These tags surround Vimeo content.
<p style="text-align: center;"> stuff stuff stuff</p>
...You can "style" text in a variety of ways. Most of the time I'm styling text by aligning it, though there are many things you can do to text with this tag.
<a href= "http://site.com></a>
...<a> stands for "anchor" > Anytime you see "<a href=" used you are looking at code that's pointing to a link. Below is an example of a link that has a lot of extras thrown in. The link below specifies a title for the link (that will appear on mouse over), tells that an image is what's being used in the link, tells where the image comes from in the host directory, and tells how large the image is. Wheh... lots of info in there....
<a title="ZEN ESTILO" href="http://digitalfilmcolorist.com/123-2/"><img class="alignleft size-medium wp-image-19" title="ZEN ESTILO" src="http://digitalfilmcolorist.com/wordpress/wp-content/uploads/2011/08/ZEN-ESTILO-300x225.jpg" alt="" width="180" height="136" /></a>
There's a really great source for learning about html and css called W3schools.com
This is a free site and even if you don't go through it in great details it can be used as a quick reference for you to understand what a bit of code is doing in your site. Just cut and paste a sample of code from your site into the W3schools search box!
<p></p>
...That open and closes a paragraph.
You'll see this for basic text that appears in a site: <p> hello there! I am your site!</p>
<h2></h2>
...Any tag that has "h" and a number is a bit of text that will appear with a variation in size. The "h" stands for heading and the number stands for a size. The lower the number the bigger the size!
<iframe></iframe>
...These tags surround Vimeo content.
<p style="text-align: center;"> stuff stuff stuff</p>
...You can "style" text in a variety of ways. Most of the time I'm styling text by aligning it, though there are many things you can do to text with this tag.
<a href= "http://site.com></a>
...<a> stands for "anchor" > Anytime you see "<a href=" used you are looking at code that's pointing to a link. Below is an example of a link that has a lot of extras thrown in. The link below specifies a title for the link (that will appear on mouse over), tells that an image is what's being used in the link, tells where the image comes from in the host directory, and tells how large the image is. Wheh... lots of info in there....
<a title="ZEN ESTILO" href="http://digitalfilmcolorist.com/123-2/"><img class="alignleft size-medium wp-image-19" title="ZEN ESTILO" src="http://digitalfilmcolorist.com/wordpress/wp-content/uploads/2011/08/ZEN-ESTILO-300x225.jpg" alt="" width="180" height="136" /></a>
There's a really great source for learning about html and css called W3schools.com
This is a free site and even if you don't go through it in great details it can be used as a quick reference for you to understand what a bit of code is doing in your site. Just cut and paste a sample of code from your site into the W3schools search box!
DFC custom notes: site structure
In Building the DFC site the Fullscreen them Graph Paper Press Template I used posed some pretty interesting dilemmas...
First of all the home page or landing page rules the site. That's core to understanding the site because all organization bows the the restrictions imposed by this home pages which pulls images for display. It;s the first thing a visitor to the site sees so in this case, this page gets to be the big boss.
If you look at the home screen you will see two sets of thumbnails. At top are movie thumbnails, and at bottom are post thumbnails. This segregation of "page" and "post" images feeding into each area allows me to add images and updates to each location and have some sway over where the images go. Generically this template pulls images from only posts.
The second factor about the home page that has influenced the organization of the site is that the images on the home page appear in order from most rest to last. That means if you put up an image it will pop up on the home page. But what if you don't want the new image on the home page? The nice part is that pages and posts are easy to organize by editing publish dates and in some cases using plugins to order pages.
For more info about how I ordered pages ( with the home page in mind all the while) see the post in this blog posts titled:
Adding order to posts in Wordpress
and
Organizing pages via Wordpress plugin
First of all the home page or landing page rules the site. That's core to understanding the site because all organization bows the the restrictions imposed by this home pages which pulls images for display. It;s the first thing a visitor to the site sees so in this case, this page gets to be the big boss.
If you look at the home screen you will see two sets of thumbnails. At top are movie thumbnails, and at bottom are post thumbnails. This segregation of "page" and "post" images feeding into each area allows me to add images and updates to each location and have some sway over where the images go. Generically this template pulls images from only posts.
The second factor about the home page that has influenced the organization of the site is that the images on the home page appear in order from most rest to last. That means if you put up an image it will pop up on the home page. But what if you don't want the new image on the home page? The nice part is that pages and posts are easy to organize by editing publish dates and in some cases using plugins to order pages.
For more info about how I ordered pages ( with the home page in mind all the while) see the post in this blog posts titled:
Adding order to posts in Wordpress
and
Organizing pages via Wordpress plugin
Thursday, September 1, 2011
Scale Images Wordpress: scaling images after upload
When I start building a site I usually rush to put up content. Its something like the feeling of a canvas being easier to work on after you've added that first dab of paint: the void is just a little too much to tackle on a whole and too much planning before you start can start to build anxiety or uncertainty around the actual beginning!
So that being said- I often upload images at a large scale and understand afterwards what the the realistic scale I'll need to use them at actually is. You'll be glad to know that Wordpress has planned for this sort of behavior.
Go into your dashboard and go to the "Media" section. Under "Media" select library and find all of your images noted here. Hover over the image title and select "Edit" from the menu that appears below.
Once you are in the screen where you can edit your image look to the left and see "Scale Image". Select "Scale Image" and the panel will expand.
After loading my images of all sizes I realized the largest dimension any image would need in the site was 300px. I've gone back through my site and made 300px the cut off dimension for all of my images--- some images even have a cut off of 180px.
Scaling images in this way optimizes your site-- this means a page that shows an image at 100px by 100px doesn't spend time processing a much larger image and then scaling it down. The end result is a site where pages load as quickly as possible!
Go into your dashboard and go to the "Media" section. Under "Media" select library and find all of your images noted here. Hover over the image title and select "Edit" from the menu that appears below.
Scaling images in this way optimizes your site-- this means a page that shows an image at 100px by 100px doesn't spend time processing a much larger image and then scaling it down. The end result is a site where pages load as quickly as possible!
Sorting Images in Wordpress Media Library
A Wordpress media library can easily become muddled-- you may load more than one version of an image and only remember this later when you go to alter that image and have a hard time finding it. Another dilemma you may run across is that if you make the image titles something funny and distinct, when you mouse over the image you see this weird title pop up on your website or blog.
The solution to this is very simple and one that's easily overlooked. When you are in your dashboard look under the "Media" category and go into your"Library" here you see all the images and icons you've ever loaded.
Simple select "edit" in the menu that pops up when you hover over a title. This should pull up all the info for that image. Here you'll see the title to the image but look below to the catagory called "Alternate Text". This is the are where you can put the actual name you want a visitor to your site to see when they mouse over your image. Use the main title for your own purposes if you need to. You can keep the original title hidden and use it for indexing.
Also note that when you are viewing all images in the media library if you look across the categories of information you will see one called "attached to" and this will tell you where the image is currently being used in your site or the "Location of the uploaded file."
Also note that when you are viewing all images in the media library if you look across the categories of information you will see one called "attached to" and this will tell you where the image is currently being used in your site or the "Location of the uploaded file."
A tricky thing here to note is that if you load an image and then remove it form the site afterwards but want to keep in in the Media Library the file will still be noted as located in the page you originally upload it to. Hence my interest in using titles as labels!
Subscribe to:
Posts (Atom)