I'm trying to add a picture in a blogger template.
With the HTML tag.
<img src="img_avatar.png" alt="Avatar">
But it's not loading the image.
I'm trying to put it in the direct code.
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-12 col-md-3 col-lg-3' id='sidebar'>
<b:section class='header-section' id='header-section' maxwidgets='0' showaddelement='no'>
<img src="picture goes here" alt="Avatar"/>
<b:widget id='Header1' locked='true' title='Blogs name (Cabeçalho)' type='Header' version='1'>
<b:widget-settings>
<b:widget-setting name='displayUrl'/>
<b:widget-setting name='displayHeight'>0</b:widget-setting>
<b:widget-setting name='sectionWidth'>22</b:widget-setting>
<b:widget-setting name='useImage'>false</b:widget-setting>
<b:widget-setting name='shrinkToFit'>false</b:widget-setting>
<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
<b:widget-setting name='displayWidth'>0</b:widget-setting>
</b:widget-settings>
I wanna to insert the picture in this space with a different color:
But its not loading the picture...
Thanks a lot
The Blogger tag <b:section ... can only contain <b:widget ...
To insert your image upload it directly in Header widget or use an image widget.
Also, you can insert the image code within the widget tag <b:includable id='main'>
Related
Ok, so here is what I am trying to do:
- I am building a portfolio slider that shows images for all of my projects.
- Each project has multiple images that I would like to show on its own slide.
- For example, after you slide through project 1's images (each on their own slide), the next slide will start with project 2's first image and so on.
- I can do this the long way, but I am trying to group my projects into their own objects, including their name, the client it was for and the images associated to that project.
- My end goal is to have an organized object, but all the images are gathered and shown in the slider one after the other. When a new project's image is shown, I also would like to know which project object I am on so I can get the project name, index and client it was for, so that I can change info on the page.
- I hope this is not too confusing.
Here is what I have right now for the object
JS:
mainApp.controller("mainController", function($scope) {
$scope.portfolio = [
{name:'Portfolio 1', image:['images/test_1a.png','images/test_1b.png','images/test_1c.png'], client:'Client 1'},
{name:'Portfolio 2', image:['images/test_2a.png','images/test_2b.png'], client:'Client 2'},
{name:'Portfolio 3', image:['images/test_3a.png','images/test_3b.png','images/test_3c.png'], client:'Client 3'}
];
});
This is what I was starting to try when I got stuck. Obviously, this is not what I need, but it let's you see where I am trying to go.
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide -->
<div ng-repeat="work in portfolio">
<div class="swiper-slide" ng-repeat="img in work.image">
<!-- image -->
<img class="full_width" src="{{ img }}" alt="">
</div>
</div>
</div>
</div>
Any and all help it super appreciated!
You're nearly there.. Your issue is using src instead of ng-src.
Try:
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- slide -->
<div ng-repeat="work in portfolio">
<div class="swiper-slide" ng-repeat="img in work.image">
<!-- image -->
<img class="full_width" ng-src="{{ img }}" alt="">
</div>
</div>
</div>
</div>
I followed the answers to try to achieve a similar look to be found here www.thexxcorporation.com
The first header is using a shortcode (its a Wordpress site).
My problem is that the shortcodes don't reflect their actual styling setting, therefore, I'm trying to reproduce the look, but with my own sizes, images etc.
I've tried this:
h1:after
{
background:url(image path);/* apply your image here */
background-repeat:repeat-x;
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}
This, almost works, but has a problem. The style relates to headers that are with a content div. My other hears fit within the div fine (100% of the width of the div).
The above code results in the background image overflowing outside the content div it sits within.
So, how do I constrain it to the width of the div it sits within?
My page code looks like this:
<div id="main-content" class="clearfix">
<header id="page-heading">
<div class="boxed">
<h1>Test</h1>
</div><!-- /boxed -->
</header><!-- /page-heading -->
<div id="home-content" class="clearfix boxed container">
<article id="post" class="clearfix">
<div class="entry clearfix fitvids">
<h1>Test page for H1</h1>
</div><!-- .entry .clearfix -->
</article><!-- #post -->
<aside id="sidebar">
</aside><!-- /sidebar --></div><!-- #home-content -->
<div class="clear"></div>
The containing divs are set with position:relative.
If I add position:relative to the h1:after - the background image disappears.
slightly baffled.
Cheers,
Mike
the div it sits within should in relative position. add this style to the div
position:relative;
and the h1::after should have 100 percent width - don't use em. change the width to
width:100%;
hope this helps
cheers
I am using twitter bootstrap.
<img id="profileImage"
data-src="holder.js/300x200" src="${picurls}">
Now the problem is when i upload a image the img area changes to the uploaded image size.
I want a fix image area and every image showld adjust within that box.
There is something wrong in it, please try following block of code
Add line into your img tag.
style="width: 300px; height: 200px;
<ul class="thumbnails">
<li class="span4">
<img id="profileImage" data-src="holder.js/300x200" src="${picurls}">
</li>
...
</ul>
Twitter bootstrap uses the 12 columns grid, so the span4 is telling that the image has 4/12 of the width of the page (or the container it's in).
I'm using Jasny Bootstrap Fileupload and is working for the first submit. The problem: after a first submit working ok, the image preview doesn't work anymore.
Steps to reproduce:
1. Select a photo. The photo is showed (img src="data:image/jpeg;base64... is created inside #fileupload-preview)
2. Submit the form. The photo is uploaded ok
3. Reset the form. No photo is showed.
4. Select a photo. The photo is not showed <= ERROR (nothing inside #fileupload-preview)
5. Submit the form. The photo is uploaded ok
To simulate it with JSFiddle you can:
1. Choose a photo
2. Click 'save'
3. Choose another photo. Error....
JSFiddle example
Relevant jasny fileupload code:
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file">
<span class="fileupload-new">Choose a photo</span>
<span class="fileupload-exists">Change</span>
<input type="file" name="foto" id="foto" />
</span>
Delete
</div>
</div>
Thanks
The problem isn't in the reset. Instead the $.ajaxFileUpload breaks the widget. You can submit a bug for both the Jasny Bootstrap and ajaxFileUpload library.
However perhaps it's easier to resort to another library to upload the form like http://jquery.malsup.com/form/
I have an image gallery on my site that uses thumbnails that enlarge above the thumbnail line when clicked on. I'm having an issue with the auto-refresh; every time I click one of the thumbnails, the page refreshes, which restores it to the "master image".
I'm not (and sort of refuse, on the grounds that I believe all this can be done with simple CSS and HTML) using anything fancy to write this code, despite my knowledge of HTML being amateur at best.
Here's a sample of the code. Let me know if you need to see a different piece of it.
<div id="rightcol">
<img name="ImageOnly. src='#' /><img src="#" />
</div>
<div id="leftcol"> <div>
<a href="" onclick="ImageOnly.src='#'"><img src="#" />
</div>
Edit: Somehow I seem to have fixed this issue by changing
<a href="" onclick="ImageOnly.src='#'">
to
<a href="#" onclick="ImageOnly.src='#'">
Not really sure why this worked but would love an explanation...?
Why not just use some simple ajax/javascript .innerHTML? instead of trying to stop the auto refresh that occurs when you click on a hyperlink that has #. That way you could update the rightcol synchroniously.
HTML
<div id="rightcol">
<img name="ImageOnly.src" src='#' />
</div>
<div id="leftcol">
<img src="#" />
</div>
AJAX Script
function ajaxMove(src)
{
var image = '<img src="'+src+'" alt="my transferred image" />';
document.getElementById('rightcol').innerHTML = image;
}
How is it used?
Request the object from the onclick event.
Build an image tag based off the information in the object.
Transfer the new image tag to the element with the id 'rightcol'
Other options
You could also remove the href="#" from the <a> tag and work directly from the onclick event and then apply style="cursor:pointer;". Then it will work like a regular hyperlink but without the refresh.
<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>