after upgrading a CMS, i have the problem, that of thousands articles with images, the caption of the image does not shown below the image.
For Example:
<img src="123.jpg" alt="Texttext" class="caption" style="display: block; margin-left: auto; margin-right: auto;" title="Title + Copyright">
What can i do, that the title will be displayed as caption below the image?
I have already lot of articles with such images codes and class=caption. So it is not possible, to change the html codes.
But it should be possible to add a CSS, that that caption will be displayed under the image?
Example: https://www.hdsports.at/laufkalender-international
i tried to add a css Code, but without success.
as far as I know, that is impossible using CSS.
if you can't edit the source code, maybe try injecting some javascript code
anyway, here is a code example of putting every title attribute of an image below it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>put title attribute as caption</title>
</head>
<body>
<img src="https://picsum.photos/200/300" class= "caption" title="sample title 1">
<img src="https://picsum.photos/200/300" class= "caption" title="sample title 2">
<img src="https://picsum.photos/200/300" class= "caption" title="sample title 3">
<img src="https://picsum.photos/200/300" class= "caption" title="sample title 4">
</body>
<script>
// get all images that have caption class
const images = document.getElementsByClassName('caption')
Object.keys(images).forEach((key) => {
// create paragraph HTML tag. it might be span, div, lists and etc.
let caption = document.createElement('p');
// here, we put the title attribute content into a new element we just created
caption.textContent = images[key]['title'];
// and finally, we add the caption after each image
images[key].after(caption);
})
</script>
</html>
Try this on JSFiddle
Important: This way you may have SEO issues. Google crawlers may not be able to see the captions you just created.
Related
How do I make my Bokeh plot show up to the right of some content?
I have a template where an image is correctly positioned relative to the other content. When I replace that image with the div provided by bokeh.embed.components it over-writes other content in the resulting html.
What I want is to replace the placeholder US map image below with a Bokeh plot
What I get is that the Bokeh plot overwrites the content on the left
Generating Script
import bokeh.plotting as blt
import bokeh.embed
import bokeh.resources
import jinja2
loader = jinja2.FileSystemLoader('.')
jenv = jinja2.Environment(line_statement_prefix='#', loader=loader)
t = jenv.get_template('bokeh_jinja.html')
blt.output_file('problem.html')
p = blt.figure(title='Problem Demonstration',
x_range=[0.0, 10.0], y_range=[0.0, 10.0])
p.circle(1.0, 1.0)
#blt.show(p)
(script, div) = bokeh.embed.components(p)
with open('tmp.html', 'w') as ouf:
# #ouf.write(t.render(bokeh_script='', bokeh_div="Hello World"))
h = t.render(bokeh_script=script, bokeh_div=div, handedness='Right')
ouf.write(h)
Template File
bokeh_jinja.html
<!DOCTYPE html>
<html lang="en">
<head>
<title> Layout Test 1 </title>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.summary-info {
float: left;
width: 30%;
}
</style>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
{{bokeh_script}}
</head>
<body>
<div class="summary-info">
<div class="image-dec">
{% for image in images %}
<img src={{image}} alt="Image Not Found" height=256>
{% endfor %}
</div>
<div class="stats-block">
<dl>
<dt>Name:</dt><dd> {{name}}</dd>
<dt>Position:</dt><dd> {{position}} </dd>
<dt>Hand:</dt><dd> {{handedness}}</dd>
<dt>Hometown:</dt><dd> {{hometown}}</dd>
<dt>ML Teams:</dt><dd>{{teams|join(', ')}}</dd>
</dl>
</div>
</div>
<div class="map">
{{bokeh_div}}
<!-- If I edit the resulting HTML and replace the bokeh generated div with
this image, I get the kind of results I want
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_%28states_only%29.svg"
alt="Map Not Found" height=512>
-->
</div>
</body>
</html>
The key missing parameter was setting display: flex; in the container holding the elements. Though this might bad style, I just set it as a parameter for the body, i.e. a section
body {
display: flex;
}
in the CSS.
I am new to CSS and html and I was wondering if you could help me.
I am trying to make a page where people can go to my website and shop on any platform they want. I have managed to create the page in html but I couldn't get the four image (square) if you want to call it that... centered on the page.
Here is the HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content= "width = device-width. initial-scale= 1"
<!-- Links to other files -->
<!-- Default Location -->
<base href= "http//home/makenna/Documents/Amazon Docs/Kittiesnmore Web Files"/>
<!-- Links to CSS Stylesheets -->
<link rel="CSS Stylesheet" type "text/css"href="sellpagestylesheet1.css"> <!-- This is the main style sheet -->
<title> Shop with us on your Favorite E-retailer's Website </title>
<body>
<div>
<h3> Shop with us on your favorite shopping platform! </h3>
</div>
< id= "all pics">
<a href= "http://kittiesnmore.com/index.php/shop/">
<img src="https://imgur.com/DTEzmL3.jpg" alt= "Shop on our Site" style= "width:500px; height:500px; border:5x; bordercolor:4C4646; align:center; bordercolor:00008B;" id= "kittiesnmoreLogo" >
</a>
<a href= "https://www.amazon.com/s?marketplaceID=ATVPDKIKX0DER&me=A3O390GOKHZKJR&merchant=A3O390GOKHZKJR&redirect=true">
<img src="https://imgur.com/Icu5jwn.jpg" alt="Shop our Amazon Inventory" style=" height=500px; width: 500px; height: 500 px; border: 5px;" id= "amazonLogo">
</a>
<p id="secondRow">
<a href= "http://www.ebay.com/sch/makennher-0/m.html?item=152544640003&rt=nc&_trksid=p2047675.l2562">
<img src="https://imgur.com/hNBGJwg.jpg" alt= "Shop our Ebay Inventory" style="width:500 px; height:500px; border: 5px;" id= "ebayLogo">
</a>
<a href= "https://kittiesnmore.myshopify.com/">
<img src="https://imgur.com/o1zeKZF.jpg" alt="Shop on our Shopify Store" style= "height:500px; width:500px; border:5px;" id="shopifyLogo">
</a>
</p>
Here si the CSS
<head>
<style>
#firstRow.kittiesnmoreLogo{
*{font-family: "Arial Black" Gadget, sans-serif;}
.website{ padding 10px 10px 10px 10px
}
I would like to know the best way to target the images I have created in order to do the above, any improvements I should make to the way I have included them, or if there's something awfully terribly wrong.
Also I do apologize if my code is formatted incorrectly for this website, I am not really familiar with how to make code blocks >.<
Which software you use for coding, In your code it has too much syntax errors. first correct all off them, Then try using this,
#menu {
max-width: 700px;
text-align: center;
margin: auto;
}
#menu img {
width: 150px;
}
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png">
</div>
Anyone know why the first image link wants to expands from the center of the page and not from center of the image when body margin is set to 0px? The second image always expands correctly from the center of the image no matter if set to 0px or not. Setting the margin to just 1px will force the first image to expand correctly.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
<script type="text/javascript" src="/highslide/highslide-with-html.js"></script>
</head>
<body style="margin:0px;">
<a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
<a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
</body>
</html>
This was similar but I still can't figure it out.
Highslide: Issues re-shrinking image
As it turns out any image fails when directly next to body margin 0px.
Workaround is to place image or container 1px or more away.
Can't tell you why it's happening, but if it doesn't louse up something else you're trying to do, one workaround is to wrap the thumbnails in a div and put at least a one-pixel margin on that div:
<body style="margin:0px;">
<div style="margin:1px;">
<a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
<a class="highslide" href="/full.png" onclick="return hs.expand(this)"><img src="/thumb.png"></a>
</div>
</body>
A little unsure on when to start a new context in BEM.
Should all child elements always reference the block element?
For e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bem</title>
</head>
<body>
<div class="header">
<div class="header__left">
<!-- Left column content -->
</div>
<div class="header__search">
<!-- Should this be attached to the header? Or a new context <div class="search"> as it can be used elsewhere on the site? -->
</div>
</div>
</body>
</html>
Here the search is inside the 'header' div but should we really attach it to the header as this could be used elsewhere on the site?
Do you have new blocks inside blocks?
Cheers
It's my understanding there isn't any problem with blocks overlapping, as long as the css being used to target each block is discreet and separate. So, the search styling shouldn't depend on the header styling if it's usable in other places. Similarly, the header styling doesn't need to go any further down once it loses relevance to its children.
Would something like this work; does that make sense?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bem</title>
</head>
<body>
<div class="header">
<div class="header__left">
<!-- Left column content -->
</div>
<div class="header__right">
<div class="search">
<input class="search__input>
<button class="search__button>GO!</button>
</div>
</div>
</div>
</body>
</html>
There is a missing end quote on the search__button element, but stack overflow is so rigid with its edit criteria it wont let me edit it.
I'm creating a web but having trouble with the alignment of divs. Cant fix this problem for a day now.
How do I force align the image(the text image)? It's inside the div.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" charset="utf-8;" content="text/html" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<
And force the lower div to stay put when window resized or zoomed in/out.
If you seriously want to use a "text image" as a regular image, why not use it in a style sheet? So right now you have it in a div, so make that div a class or id like and make a style sheet where you have that image as a background image. Then you can use the position tactic to put the image wherever you want.
HTML:
<body>
<div class="textimage">
</div>
</body>
CSS:
.textimage{
width:500px;
height:500px;
background-image: url('..whatever.gif');
background-position: 50px 50px; //the first coordinate moves the image left to right // while the second coordinate moves it up and down
}
Try it
<div style="text-align: center">
<img style="width: 960px;" src="images/about us img.jpg"></img>
<div style="text-align: center">
<img src="images/about-cti.jpg"></img>
<br />ABOUT CTI
</div>
</div>
first issue is don't add specific margin like "margin-right:300px" when you want it to be resized or zoomed in/out.
and second issue is adding "float:right" to the image.
the below changes to the code will solve your problem.
<div style="width: 960px; margin:0 auto;" align="left">
<p>
<span style="float:left">
<br>
ABOUT CTI
</span>
<img src="images/about-cti.jpg"/>
</p>
</div>