How to serve responsive images using srcset in a v-for loop with Vue.JS? - responsive-design

<div class="image-thumbnail--hero">
<img :src="project.thumbnails.small[0]"
:srcset="`${project.thumbnails.small[0]} 300w, ${project.thumbnails.medium[0]} 900w, ${project.thumbnails.high[0]} 1400w`"
sizes="(min-width: 768px) 70vw, (min-width: 1200px) 50vw, 300px"
width="100%"
:alt="project.title">
</div>
<div class="image-thumbnails">
<ul class="list-unstyled">
<li v-for="thumbnail in project.thumbnails.small" #click="swapThumbnail(thumbnail)">
<img class="lazy" :data-src-lazy="thumbnail" alt="thumbnail" width="100">
</li>
</ul>
</div>
Suppose I have these thumbnail images, different resolutions for different viewports.
thumbnails: {
small: [
'http://placehold.it/330x330',
'http://placehold.it/330x330',
'http://placehold.it/330x330'
],
medium: [
'http://placehold.it/900x900',
'http://placehold.it/900x900',
'http://placehold.it/900x900'
],
high: [
'http://placehold.it/1400x1400',
'http://placehold.it/1400x1400',
'http://placehold.it/1400x1400'
]
},
I want to loop set a set of images, and they should be responsive using srcset attribute. Right now I just loop through the small thumbnails:
<div class="image-thumbnails">
<ul class="list-unstyled">
<li v-for="thumbnail in project.thumbnails.small" #click="swapThumbnail(thumbnail)">
<img class="lazy" :data-src-lazy="thumbnail" alt="thumbnail" width="100">
</li>
</ul>
</div>
Is there a way to make it responsive? Just like the code inside image-thumbnail--hero?
The thumbnails inside image-thumbnails are small, like 100x100. When a user clicks one of the thumbnails, a higher resolution is shown in image-thumbnail--hero. When I didn't use responsive images, I had defined a method for doing this:
swapThumbnail(imgUrl) {
this.selectedThumbnail = imgUrl;
}
selectedThumbnail is supposed to bind to image-thumbnail--hero img, but since that part is now using responsive image, it's hard to make it work because I don't know which resolution of the image (small, medium, high) should I select and show.
To sum up, there are the 2 problems I find difficult to solve
show responsive images with v-for
show a high resolution image (hero image) when a user clicks the associated thumbnail.
The hero image and thumbnail images should both be responsive.
Any insight would be highly appreciated!

Related

dotnet highchart asp.net with nav tabs bootstrap

There are something that i would like to ask about, for example this is my code when i want to display using this reference https://codepen.io/wizly/pen/BlKxo/
with dotnet highcharts or highcharts
<div class="container"><h2>Example 3 </h2></div>
<div id="exTab3" class="container">
<ul class="nav nav-pills">
<li class="active">
Tab 1
</li>
<li>
Tab 2
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1b">
<div id=" chartContainerPies" style="width:100%;height:600px;">
<asp:literal id="chartContainerPie" runat="server" ></asp:literal>
</div>
</div>
<div class="tab-pane" id="2b">
<div id="chartContainerColumns" style="width:100%;height:500px;">
<asp:Literal id="chartContainerColumn" runat="server"></asp:Literal>
</div>
</div>
</div>
</div>
and the result from this coding will be displayed in web browser
however, the second nav tab result become this. As you can see, the size of the chart is reduced into 50% of original chart.
the problem is how to make the result in second tab is clearly similar with the first tab ? any suggestion for this problem ? thank you very much
Updated:
after i put the border, then this is the result
This post is direct answer from ryenus in
Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?
The Cause
This is not a Highcharts issue, at least not by itself, the problem is caused by the fact that Bootstrap uses display: none to hide inactive tabs:
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none; /* this is the problem */
}
This causes Highcharts not able to get the expected width to initialize the chart, thus defaults to 600px. This would happen to other tools using the same approach to hide content.
A Pure CSS Solution
Instead of working around the issue with an extra redraw or delayed initialization, we can achieve the hidden effect using height: 0; overflow-y: hidden, this way the hidden tab panes are still in place and having valid width:
/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane:not(.active),
.pill-content > .pill-pane:not(.active) {
display: block;
height: 0;
overflow-y: hidden;
}
/* bootstrap hack end */
Update: The previous 2-step solution first hides all tabs, then makes the active tab visible again. In comparison, now we have a 1-step solution, which directly targets the inactive tabs.
This solution is seamless, so you no longer have to worry whether the chart is inside a tab-pane or not. And it's efficient as it fixes the width issue in the first place, thus there's no need to workaround the width issue afterward via resize/redraw/reflow using javascript.
Note about cascading order
This patch needs to be loaded after bootstrap css, because of CSS cascading order rules, in short, the latter rule wins.
so, for anyone that having same problem when putting more than one chart in the nav tabs, this will help you through the problem.

Full width, responsive top image

I am trying to create a header with a image which responds to screen size like one: http://appex.no/referanser
Any ideas on how they did it?
<div id="banner" style="width:auto;overflow:hidden;">
<img src="..." style="width:100%;" />
</div>
should work; then the div stays auto for responsive layouts and the img takes the size of the parent div
they removed the image with something like:
#media handheld, only screen and (max-width: 400px){
div#banner { display:none;
}
(just used inline for sake of the demonstration but can be class of course)

Slight padding issues regarding tables nested in Divs

I am currently in the process of finishing a website which required tables to perfectly align several images and links to various photos, which are all nested withing a table. This table is within a div, inside a custom user control (.ascx)
Now on my main page, I have a logo for the website , which is nested in a centre tag
<center>
<div class="SizeToAlignment">
<img src="Images/Master_Images/logo.gif" style="width: 958px; height: 100%;" alt="Heading" />
</div>
</center>
<center>
<div>
<uc1:TablePics ID="TablePics1" runat="server" />
</div>
</center>
The end product causes the LogoDiv to misalign with the usercontrol TablePics1 (containing my tables of links and images) by 1 single pixel (to the left).
I do not want to resize my logo. Any ideas on what I should do?
For testing purposes, try this:
<div class="SizeToAlignment" style="padding-left:1px;">
...
</div>
If this resolves the issue, remove this style attribute and add the padding-left rule to the SiteToAlignment class in your style sheet.

flex-video in reveal only showing once

I use the following code to display a youtube video inside a reveal-box
<a href='#' data-reveal-id='myModal1'><img alt="Some text" src="images/logo.png" class="large-6 medium-6 small-6 columns" /></a>
<div id="myModal1" class="reveal-modal small" data-reveal>
<div class='flex-video'>
<iframe src="http://www.youtube.com/embed/dQw4w9WgXcQ?rel=0" class='no-border' allowfullscreen></iframe>
</div>
<a class="close-reveal-modal">×</a>
</div>
but this works only once...
When I open the box, it shows the video perfectly, but when I close it, and re-open it, I only get a white area.
It seems like the flex-video is the problem; when I remove this div, so I put the iframe directly into the reveal-modal div, it works normally, but then obviously the video doesn't scale on different devices
It always worked fine in foundation 4, but now in foundation 5 it does this.
Please help.
Thank you
Give your reveal modal an ID (i.e. #myModal)
Go into your foundation.reveal.js file and look for the line of code that reads:
close_video : function (e) {
var video = $(this).find('.flex-video'),
iframe = video.find('#myModal iframe');
As you can see, in the third line of code I have added the id of #myModal
Open foundation.min.js and find (command+f) the two iframe references, and add your ID (#myModal) to both

expression-engine : Fancybox + EE?

I am having a problem using fancybox with expression engine.
Basically I have different galleries set-up using matrix plugin. Each gallery has around 10 images. Basically I want the thumbnail to open up fancybox and fancybox to be able to scroll through the images in that matrix entry/gallery.
Sounds simple but I can’t seem to get fancybox to scroll through the images, it just stays on the first image.
This is my code for the thumbnails:
<ul id="image_gallery">
{exp:channel:entries channel="gallery_images"}
<li>
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title}">
{gallery_image limit="1"}
{exp:imgsizer:size src="{image}" width="200px" height="180px"}
<img src="{sized}" width="{width}" height="{height}" alt="" />
{/exp:imgsizer:size}
{/gallery_image}
</a>
<h1>{title}</h1>
</li>
{/exp:channel:entries}
</ul>
This is my code for the fancybox template:
{exp:channel:entries channel="gallery_images"}
<ul id="img_gallery">
{gallery_image}
<li>
{exp:imgsizer:size src="{image}" width="650px" height="500px"}
<img src="{sized}" width="{width}" height="{height}" alt=""/>
{/exp:imgsizer:size}
</li>
{/gallery_image}
</ul>{/exp:channel:entries}
Everything works fine except for the image scrolling.
I’d appreciate any help!
Without seeing the output of your ExpressionEngine tags, it's difficult to understand where the problem is. However, your problem may be as simple as making sure all of the images in a gallery share the same HTML relationship attribute.
Fancybox Galleries are created from elements who share the same rel="" attribute:
<a class="gallery" rel="set_1" href="#"><img src="1.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="2.jpg" alt=""/></a>
<a class="gallery" rel="set_1" href="#"><img src="3.jpg" alt=""/></a>
<script>
$('a.gallery').fancybox();
</script>
In looking over your code, you're using the ExpressionEngine {title} tag as the rel="" attribute.
Since the title of your channel entry likely contains spaces and other special characters, a better choice would be to use the URL Title field, {title_permalink}.
The {title_permalink} tag converts the channel entry title to be URL-safe using either hyphens or underscores as character separators (using the Word Separator for URL Titles setting in the Global Channel Preferences).
Your updated thumbnail code would then be:
<a class="grouped_elements" href="{title_permalink='gallery/view'}" rel="{title_permalink}">
<img src="{sized}" width="{width}" height="{height}" alt="" />
</a>
If this doesn't work, perhaps you can provide a more complete code sample such as a jsFiddle or Pastie to help us understand where the problem may be.

Resources