When using Instagrams API to display the images on my website, the images aren't inheriting the containing divs style.
The style being float:left. So they don't stack on top of each other, they actually appear in rows and columns... rather than just a column.
The CSS:
#instagram.img {
float:left;
margin:10px;
}
The HTML/PHP (omitting get data & parsing) :
<div class="instagram">
<?php foreach ($result->data as $post): ?>
<a class="group" rel="group1" href="<?= $post->images->standard_resolution->url ?>"><img src="<?= $post->images->thumbnail->url ?>"></a>
<?php endforeach ?>
</div>
I tested that, images outside of the php adhere to the styling and they do. They float:left as expected.
Any help greatly appreciated.
.instagram {
float:left;
margin:10px;
display: inline-block;
}
As I said in the comment, # is the selector for id, . is the selector for class.
<div>
<?php foreach ($result->data as $post): ?>
<a class="group instagram" rel="group1" href="<?= $post->images->standard_resolution->url ?>"><img src="<?= $post->images->thumbnail->url ?>"></a>
<?php endforeach ?>
</div>
Add the .instagram class to your <a>, because adding it to your div will float the div left, and not the picture.
See display properties to see why the display: inline-block;.
Related
I am working on a movies website. On homepage I have created two buttons one for grid view and other for list view. The class for grid view is animation-2 items and class for list view is animation-2 items liststyle ( liststyle is added with js ) Using JS when user will click the list button list style class with be added in the main class and the view of my post will change according to the styling which i apply on this class. Now issue is as I have applied some styling and hide the images in list view it works fine til now but now when I am applying styling on my main class mean grid view same styling is applying on my list view. Here is my code:
<script>
jQuery('.grid').click(function(){
jQuery('.animation-2').removeClass('liststyle');
});
jQuery('.list').click(function(){
jQuery('.animation-2').addClass('liststyle');
});
</script>
<style>
.tablinks.selected{
color:red;
}
.tablinks.selected{
background-color: #FDB813;
color: white;
}
.liststyle article div img{
display: none!important;
}
.liststyle .poster{
height: auto!important;
padding-top: 10%!important;
}
.liststyle article{
width: 100%!important;
height: auto!important;
}
</style>
The above code is working fine and all styles are working now I want to hide a class rawsub on my grid view but same styling is applied on list view as I am giving reference of only main class animation-2 items but still style is applying on animation-2 items liststyle class.
Here is the code of my rawsub class:
<article id="post-<?php the_ID(); ?>" class="item <?php echo $posttype; ?>">
<div class="poster" style="padding-top: 1%!important; padding-bottom: 1%!important;">
<a href="<?php the_permalink() ?>">
<img src="<?php echo dbmovies_get_poster($post->ID); ?>" alt="<?php the_title(); ?>">
</a>
<div class="rawsub">
<span class="rawsub"><?php the_field('type3'); ?></span>
<span class="rawsub"><?php the_field('type'); ?></span>
<span class="rawsub"><?php the_field('type2'); ?></span>
<a href="<?php the_permalink() ?>">
<h3 class="rating"><?php the_title(); ?></h3>
</a>
</div>
<span class="posttime">
<?php the_time( 'g:i a' ); ?>
</span>
Add this code it will remove rawsub from grid view and will not change the list view
.animation-2.items article .rawsub span:nth-child(1){
display:none;
}
.animation-2.items.liststyle article .rawsub span:nth-child(1){
display:inline-block!important;
}
As you said you want to hide rawsub class,
Try this,
var rawsub_elements = jQuery('.rawsub'); // take all elements with class rawsub on page load
Now you have elements with class rawsub in rawsub_elements,
Try putting below statements in your jQuery code where you are adding and removing liststyle class,
rawsub_elements.each(function() {
$(this).toggleClass("rawsub");
});
This will toggle the class rawsub on elements having rawsub as class name, which means if class rawsub is present toggleClass will hide the class name and when class rawsub is hidden/not present toggleClass will add the class name rawsub to the element.
I am using custom template in wordpress. This is the code
<a href="<?php echo get_category_link($cat->term_id); ?>">
<img class="home-img" src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" />
<p><?php echo $cat->cat_name; ?></p>
</a>
</div>
<?php endforeach; ?>
which is displaying category with category images like this Screenshot1.
I want to display the text on the image not below the image.
Change the position of the paragraph:
p {
margin-top: -50px;
width: 100%;
text-align: center;
}
I have a link in the following div, it code is,
<?php _e('More', 'isis'); ?>
Now, I want to make the whole div a hyperlink. Please guide me. Thanks. The whole code is below,
<div class="midrow_blocks_wrap">
<i class="fa <?php echo of_get_option('block1_logo'); ?> fa-3x icon"></i>
<a href="#">
<div class="midrow_block">
<!--We need to make this div a link -->
<div class="mid_block_content">
<h3><?php echo of_get_option('block1_text'); ?></h3>
<p><?php echo of_get_option('block1_textarea'); ?></p>
</div>
<?php if ( of_get_option('block1_link') ) { ?><?php _e('More', 'isis'); ?><?php } ?>
</div>
</div>
<div class="shadow"><img src="<?php echo get_template_directory_uri(); ?>/images/service_shadow.png" alt="<?php the_title_attribute(); ?>" /></div>
</div>
A lot of the time when I'm trying to make a hyperlink fill a whole div I give the div a position: relative and the hyperlink a position: absolute; width: 100%; height: 100%; left: 0; top:0; I developed this because wrapping a whole div in a hyperlink can be screwy.
It is usually much easier to do it that way. If you give a z-index: 9 or some higher number you will cover most of your base for the div and then if you need other links or content in there you'll need to do a higher z-index.
Just a thought.
I can't align my post thumbnail to left. Is it to be declared in CSS or what?? I used the following code but it didn't work:
<!--This section is currently pulling category ID #1, and can be switched by changing the cat=1 to show whatever category ID you would like in this area.-->
<div class="featured">
<h2>Featured Category</h2>
<!--This is where the thumbnails are found for the homepage bottom section - note the custom field name for this image is "thumbnail". Recommended image size is 70x70, as the stylesheet is written for this size.-->
<?php $recent = new WP_Query("cat=1&showposts=3"); while($recent->have_posts()) : $recent->the_post();?>
<?php if( get_post_meta($post->ID, "thumbnail", true) ): ?>
<img style="float:left;margin:0px 10px 0px 0px;" src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="alt text" />
<?php else: ?>
<img style="float:left;margin:0px 10px 0px 0px;" src="<?php bloginfo('template_url'); ?>/images/thumbnail.jpg" alt="Default thumbnail" />
<?php endif; ?>
<b><?php the_title(); ?></b>
<?php the_content_limit(80, ""); ?>
<div style="border-bottom:1px dotted #AFAFAF; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;"></div>
<?php endwhile; ?>
<!--This is where you can specify the archive link for each section.-->
<b>More Featured Category Posts</b>
</div>
please study the code and give me suggestions
Can you give the URL for this so we can see? Inline styles are bad - instead, try applying a CSS class and then define the margin and float.
I assume something is overwriting the float:left;
I am working with prototype carousel. I am trying to do it with a dynamically generated number of elements so the quantity of inner divs will vary. Right now the script seems to require the width be fixed and coded into the script.
The inner content is generated with a foreach loop like this :
<div class="carousel" id="example-2">
›
‹
<div class="middle">
<!-- how can this inner width be dynamically populated ? -->
<div class="inner" style="width: 3000px">
<?php foreach ($_productCollection as $_product): ?>
<?php if($_product->isSaleable()): ?>
<img class="<?php echo $_product->getId() ?>" src="<?php echo Mage::helper('catalog/image')->init($_product, 'small_image')->resize(100, 75); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />
<?php endif; ?>
<?php endforeach ?>
</div>
</div>
<script type="text/javascript">
new Carousel($('example-2').down('.middle'), $('example-2').down('.inner').select('img'), $('example-2').select('a'), {
duration: 0.5,
transition: 'sinoidal',
visibleSlides: 6,
circular: true
});
</script>
</div>
How would I get a total count from the number of $_product divs that are generated in the foreach loop? Say there are 10, and then I multiply that for whatever the fixed width of the img is, say 50px, then I could populate the .inner width with 500px.
Calculate how much space [pixels] one item, including its padding, will take in the display area. Multiply that by the amount of items you are showing at any given time and this gives you your fluid width for your display area.
Look at this Pagination example for the Carousel by Yahoo
Pay special attention to numItems and the following CSS excerpt to get your fluidity:
/* Always be sure to give your carousel items a width and a height */
.yui-carousel-element li {
height: 75px;
width: 75px;
}