There is a Popular Post Widget provided by Blogger, which can find the popular posts' first image and show it on the sidebar of your blog.
But it can only find images which are directly uploaded to Blogger, it doesn't work on external image links. I'm wondering if there's a way to read the external image by editing its code, maybe in javascript I think...
The default generated code:
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
Since there are so many b:if and data: in the code, I'm not sure if I can treat it as a normal html file or not.
I made a widget below, which can show popular posts' thumbnail by external images. Copy all the code and add it as a widget fixes the problem.
It gets the first image in the posts, both internal images and external images worked well.
Code: GitHub
try this one
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href'>
<b:with value='data:post.featuredImage.isResizable?resizeImage(data:post.featuredImage, 65, "65:52"): data:post.thumbnail' var='image'>
<img class='featuredImage' expr:alt='data:post.title' expr:src='data:image' height='52' layout='responsive' width='65'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
Related
I am new to web design/coding and am working on a personal website. I'm trying to create a shadowbox in JavaScript... I copied code from shadowbox-js.com but am throwing up an error on line 8 in Dreamweaver. On top of that I'm confused on how to code the photos in on the HTML file. I have a thumbnail photo that I would like to be able to be clickable so you can enlarge it in a popup window. I created a enlarged version of the photo (named it differently than the thumbnail, will correct that later) but am confused on how to code them into the HTML file. Any help is greatly appreciated!
Here is a codepen of the files:
https://codepen.io/AJ2021/pen/pQzmOR#=
Line 100 of the CSS is in a new file called shadowbox.css.
The line in the HTML I'm confused with is:
<section>
<font face="Lucida Bright">
<center><h1 id="pagename">Gallery</h1></center>
<div id="gallery">
<!-- Here are the gallery thumbnails -->
<a href="_images/php_family_marina.png"
rel="shadowbox[picture]" title="My family at Sunbury Marina"
<img src="tmb_Lawton_Family.png">
</div>
</section>
you missing > and </a> for <a> tag and call it with shadowbox() not Shadowbox.init()
shadowbox();
#gallery img {padding: 10px; margin: 5px;background: green}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shadowbox-js#3.0.3/source/shadowbox.css">
<script src="https://cdn.jsdelivr.net/npm/shadowbox-js#3.0.3/source/shadowbox.min.js"></script>
<div id="gallery">
<a href="https://i.postimg.cc/Kjn5GpVF/full-a.jpg" rel="shadowbox[picture]" title="a">
<img src="https://i.postimg.cc/mZMjyhrq/thumb-a.jpg">
</a>
<a href="https://i.postimg.cc/PrQM0cYQ/full-b.jpg" rel="shadowbox[picture]" title="b">
<img src="https://i.postimg.cc/4Ng5LZ73/thumb-b.jpg">
</a>
</div>
Hello I am working with LIKEBTN I have some designs on which I need likes and I have added the likebtn library on the designs but there is a load more which get the old designs as well and after ajax the html appends on the page and there I am not able to load like button library. As script has loaded before on page load so it's not appending on the new DOM elements. I have tried .live and .delegate as well but couldn't find the solution.
You can see there is a heart icon which has the like functionality and in console you will find child elements inside <span> as well which loaded by likebtn library but after I load more designs by ajax I couldn't load likebtn library scripts on that elements you can see the image there is no like icon and in console there is no child elements inside <span>.
This is my html which appends on ajax load more. it has dynamic variable coming from database.
<a data-index="{{ loop.index0 }}" class="galimg animate" data-animation="fadeInUp" data-duration="010">
<div class="gimg">
<img class="img-fluid" src="{% path (design.designThumbnail), 'thumbnail' %}" alt="" />
<div class="gimg-caption">
<div class="title">
<h6>{{ design.title }}</h6>
<p>By: {{ (design.userId.userFullname!= ' ')? design.userId.userFullname|uppercase_first_letter : design.userId.contactName|uppercase_first_letter }}</p>
<p>From: United Kingdom</p>
</div>
<div class="likes">=
<!-- LikeBtn.com BEGIN -->
<span class="likebtn-wrapper" data-theme="custom" data-icon_size="24" data-icon_l="hrt6" data-icon_d="sml3-u" data-icon_l_c="#ffffff" data-icon_l_c_v="#fb0505" data-label_c="#ffffff" data-label_c_v="#ffffff" data-counter_l_c="#ffffff" data-bg_c="rgba(250,250,250,0)" data-bg_c_v="rgba(250,250,250,0)" data-brdr_c="rgba(198,198,198,0)" data-i18n_like="Love this" data-white_label="true" data-identifier="btn_design_{{ loop.index }}" data-dislike_enabled="false" data-icon_dislike_show="false" data-counter_zero_show="true" data-popup_disabled="true" data-share_enabled="false" data-tooltip_enabled="false" data-site_id="5b7ac72c6fd08b366d431a36"></span>
<!-- LikeBtn.com END -->
</div>
</div>
</div>
</a>
This is the library I need to load after ajax succes
<script>(function(d,e,s) {if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
You can use init() method after ajax success. It will render your new elements.
if (typeof(LikeBtn) != "undefined") {
LikeBtn.init();
}
I am using following theme for one of website (click here). This theme come with one background image and i modified this to multiple background images for 'section' tag <section id="intro" class="intro"></section>
This script doesn't wok properly as it show black screen in between image at time.
codepen example
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h1><span class="text_color">WELCOME TO SQUAD</span> </h1>
</div>
<div class="page-scroll">
<div class="wow shake" data-wow-delay="0.4s">
<a href="#latest-tabs" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
<!-- /Section: intro -->
I am using a trick and showing all these image also in another div with it display property, this way helped to to resolve black screen between image transition as all image are cached if i am not wrong if i dont put these image in a hidden div then each image takes time to download.
<div class="background-images" style="display: none !important;">
<img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
<img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
<img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
</div>
Overall you will notice that it breaks, for some reason it some works well in other browser other than FF.
i need to fix this or need another script which can show slid show for a container div as shown in this example and works well with fadein fadeout effect
It looks like that images are being downloaded via a GET request each time JS switches them. Try to cache them somehow so you can save some time on a get/redirect requests.
I think the black screen is caused by the image source, if you look the image source when black screen occurs, it doesn't show an image, and if you navigate to that source through the browser, it gives you an redirect to a different page.
This issue is caused due to incorrect image source...
For ex. this URL is not redirecting to any image..
"http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg"
I just want my page to contain one image then once you click it.. you can move across and view more images.. is this possible?
Atm my fancy box is just one image showing one image..
Any help would be great, thanks
I use to work with Fancybox since earlier versions. What I do in that case is:
HTML:
<!-- this is the regular image -->
<a class="fancybox" href="leIMG-bigger-0.jpg" rel="leGallery"><img src="leIMG-0.jpg" alt=""></a>
<!-- this is the rest of the gallery... hidden -->
<div class="fancyboxHidden">
<a class="fancybox" href="otherIMG-bigger-1.jpg" rel="leGallery">
<img src="otherIMG-1.jpg" alt="">
</a>
<a class="fancybox" href="otherIMG-bigger-2.jpg" rel="leGallery">
<img src="otherIMG-2.jpg" alt="">
</a>
<a class="fancybox" href="otherIMG-bigger-3.jpg" rel="leGallery">
<img src="otherIMG-3.jpg" alt="">
</a>
<div>
CSS:
.fancyboxHidden {display:none;}
This way you are:
1) Using your full gallery (try the thumbs helper and will look great)
2) Indexing all the images for search engines
Hope this will help you, for a good example of this check out this site in source view.
PS: There is many ways to achieve what you want, you can create the gallery directly from JS or combine both ways. This is the way I choose for image indexing ;)
I'm fairly new so please forgive any lack of knowledge I may have.
I'm using the cycle2 plugin on a project and I've made one slideshow on my index page work fine, there's no issues with it at all as its pulling images from the net.
However I want to do a slideshow on the show page, so that for each product it pulls the product image from the database. I've made it so it does, however when doing so the first image of the slideshow is always empty and continuously trying to load until it changes to the picture from the database.
I'm pretty sure its something in the img src that I'm doing wrong as its getting the image, just getting a blank slide too, any help would be greatly appreciated!
The code so far is;
<div id="slideshow">
<div class="cycle-slideshow"
data-cycle-fx=scrollHorz
data-cycle-timeout=4000
style="z-index:-1;"
data-cycle-prev="#prev"
data-cycle-next="#next"
>
<!-- empty element for pager links -->
<div class="cycle-pager"></div>
<!-- empty element for overlay -->
<img src = <%= link_to image_tag #product.image_url %>>
<!-- prev/next links -->
<div id=outside>
<span id=prev>?</span>
<span id=next>? </span>
</div>
</div>
Thanks, Ben
Use this: <%= image_tag(product.image_url) %>. That's what I used to make mine work.