As described in the Syntax Reference of Kramdown, we can set the height and width size of the image, like the below:
Here is an inline {:height="36px" width="36px"}.
But how can I set the location of the image, like set align=center?
align=center is deprecated. Now you'd better use CSS.
In order to accomplish this, you need to put your image in a html block element.
Your code can be :
<div class="img_container">
{: height="36px" width="36px"}
</div>
In your css, add :
.img_container{
text-align: center;
}
And, in order to instruct kramdown to parse inside block html elements, in _config.yml, add :
kramdown:
parse_block_html: true
Your image is now centered in its parent block.
Related
I'd like to define the appearance of my images inside the section (I'm trying to add a border to the image - but I can't reference the image directly because the images are added dynamically - as content of blog posts.)
Can you advise me on how to do that?
Do I have to create a new section/id/div? How can I than say to the machine: In the section/id/div I created I would like you to apply these styls to the images."
?
thanks, D.
Yes you need to get a reference to the image or the block in which the images is going to be displayed. Then apply the css rules to the image or block you will then get the styles on the image. I would prefer class="" if there are many and id="" if there is only one.
If you have img inside any elements like below,
<div class="someclass">
<img src="" />
</div>
then at CSS,
.someclass{
your rules go here.
}
or if you want to directly have styles on image then you HTMl will be like below and CSS same as above.
<img class="someclass" src="" />
If content is added dynamically, styles are applied automatically as new content is added to the DOM, you don't need to worry about that. Inject the content you want, and as long as there is CSS-rules that match that content, the browser will handle the rest.
Update
I realize that I might have misunderstood your question at first. If the user is completely in control of the markup of the blog post, I guess the best way would be to use a selector, that select every image within a container that wrap each blog post.
Lets say each blog post is rendered within an element with class post. Then you could do something like this:
.post img {
border: 1px solid #000;
}
Method 1:
Traditionally I would include an image like this:
<img src="image.png" alt="image" />
And the alt attribute would be in their for 2 reasons:
Help Visitors with an image
SEO purposes. So bots and crawlers know what an image is, i.e. keywords.
Method 2:
However, if I was to include the image via a css style sheet:
HTML
<div class="image"></div>
CSS
.image {
background-image: url(images/products_partitioning.png);
}
Is there anyway to include the alt attribute via as seen in 'method 1', in 'method 2' for SEO purposes.
No.
If the image is a background image, then it would not make sense for it to have alternate content (since it is, by definition, not content).
If the image is not a background image, then it should be included via an <img> element and not CSS.
(There are hacks involving having real content in an element, then setting fixed dimensions on that element along with a background image and text-indent: -9999px, but that's ugly and unsemantic (and also the reverse of what you've asked for)).
I want to set image to anchor tag but it is not working. Can anybody tell me what is wrong?
Note: Don't pay attention to background. It is Asp.Net MVC syntax. But rest assured the image is loaded correctly. Can anybody tell me what am I doing wrong? If I type something in anchor tag it works fine. But I don't want to type anything.
You need to either set the display property to block or inline-block for the link
<a href="#" style="display:block; width:200px;height:100px; ...
Links are inline by default.
Because a link is an inline element, it can't have width and height.
Set this attribute on it:
display: inline-block;
I'd like to load images and their contents dynamically from a css file. I know I can set the background-image attribute for divs, but how can I achieve something similar for images?
You can't.
The <img> element holds content. The specifics of that content aren't something that can, or should, be described on the presentation layer.
You can set the src of the img to a transparent gif and set the background image of the img just like you would a div but that's a bit of a hack. You can change the src attribute of an image very easily using javascript:
html:
<img id="asdf" src="1.gif" />
javascript:
document.getElementById("asdf").setAttribute("src","2.gif");
I wanted to create a box that you could click on and be forwarded to "#" so I thought this would be a good idea:
But unfortuneatly areamaps couldn't be used in div or p tags :/
Anyone have an idea what a good solution would be?
This is not php related, because its happening in the navigator.
Use javascript instead :
<div style='background:url(image.jpg)' onclick='function(){document.location.replace="#"}'> </div>
You could create tags inside the div. You can give these subtags and id or you apply the style in the tag's style attribute. Set the tags style to display:block and position the link via position:absolute or position:relative and the attributes top:5px and left:5px. Set width and height and top and left appropriately.