I am trying to get prettyphoto to work within my rails app. I would like to have an image display in prettyphoto that is uploaded by the paperclip gem.
I am running rails 3.2.8, paperclip 3.1.4, and the hiq5/prettyphoto-rails gem.
Here is what I have at the end of the body:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal', /* fast/slow/normal */
padding: 40, /* padding for each side of the picture */
opacity: 0.35, /* Value betwee 0 and 1 */
showTitle: false, /* true/false */
allowresize: true, /* true/false */
counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
theme: 'light_rounded' /* light_rounded / dark_rounded / light_square / dark_square */
});
});
</script>
Here is the rails link_to:
<%= link_to image_tag(#client.price_plan.flier1.url(:small)), #client.price_plan.flier1.url(:medium), rel: "prettyPhoto" %>
I think the problem is the link possibly that paperclip creates with the string on the end?
Example:
http://localhost:3000/price_plans/flier1s/3/small_1180001_SF6w.jpg?1345698254
Does prettyphoto need the ?1345698254 stripped off the link to work?
Example:
http://localhost:3000/price_plans/flier1s/3/small_1180001_SF6w.jpg
If so, how can I do that in paperclip?
Thanks,
I finally got back to this issue and was able to resolve it with the current version. It might be a bug but I discovered that by setting rel: 'prettyPhoto' did not work and rel: "prettyPhoto" did work???
final link looked like this:
<%= link_to "PrettyPhoto test", #client.price_plan.flier1.url(:medium), rel: "prettyPhoto", class: "prettyphoto" %>
Hope that helps others....
Related
I have the following helper function in ruby :
def site_css_link_tag(merchant_canonical:, site_variant:, template_previewing:)
# TODO: will remove variant argument
is_js_generate = merchant_canonical.nil? && site_variant.nil? && template_previewing.nil?
url = is_js_generate ? '' : css_api_v2_shopfront_sites_url(
merchant: merchant_canonical,
variant: site_variant,
template_previewing: template_previewing
)
# return stylesheet_link_tag url, url, media: 'all', id: 'site-css', 'data-base-url': css_api_v2_shopfront_sites_url
cssStyles = File.read(File.join(Rails.root, 'public', Webpacker.manifest.lookup('shopfront_redux.css'))).html_safe
return cssStyles
end
It returns all the styles correctly , I.E. i do see the output in the browser like so:
but how do i add this to a style tag ?
I have seen the ruby documentation here. It say for javascript you can have something like :
javascript:
alert('ok')
I tried doing the same with the css like so:
style:
site_css_link_tag(merchant_canonical: #merchant&.canonical_name, site_variant: #variant, template_previewing: #template_previewing)
But this variation does't seem to work ? So how do i output the css once again ?
Try css:
css:
site_css_link_tag(merchant_canonical: #merchant&.canonical_name, site_variant: #variant, template_previewing: #template_previewing)
I am making a css grid system that relies on the concept of blocks. So I have a base file like:
$max-columns: 4;
$block-width: 220px;
$block-height: 150px;
$block-margin: 10px;
And it is used by a mixin:
#mixin block ($rows, $columns, $max-columns) {
display: block;
float: left;
margin: $block-margin 0 0 $block-margin;
box-sizing: border-box;
width: ($block-width * $columns) - $block-margin;
}
But I'd also like javascript to have access to the variables in the base file. I was thinking that I could make an invisible div, and give it the $block-width, $block-height, and $block-margin attributes and pull the values from there. But max-columns, doesn't map to anything directly, so I'd have to come up with a hacky way to render it in a div. Is there a cleaner way to share values from sass/css to javascript or vice versa?
If you use webpack you can use sass-loader to exportvariables like:
$animation-length-ms: $animation-length + 0ms;
:export {
animationMillis: $animation-length-ms;
}
and import them like
import styles from '../styles/animation.scss'
const millis = parseInt(styles.animationMillis)
https://blog.bluematador.com/posts/how-to-share-variables-between-js-and-sass/
I consider my solution to be quite hokey; but it does work...
In my _base.scss I have some variables defined:
$menu_bg: rgb(45, 45, 45);
$menu_hover: rgb(0, 0, 0);
In a menu.scss I have:
#import "base";
#jquery_vars {
.menu_bg {
background-color: $menu_bg;
}
.menu_hover {
background-color: $menu_hover;
}
}
And in a handy page template:
<span class="is_hidden" id="jquery_vars">
<span class="is_hidden menu_bg"></span>
<span class="is_hidden menu_hover"></span>
</span>
Finally this allows in a nearby jQuery script:
var menu_bg = $('#jquery_vars .menu_bg').css("background-color");
var menu_hover = $('#jquery_vars .menu_hover').css("background-color");
This is so ugly my dad is wearing a bag on his head.
jQuery can pull arbitrary CSS values from page elements; but those elements have to exist. I did try pulling some of these values from raw CSS without creating the spans in the HTML and jQuery came up with undefined. Obviously, if these variables are assigned to "real" objects on your page, you don't really need the arbitrary #jquery_vars element. At the same time, one might forget that .sidebar-left nice-menu li is the vital element being use to feed variables to jQuery.
If someone has anything else, it's got to be cleaner than this...
sass-ffi should do the trick, but the opposite way (from JS to SASS/SCSS). It will define a function called ffi-require, which allows you to require .js files from SASS:
config.js:
module.exports = {
maxColumns: 4,
};
style.scss:
$max-columns: ffi-require('./config', 'maxColumns');
Works with sass-loader (webpack) and node-sass.
You can read the sass file with a server side script, "parse" it and echo the values you need to javascript.
I would like to add that there are now several ways to share data between Sass and JavaScript using JSON. Here are some links to articles detailing various techniques:
Making Sass talk to JavaScript with JSON
SassyJSON: Talk to the browser
Sharing Data Between Sass and JavaScript with JSON
It's probably just a matter of time until JSON importing becomes supported natively in Sass.
I would recommend looking at sass-extract which uses native sass features in order to extract the computed variable values into JSON.
Also if you are using webpack the sass-extract-loader will make it very easy to just require/import the sass files as in const variables = require('sass-extract-loader!./variables.scss'); and have your sass variables in a nice JSON object.
Since it also supports #import statements you can still separate your variables in different files, and no need to add additional preprocessing or separate json files with variables.
There are many alternative ways of accomplishing this as mentioned in other answers, and which one you choose will depend on your use case and environment.
Disclaimer, I am the author of both mentioned libraries.
Another way could be to use gulp-template so you can generate any structure you want for your JavaScript.
Sharing Variables between Javascript and Sass using Gulp with gulp-template
https://youtu.be/UVeUq8gMYco
It's created from scratch so people could see it from the ground up and there is a git repo with the end result:
https://github.com/PocketNinjaCoUk/shared-js-sass-vars-using-gulp/tree/master/dev
You basically have your config object
saved at ./dev/config.js
module.exports = {
defaults: {
colours: {
primary: '#fc0'
},
sizes: {
small: '100px',
medium: '500px',
large: '1000px'
},
zIndex: {
model: 100,
dropdown: 50,
header: 10
}
}
}
Then you have both of your templates for Sass and Javascript, or less or whatever you want.
Sass underscore template
saved at ./dev/templates/sass-config.txt
<% _.each(defaults, function(category, key) { %>
// Var <%= key %>
<% _.each(category, function(value, key) { %>
$<%= key %>: <%= value %>;
<% }) %>
<% }) %>
Javascript underscore template
saved at ./dev/templates/js-config.txt
namespace.config = {};
<% _.each(defaults, function(monkey, key) { %>
namespace.config.<%= key %> = {
<% i = 1 %>
<% _.each(monkey, function(value, key) { %>
<% comma = (Object.keys(monkey).length === i) ? '': ',' %>
<% if(typeof value === 'string') {%>
<%= key %>: '<%= value %>'<%= comma %>
<%} else { %>
<%= key %> : <%= value %><%= comma %>
<% } %>
<% i++ %>
<% }); %>
};
<% }) %>
Then the gulp to compile it
var gulp = require('gulp');
var template = require('gulp-template');
var rename = require('gulp-rename');
var removeEmptyLines = require('gulp-remove-empty-lines');
var sharedVars = require('./dev/config');
gulp.task('compile', function() {
gulp.src('./dev/templates/sass-config.txt')
.pipe(template(sharedVars))
.pipe(rename('_sass-config.scss'))
.pipe(removeEmptyLines())
.pipe(gulp.dest('./dev/sass'));
gulp.src('./dev/templates/js-config.txt')
.pipe(template(sharedVars))
.pipe(rename('js-config.js'))
.pipe(removeEmptyLines())
.pipe(gulp.dest('./dev/js'));
});
This can be done using gulp-sass-vars-to-js. It generates a .js file from your .scss file. The .js file contains all variables declared in your .scss file. You can then 'require' this generated js into your .js
I need to call a view in a Laravel Controller, with parameters and with Anchor Tag.
I have this code in my controller:
return view('plans/editPlanView',
['plan' => $plan,
'patient' => $patient,
'aliments'=>$aliments, 'menu'=>$menu, 'tabName'=>$tabName]);
But i need to add an Anchor tag to land in a specific section of the page.
I can't use
return Redirect::to(URL::previous() . "#whatever");
proposed in other posts because i need to pass some parameters.
I think there are some base problem, trying with console this:
$('html, body').animate({
scrollTop: $('#whatever').offset().top
}, 1000);
scrolling to the desired section does not work.
it seems the page makes a small snap but always returns to the top.
Update
I have found the cause of the problem. At the bottom of the blade page I have the following code, without it the anchor tag works fine. Adding it the page makes a small scroll to return to the head. I need to use the datepicker, how can I fix the problem and get the anchor tag to work?
#push('scripts')
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({
firstDayOfWeek: 1,
weekDayFormat: 'narrow',
inputFormat: 'd/M/y',
outputFormat: 'd/M/y',
markup: 'bootstrap4',
theme: 'bootstrap',
modal: false
});
});
</script>
#endpush
You can create the method showPage() in your contoller for example TestController
public function showPage(Request $request)
{
$plan = $request->plan;
...
return view('plans/editPlanView', [
'plan' => $plan,
'patient' => $patient,
'aliments'=>$aliments, 'menu'=>$menu, 'tabName'=>$tabName
]);
}
Then create a route for rendering that view
Route::get('/someurl', 'TestController#showPage')->name('show-page');
And then in your methods you can use something like that:
$url = URL::route('show-page', ['#whatever']);
return Redirect::to($url)
I found a workaround, I added the disable attribute to the date input, in doing so, when the datepicker is initialized, the page does not scroll up. Then, as a last javascript statement I re-enabled the fields:
$('.date').prop("disabled", false);
I want to generate a PDF with our department logo in it. When I try to use the WickedPdf class in my controller (using the method described at https://github.com/mileszs/wicked_pdf):
def some_action
image_tag_string = image_tag('logo.jpg')
pdf = WickedPdf.new.pdf_from_string(image_tag_string)
save_path = Rails.root.join('testpdfs','logotest.pdf')
File.open(save_path, 'wb') do |file|
file << pdf
end
end
...the application saves the PDF to the target directory, but it has a blue-and-white '?' mark where the image should be.
If I do this instead:
image_tag_string = wicked_pdf_image_tag('logo.jpg')
pdf = WickedPdf.new.pdf_from_string(image_tag_string)
I get the following error:
NoMethodError:
undefined method `wicked_pdf_image_tag' for #<...
It would appear that my Rails app is also missing / not linking to a helper file belonging to the wicked-pdf gem.
Answers to similar questions on StackOverflow recommend writing a custom "image-tag" helper to locate the image or installing wkhtmltopdf. For me, image-tag shows the logo just fine when placed in a View (whatever.html.erb). "logo.jpg" is already located in both the asset pipeline and #{RailsRoot}/public/images. Finally, I am using wkhtmltopdf 0.9.9, wicked-pdf 0.11.0, and rails 4 on Ubuntu 14.04.
In a nutshell - what am I doing wrong that causes WickedPDF to fail to render the image?
First thing create a pdf template to render and use your wicked_pdf tags in that template..
for example-
app/views/layout/application.pdf.erb-
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
</head>
<body onload='number_pages'>
<div id="content">
<%= yield %>
</div>
</body>
</html>
app/views/pdf/pdf_view.pdf.erb-
<div>
<%= wicked_pdf_image_tag 'logo.jpg' %>
</div>
use this template instead
def save
pdf = WickedPdf.new.pdf_from_string(
render_to_string(
template: 'example/pdf_view.pdf.erb',
layout: 'layouts/application.pdf.erb'))
send_data(pdf,
filename: 'file_name.pdf',
type: 'application/pdf',
disposition: 'attachment')
end
This might help you..
Use the wicked_pdf_image_tag helper in your view and reference the image with asset_url if your image is in public/images or use asset_pack_url if the image is in public/packs/media/images
<%= wicked_pdf_image_tag asset_url('/images/footer_logo.png') %>
or
<%= wicked_pdf_image_tag asset_pack_url('media/images/footer_logo.png') %>
I converted image url that 'http' from 'https'. Than worked.
Heroku-18
Rails 4.2
wicked_pdf (1.1.0)
wkhtmltopdf-binary (0.12.4)
In my case, I am using carrierwave, the solution was taken from this post
<img src="<%= root_url + "/" +file.service_url %>">
This worked on rails 5.
So I've implemented the Markitup bbcode editor in my Rails application and I'm currently attempting to get the preview functionality working. I followed a 4 year-old blog entry install markitup! in Ruby on Rails which got me pretty close to what I need to do. So far, when I press the preview button it renders an iframe that displays a blank template for me.
In my jquery.markitup.js I have this line as one of the options:
previewTemplatePath: '/templates/preview',
Which will make an ajax request to retrieve the page for the route:
resources :templates do
collection do
get :preview
end
end
Currently the preview action simply sets render :layout => false so I don't duplicate html. As for the preview.html.erb page itself I simply have:
<%= bb(params[:data]) %>
And the idea behind this is to send the markup entered in the editor into the params data hash and then pass that through my bb code helper which does the parsing and returns some html.
The Problem
I don't know how to fill that params[:data] with the bb code entered into the markitup editor. Does anybody know how I can send that off?
Extra details:
I thought I would include all the options I'm passing off to markItUp:
options = { id: '',
nameSpace: '',
root: '',
previewInWindow: '', // 'width=800, height=600, resizable=yes, scrollbars=yes'
previewAutoRefresh: true,
previewPosition: 'after',
previewTemplatePath: '/templates/preview',
previewParser: false,
previewParserPath: '',
previewParserVar: 'data',
resizeHandle: true,
beforeInsert: '',
afterInsert: '',
onEnter: {},
onShiftEnter: {},
onCtrlEnter: {},
onTab: {},
markupSet: [ { /* set */ } ]
};
The previewTemplatePath and the previewParserPath options needed to be set when I make the call to markItUp!.
The previewTemplatePath points to the view that displays the rendered preview and the previewParserPath is meant to point to your controller action that handles the parsing and data parameter. Assuming you're following dry conventions both paths should be the same as it was in my case.
For a better look at how to integrate markItUp! with rails check out the source for branch14's markupitup gem.