I'm using Bootstrap 4.
My question is quite simple: how to put an image side by side with a text using bootstrap ?
This is my code:
<div class="card-content">
<div class="portfolio-desc">
<h3><?php echo $galleryTitle; ?></h3>
<img id="authorImg" style="border-radius: 50%; height: 36px;" src="<?php echo $author_photo; ?>" />
<span id=authorSpan"><?php echo $galleryAuthor; ?></span>
<span>Gallery: <?php echo $galleryName; ?></span>
</div>
</div>
How can I put "authorImg" side by Side with authorSpan ?
Now, each img, span etc are on new line .
Thanks
Images do not cause a line break by default, so it must be some additional css or other formatting. try removing some classes and see if that fixes the problem. If you find a class that causes the line break then add whitespace: nowrap; to that class; I tried this myself and the image was on the same line as the text so it may be some additional css you wrote.
Side note: your id does not have the first quote mark.
Related
I am building a theme and I have images displaying on the site via ACF. I am trying to get the alt text that the client enters when they upload the image. I understand that the image return format should be set to image array or ID, but not URL. Mine were set to URL quite some time ago and I am having trouble revising my code to reflect the alt text when inspected. Here is my current function that displays staff repeater.
function meetOurTeamListing() {
if(have_rows('meet_our_team')):
while(have_rows('meet_our_team')): the_row();
$staffImage = get_sub_field('staff_image');
$staffName = get_sub_field('staff_name');
$staffTitle = get_sub_field('staff_title');
$staffBio = get_sub_field('staff_bio');
$html =
'
<div class="myBtn staff-item">
<img src="'.$staffImage.'" />
<p class="staff-name">'.$staffName.'</p>
<p class="staff-title">'.$staffTitle.'</p>
</div>
<!-- The Modal -->
<div class="myModal modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="modal-header-text">
<p class="modal-name">'.$staffName.'</p>
<p class="modal-pipe">|</p>
<p class="modal-title">'.$staffTitle.'</p>
</div>
</div>
<img src="'.$staffImage.'" />
<div class="modal-body">'.$staffBio.'</div>
</div>
</div>
';
echo $html;
endwhile;
endif;
}
Obviously the sub-field would need to be converted to an image array, however simply switching the radio selector from "image url" to "image array" breaks the images on the front end. Given this context, how can I implement alt text from the WP database dynamically?
Problem solved. Thanks Nicole!
My problem was that when set up the custom fields that took images, I set them to Image URL. This is good if you just want to quickly display an image because it just returns a string. It should be set to Image Array. This results in an itemized list of key/value pairs (ie. alt text) that are accessible in the theme template.
To display your image that is set to an Image Array, here's the syntax:
<img src="'.esc_url($image['url']).'" alt="'.esc_attr($image['alt']).'" />
This works only inside of my PHP function. Alternatively, the following can be used inside a template file among the HTML:
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
I have few banners which are main categories on the website. I wish to display
title and subtitle on top of those images, and currently I am using the following structure:
<a href="#" title="">
<img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id(1) );?>" alt="xy">
<h3>
<?php $post_title = get_post_custom_values('post_title', 1);
echo $post_title[0];
?>
</h3>
<h2>
<?php $post_subtitle = get_post_custom_values('post_subtitle', 1);
echo $post_subtitle[0];
?>
</h2>
</a>
Is this a good workaround? Is this correct html usage?
Heading elements should not be used for subtitles. From the W3C:
h1–h6 elements must not be used to markup subheadings, subtitles,
alternative titles and taglines unless intended to be the heading for
a new section or subsection.
I am working on a social media network, and in my posts, I am trying to add the glyphicons found in Bootstrap 3 to the posts. Now, I have managed to the the icons on the same line as the username, but I can't work out how to get the username first, and then the glyphicons. Below is my code:
<div class="media well single-post" id="post-<?php echo $post['post_id'];?>">
<div class="avatar large pull-left">
<?php if ($this->profile_type === 'page' || $post['post_wall_profile_type'] === 'page'):?>
<a href="<?php echo $this->baseUrl()?>/<?php echo $post['post_wall_name'];?>">
<img src="<?php echo $this->GetStorageUrl('avatar') . $post['post_wall_avatar'];?>">
</a>
<?php elseif ($this->profile_type === 'feed' && $post['post_wall_profile_type'] === 'group'):?>
<a href="<?php echo $this->baseUrl()?>/<?php echo $post['post_wall_name'];?>">
<img src="<?php echo $this->GetStorageUrl('avatar') . $post['post_wall_avatar'];?>">
</a>
<?php else:?>
<div class="pull-right"><?php if (isset($post['author_meta']['badges'])):?>
<div class="network-badges vertical">
<?php echo $this->partial('/partial/badges.phtml', array('badges' => $post['author_meta']['badges']));?>
</div>
<?php endif;?><div class="pull-left"><a href="<?php echo $this->baseUrl()?>/<?php echo $post['user_name'];?>"></div></div>
<div class="pull-left"><img src="<?php echo $this->GetStorageUrl('avatar') . $post['user_avatar'];?>">
</a></div>
<?php endif;?>
</div>
Here is what it currently looks like: http://www.startrekrisa.com/Picture1.png
I know it's gonna be a simple fix, but I cannot work out how to do it.
Thanks in advance
[Edit] See this jsfiddle based on the fixed markup below and the /partial/badges.phtml code you gave in a comment; obviously your global css is not there, but you can see it properly puts the avatar left and the glyphicons to the right of it [/Edit]
The HTML you generate with that piece of code doesn't seem quite right, and considering your question only relates to html/css, it would have been better to strip your code sample down to a piece of html+css, without the php logic.
From what I can see, your question directlly concern the else part of your main logic, when the inner if is true. In that case I believe your code will generate
<div class="media well single-post" id="post-1234">
<div class="avatar large pull-left">
<div class="pull-right">
<div class="network-badges vertical">
<!-- content of /partial/badges.phtml with the user bages -->
</div>
<div class="pull-left"><a href="http://example.org/users/username"></div>
</div>
<div class="pull-left"><img src="http://example.org/avatars/username">
</a>
</div>
</div>
You can see here you have html problems:
your pull-left div is closed before the link inside is closed; the link inside is closed further on
you have a mismatch between open and close tags for your div
I believe the html you'd want would be more like
<div class="media well single-post" id="post-1234">
<div class="avatar large pull-left">
<div class="pull-right">
<div class="network-badges vertical">
<!-- content of /partial/badges.phtml with the user bages -->
</div>
</div>
<div class="pull-left">
<a href="http://example.org/users/username">
<img src="http://example.org/avatars/username">
</a>
</div>
</div>
</div>
Mixing php logic with your html like that is not terrific and will lead you to more similar problems where you end up not generating the markup you imagined.
P.S. It usually a good practice when working on the interface to first work without any logic behind and just static data, to ensure you get the markup you want and need, and then only merge this with your logic (but it's still better to have your logic separated from the ui though)
I have a small issue. I searched for relative issues but couldnt find anything.
I would like to fix this issue without Scripting if possible, and without adapting body width.
So here we go. I would like the Logo to display INSIDE the box area as it appears on Maximized Window.
Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.
I've tried playing with body width and setting it in other container. No Luck.
You can see what i mean in here:http://imageshack.us/g/43/q3qr.jpg/.
And here is the code:
http://jsfiddle.net/NCZg8/4/`
>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<img class="Logo_wrapper" src="http://pizza-bar.gr/wordpress/wp-content/uploads/2013/09/PB_Logo.png"/>
</a>
</body>`
Note: try to stretch the "Result" Window and u will see what i mean.
Ty in advance.
In order to keep the element from going out of boundaries on the right side, you should be setting the right property instead of the left.
.Logo_wrapper{
position:absolute;
top:40%;
right:5%;
z-index:10;
}
Updated fiddle: http://jsfiddle.net/NCZg8/6/
Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.
In order for the logo to appear inside the header, it's important to set position:relative on the header element. To see a more detailed explanation of relative and absolute positioning, see here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Your problem of margin can probably be fixed with css.
I have a page which brings database entries in and displays them, and i have given every other entry/listing this style:
hjl:nth-child(odd) { background: #F2F2F2;}
And this is my HTML/PHP
<a href="paging.php?job_id=<?php echo $rsjobinfo['job_id'];?>">
<div class = "hjl">
<div class = "hjldate">
<p>Posted on:<br /><?php echo $date = date('d M Y', strtotime($rsjobinfo['date']));?></p>
</div>
<div class = "hjljobinfo">
<h1><?php echo $rsjobinfo['job_title'];?></h1>
<h2><?php echo $rsjobinfo['company_name'];?> |</h2>
<p class = "location"><?php echo $rsjobinfo['city'];?>, <?php echo $rsjobinfo['county'];?>, <?php echo $rsjobinfo['country'];?></p>
</div>
</div>
</a>
However, when i try to wrap each entire entry in an anchor tag, every entry changes to the background style listed above, no longer recognising the 'odd'.
This is the HTMl that's generated:
<a href="paging.php?job_id=253">
<div class = "hjl">
<div class = "hjldate">
<p>Posted on:<br />11 Jul 2011</p>
</div>
<div class = "hjljobinfo">
<h1>Entry One</h1>
<h2>Company |</h2>
<p class = "location">New York, NY, USA</p>
</div>
</div>
</a>
I'm not used to using nth-child so i'm not sure how to fix it (i've tried playing around with adding an 'a' to the above but its not making any difference).
Does anyone have any pointers they can kick me towards?
Thanks
Dan
:nth-child works between siblings documentation. That means that the counter (odd in this case) applies to elements with the same parent.
If you wrap each .hjl in a a then they no longer share the same parent so the selector tries to find odd .hjl elements inside the a element and finds just the first one (the only one that exists in the a).
So, you should change your selector to work with a tags (perhaps apply a class as well for more precision)
on another note, placing div and h1/h2 elements inside a a tag is invalid and will cause other issues.
You need to add ":" right in front of it, like so:
YourElement:nth-child( { number expression | odd | even } ) {
declaration block
}
Your element is something like tr, li, or anything like that. Hope that helps.