I'm very new to wordpress but my understanding is that the post is just one big article. you can insert images between paragraphs of text, but the flow will always be text, image, another paragraph, image etc.
I would like to use it for tutorials, and the layout I have in mind is to display every step as an image, with text on the left.
I know I can probably achieve this using images with legend and displaying the legend to the left. I was wondering though if there was a way to use the post (eg. the article itself) in this way?
Related
I have a site with a number of written documents that are rendered as images. If I wanted to make them accessible to visually impaired people, it would seem that I would need to add the text somewhere.
Each document is rendered as a series of images, one for each page (see this, for example). Would I want to each page's text into its corresponding image's alt attribute, or is there a better way to do it? And, if the alt attribute is the way to go, can I put the entire document in the image for the first page, or is it best to have the text in each attribute correspond exactly to the image it's in?
I would not use the alt attribute as it is used for short descriptions only.
Making all this text accessible would mean rendering it in HTML. In your document, there are lists, there are tables, there are definition lists ; all this needs to be semantically described via HTML so that it is accessible. You would not be able to do this via the alt attribute.
I think of multiple ways you could make this accessible:
have empty alt on all img and render all the text in HTML below the last image. The text can be visible to all, or only to those with screen readers as you wish (via the use of specific CSS, see the "sr-only" class of Bootstrap for example). If you want the text to be visible to all without taking too much visual space, you could hide it behind a toggle button (with the aria-controls and aria-expanded attributes).
on each img, have a short alt attribute and a longdesc attribute. The alt is the title of current page, like "Table of Contents". The longdesc is a link to an HTML page having all the text on the image.
after each img, have some HTML with the text of the image. This description can be visible to screen readers users only. Link each description via the aria-describedby attribute on the image.
I'd go with the first solution, because it's generally the simplest to deal with, and it benefits all users.
Most screenreader software won’t announce an entire page’s worth of content from an alt attribute, let alone a whole document. They have different cutoff points, but alts are intended to give short (a sentence or two) descriptions of pictures rather than large quantities of paragraphs, headings, tables, etc. You can test with a free screenreader (VoiceOver for Apple devices, or NVDA for Windows) to confirm this for yourself.
A better option would be to extract the text using OCR and put it into HTML or a Word doc that uses templated styles. That way people who can’t see the text can still have it read out plus they’ll be able to use all the usual navigation shortcuts like tables of contents and headings. You can still put any charts or graphs in as images with alts, and the amount of text you’d need to describe those would be much shorter and easier to write.
I'm using the code found here to create my text links located on this page. What I am trying to accomplish is having the rollover text be the description of the link ie: 'Insight' goes to the 'About' page. Some of descriptions are too long and are getting cut off and when I try to make them bigger they just overlap the link next to it. Any suggestions on how to fix it or a better method I should be using? Here is the HTML I'm using.
<span data-title="Services">Ingenuity.</span>
Sounds like you're asking for design advice as well.
Judging by the way you have your links presented (each list item with an equal fixed width in a row), a longer description will certainly overlap other links if you do end up finding a solution to make them not "cut off" (it exists, but I'm just not sure if it'll give you a desired result that you're looking for).
Either customize the widths of each list item so they don't overlap, or use some other cool transition (i.e. have the description slide down under the link rather than flip it). That's what I would suggest personally; however, it's up to you to choose what's considered a "better method" of displaying your descriptions.
I've been playing around with WordPress. As a programmer, the media library seems a little strange to me - but I'm keen to understand how I can achieve what I need with the framework. Cue WordPress enthusiasts...
I need to force my WordPress post images to be a certain size. I'm not talking about the thumbnail size, which I've found can be easily manipulated within the loop, but the images that actually get inserted into a post, amongst the writing and the other media. I have a fixed content width, and I would like the images to reflect that width (uncropped).
Obviously, I could run some sort of Regular Expression that could identify the image tags, and replace them with new sizes, but is there really no other way of forcing image sizes within the post while retaining there position amongst the formatted writing that comes with it?
So far, I'm guessing that there is a CSS property out there that is used by WordPress in all images. At a push, I'm willing to go with this - whatever it may be (answer needed). But I was hoping that their might be some more involved code (perhaps something I could plop into the functions.php file) which could actually force any inserted post images to be a certain width.
Any thoughts on this would be much appreciated.
If that's only about limiting the max width of an image and prevent an image from overflow, you could use the $content_width variable in your theme:
https://wordpress.stackexchange.com/questions/6499/how-to-create-a-conditional-content-width-for-a-wordpress-theme
I am presently working for watermarking site and I have done completely and everyting is working fine.Now I would like to add a weblink to image as watermark instead of text.
I have tried by taking a hyperlink and adding to Image but it just draws the text and dosen't add it as a URL.
Is it possible to do so?I so how can I achieve this?
This is how I tried to do it:
pth.AddString(txtLink.NavigateUrl, New FontFamily(DropFont.SelectedValue), 0, Integer.Parse(DropFontSize.SelectedValue), New Point(left, top), StringFormat.GenericTypographic)
Two approaches come to mind:
Use anchor elements - <a> around your images with the appropriate link.
Use image maps with your images.
Images are images - they don't have links embedded in them that you can click on - you need something extra in order to make them clickable.
I am new to Fireworks CS4 and keen to learn to use it right but I am having difficulty understanding the whole slicing and exporting mechanism, so that I can also use in Dreamweaver CS4.
What I have is a header banner image where I also have the name of the site to the left of this header banner.
On this same header image, I want to place two buttons (with rollover effects if possible), to the top right area of the header image, with links to another URL.
Now the things that I am unsure how to do are based on the above description are:
1) How can I make the name of the site section only, to the left of the banner as a link to a url when the user hovers over the name part only, the mouse hand turns into a pointer and gets redirected to url
2) The same goes for the two buttons that I have created as two individual symbols?
3) How can I slice the above two queries, so that I can export into Dreamweaver, so that all the required code comes across with all the desired effects, that is, when previewing in Firefox, all hovering on site name and two buttons work as required?
I am unsure how to slice it? Do I have to assign hotspots to the sections? I am unsure how to export it.
There is a slice layer in Fireworks. It is always the top layer. It lets you draw shapes over parts of your graphic, which show up in translucent green. When you click on one, you have the option of adding a URL and other parameters of a link. At that point, you have the option of exporting as sliced images, an HTML page, etc. If exported as HTML, the images will be contained in anchor tags with the URLs you gave them. Or you can just export the slices and assign the links in Dreamweaver.