Rails - Unable to add image within style="background-image:url (' ') from database - html

I'm new to rails and stack over flow, I would be grateful to you all if I can guided here.
I'm developing a test site which is like a personal blog just to add portfolio for one user.
I have a scaffold "Dashboard" which is used to update homepage information of the website such as Titles, Banners, About Me etc.
All text of from the database is coming on the homepage perfectly fine.
However, banner images are not coming appropriately as per the theme style.
My problem - When the banner is added the text above the banner gets hidden.
Below is my code for your kind reference, I'm sure I'm making some mistake in this line
<div class="swiper-slide cover-background" style="background-image:url('<%= image_tag dashboard.banner1.url %>');">
However, unable to rectify it yet.
Original line of code:
<div class="swiper-slide cover-background" style="background-image:url('http://placehold.it/1920x1080');">
any help or suggestion would be great.
Complete Code for reference
<% #dashboards.order('created_at ASC').limit(1).each do |dashboard| %>
<section class="no-padding main-slider height-100 mobile-height wow fadeIn">
<div class="swiper-full-screen swiper-container height-100 width-100 white-move">
<div class="swiper-wrapper">
<!-- start slider item -->
<div class="swiper-slide cover-background" style="background-image:url('<%= image_tag dashboard.banner1.url %>');">
<div class="opacity-extra-medium bg-black"></div>
<div class="container position-relative full-screen">
<div class="slider-typography text-center">
<div class="slider-text-middle-main">
<div class="slider-text-middle">
<div class="alt-font text-white text-uppercase font-weight-700 letter-spacing-minus-3 title-extra-large margin-two-bottom width-60 center-col md-width-80 sm-margin-four-bottom xs-width-90 xs-margin-25px-bottom xs-letter-spacing-0"><%= dashboard.name %></div>
<div class="btn-dual">
About Company
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end slider item -->
<% end %>

Using the image_tag helper will generate and return a complete a HTML tag like <a src="foo/bar.jpg" /> not just the URL which you need in your example.
Just change this line
<div class="swiper-slide cover-background" style="background-image:url('<%= image_tag dashboard.banner1.url %>');">
to
<div class="swiper-slide cover-background" style="background-image:url('<%= dashboard.banner1.url %>');">

Related

getting my scrollIntoView working (total noob)

I'm trying to make an FAQ page using an accordion. In some of the answers I tried to make a clickable link, that will direct you to another question (I don't want the page to refresh).
With what I have now, the opened question (containing the link) will close the accordion after clicking, and open the desired accordion. The only thing missing is that the page will not scroll to the new question.
What I've got:
function openQuestion(q) {
jQuery('.accordion-toggle').removeClass('active');
jQuery('.accordion-container').fadeOut(500);
var accordions = jQuery('.accordion-toggle');
var accordion = accordions[q - 1];
jQuery(accordion).addClass('active');
jQuery(accordion).next('.accordion-container').slideToggle(500);
}
I assume the next jquery line would contain something with scrollIntoView. But no succes yet.
This is what I use in HTML
text
<div class="entry">
<h3>FAQ</h3>
<p>...</p>
<div class="clear"></div>
<div class="accordion wrapper">
<h3 class="accordion toggle active">
...
</h3>
<div class="accordion-container" style="display: block;">
<div class="content-block">
<span style="font-weight: 400;">...</span>
</div>
</div>
<!-- end accordion container -->
<h3 class="accordion toggle">...</h3>
<div class="accordion-container" style="display: none;">...</div>
<!-- end accordion container -->
</div>
</div>

A link on top of an image link

I'm building a landing page and I encounter a problem. I have an image of a project that when is clicked will zoom in a gallery mode and on top of that image it is a link towards the Behance page of the project. But what ever I do when I click the project link is opening still the image gallery. This is my code:
<div class="row masonry-wrap">
<div class="masonry">
<div class="masonry__brick" data-aos="fade-up">
<div class="item-folio">
<div class="item-folio__thumb">
<a href="images/portfolio/gallery/LiveStreaming.png" class="thumb-link" title="Live" data-size="1617x1440">
<img src="images/portfolio/LiveStream500x625.jpg" srcset="images/portfolio/LiveStream500x625.jpg 1x, images/portfolio/LiveStream1000x1250.jpg 2x" alt=""></a>
</div>
<a href="https://www.behance.net/gallery/77261419/Live-Streaming-Landing-Page-Design" class="item-folio__project-link" title="Project link">
Project Link
</a>
<div class="item-folio__text">
<h3 class="item-folio__title">
Live Streaming Landing Page
</h3>
<p class="item-folio__cat">
UI Design
</p>
</div>
<div class="item-folio__caption">
<p>A modern touch to a simple service. UI design made in Sketch for a Live Streaming Landing Page.</p>
</div>
</div>
<!-- end item-folio -->
</div>
<!-- end masonry__brick -->
</div>
<!-- end masonry -->
</div>
<!-- end masonry-wrap -->
What do I do wrong?

Can I get Bootstrap modal content to generate a new url?

I'm in the process of adding Facebook like and share buttons to a site I'm working on. What I'm trying to achieve is to have L+S buttons for each item in the portfolio, which are displayed as modal content when a thumbnail is clicked. What is currently happening is that the links to like or share don't include the modal id, which means the whole portfolio page is linked, rather than a specific item.
The html for the thumbnails looks like this:
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
<img class="img-responsive img-portfolio img-hover" src="img/homePage/700x450alfa.png" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
</a>
</div>
And that links to this:
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Alfa</h2>
<p class="item-intro text-muted">38mm Nordic Spruce</p>
<p>Choose your own name, word or design to be cut from wood. Get in touch to discuss an order like this one</p>
<img class="img-responsive img-centered" src="img/may2017/alfa1.jpg" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
<img class="img-responsive img-centered" src="img/may2017/alfa2.jpg" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
<img class="img-responsive img-centered" src="img/may2017/alfa3.jpg" alt="Image of the name Alfa cut from 38mm Nordic Spruce">
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Window</button>
<!--LIKE BUTTON-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.7";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<br> </br>
<div class="row text-center">
<div class="fb-like" data-href="https://localhost:8888/TTK2/mainportfolio2.html#portfolioModal1" data-width="200px" data-layout="button" data-action="like" data-show-faces="false" data-share="true"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see, I've pasted the FB JS right into the div, which I know is poor practice, but I had hoped that this would trigger the modal ID, but it doesn't.
You can also see that I've got the full address including the modal ID in the data-href field of the button div, but any link generated by clicking will not include the modal ID, and instead links to the original page, in this case, Portfolio. BTW, the buttons for the entire page work as they should. The only thing I can't do is link to a modal. Documentation I've read suggests that it might not be possible to do this, but I wanted to check with the community first. I mean, it SHOULD be possible, right?
Ps. I know this code links to a local host address, but it doesn't work in a live situation either.
Thanks for looking.
UPDATE - SOLVED.
I've found a solution to the first part of this, which was being able to change the url of modal content so that I could add Like and Share buttons. It has been answered Here by #forcefield. Have tested on my page of 100+ hidden modal divs and it works perfectly. Thanks #forcefield!

How to align a counter in html

I have a counter in my html code. I want to align this counter in the middle of the site. There is a helper class, called text-align which works with almost all objects on the site but i don't know how to align a script entry.
My code looks like this:
<section class="wow fadeIn">
<div class="container-fluid full-screen position-relative no-padding no-transition" >
<div class="opacity-medium bg-white"></div>
<div id="animated-balls"></div>
<div class="slider-typography xs-position-inherit">
<div class="slider-text-middle-main">
<div class="slider-text-top slider-text-middle2">
<!-- logo -->
<div class="coming-soon-logo"><img class="logo-style-2" src="images/offene-stadt.png" alt=""/></div>
<!-- end logo -->
<span class="coming-soon-title text-uppercase gray-text margin-ten no-margin-lr no-margin-bottom">We're getting ready to launch</span>
<!-- time -->
<div id="counter-underconstruction2" class="white-text text-center margin-two no-margin-lr no-margin-bottom"></div>
<div id="countdown-target" class="text-center"></div>
<script>
var myCountdown1 = new Countdown({time:86400*20});
</script>
</div>
<!-- end time -->
You can set a target to point it at a specific item so try this:
<div class="slider-text-top slider-text-middle2">
<!-- logo -->
<div class="coming-soon-logo"><img class="logo-style-2" src="images/logo-light-big.png" alt=""/></div>
<!-- end logo -->
<span class="coming-soon-title text-uppercase gray-text margin-ten no-margin-lr no-margin-bottom">We're getting ready to launch</span>
<!-- time -->
<div id="counter-underconstruction2" class="white-text text-center margin-two no-margin-lr no-margin-bottom"></div>
<i class="icon-anchor medium-icon"></i>
<div id="countdownTarget" class="center-block"></div>
<script>
var myCountdown1 = new Countdown({time:316, target: "countdownTarget"});
</script>
<!-- end time -->
</div>
And then use your existing text-align technique on the #countdownTarget to position it how you like.

How do I identify Xpath when there are multiple elements with the same attributes and text?

I need to click on the link that says "Customer One". Currently I am using
//div[contains(#class,'client-info') and contains(div/text(),'Customer')]
Using Firepath, this returns four seperate elements (I have attached code that includes two of them), and I think that is why Selenium Webdriver is unable to find the element I would like to click.
I Need to click the very last instance of this xpath, but it doesn't appear possible to be any more specific, as they have the same class and inner text!
<div class="wg-client-row-mobile hidden-sm hidden-md hidden-lg">
<div class="row">
<div class="col-xs-11">
<span class="icon icon-user" ng-class="{'icon-user': !wgClientItemCtrl.client.isAnOrganization, 'icon-business': wgClientItemCtrl.client.isAnOrganization}"/>
<div class="client-info">
<div class="client-name not-long-text ng-binding">Customer One</div>
<!-- <div class="client-age not-long-text" ng-if="!wgClientItemCtrl.client.isAnOrganization">{{wgClientItemCtrl.client.gender}}, {{wgClientItemCtrl.client.calculatedAge | notAvailable}}</div> -->
<!-- ngIf: !wgClientItemCtrl.client.isAnOrganization -->
<div class="client-age not-long-text ng-binding ng-scope" ng-if="!wgClientItemCtrl.client.isAnOrganization">
<!-- end ngIf: !wgClientItemCtrl.client.isAnOrganization -->
<!-- ngIf: wgClientItemCtrl.client.isAnOrganization -->
<div class="client-age not-long-text ng-binding">
</div>
</div>
<div class="favorite-right-container">
</div>
</div>
<div class="wg-client-row-desktop hidden-xs hidden-is">
<div class="row content">
<div class="col-sm-4">
<div class="icon icon-user" ng-class="{'icon-user': !wgClientItemCtrl.client.isAnOrganization, 'icon-business': wgClientItemCtrl.client.isAnOrganization}"/>
<div class="client-info">
<div class="client-name not-long-text ng-binding">Customer One</div>
</div>
You can use last() to get the last instance matched by the inner XPath :
(//div[contains(#class,'client-info') and contains(div/text(),'Customer')])[last()]