Using Jekyll I'm trying to use data-src instead of src for all my images.
What's the best way to go for it? Create my own plugin?
I don't think using an include is a great option...
Right now I'm adding the images like this:
![my alt text]({{"http://example.com/myImage.gif"}})
I've seen related issues but the answers always recommend to use external libraries. Isn't there any more straight forward way to go for it?
As suggested by #JoostS you can create a plugin, more specifically a custom liquid tag.
For example using:
<p>{% render_img http://example.com/myImage.gif "my alt text" %}</p>
You can have the render_img plugin in _plugins/images.rb:
module Jekyll
class RenderImgTag < Liquid::Tag
def initialize(tag_name, variables, tokens)
super
#variables = variables.split(" ", 2)
#url = #variables[0]
#alt = #variables[1]
end
def render(context)
"<img data-src='#{#url}' alt='#{#alt}' />"
end
end
end
Liquid::Template.register_tag('render_img', Jekyll::RenderImgTag)
Yes, I think that that creating your own plugins is the (only) right solution here. Includes cause polluted content and javascript is not really an option here.
Related
I use Hugo to deploy static web, using Markdown and the problem I would like to sort out is simple.
I would like to find the simplest and compatible with Markdown language way to make my web links open in different tab.
The method I use now is below:
< rawhtml >}}Rasmus Lerdorf</br>{{< /rawhtml >
[link with title](http://nodeca.github.io/pica/demo/ "target="blank")
First method working but it is HTML second method not working.
Thank You.
You need to create a new file at /layouts/_default/_markup/ called render-link.html.
In that file, you can then customise it to something like:
<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}>{{ .Text | safeHTML }}</a>
Here is what would happen:
[link1](../something/ title="title") => link1
[link2](https://example.com) => link2
It will only add it to URLs with "http" and "https".
The documentation for render-hooks is available here: https://gohugo.io/templates/render-hooks/.
Or you could just put the link in as you have it using regular, old HTML.
IMHO, beating yourself up over the failings of Hugo and whatever theme is in use is counter-productive. Markdown was supposed to be a quick and dirty way for users who couldn't grasp the basic fundamentals of html to create and display content on a wiki.
Think about the current situation. Does using Hugo, a theme, and Markdown really save any effort when they simply can't produce the output you need because the features you need don't exist in that combination natively?
When you need to spend hours/days researching and learning how to manipulate the generator's template to generate the output you need from Markdown and Hugo, tell me, where exactly are those time savings?
This is why people using tools such as Flare, RoboHTML, and Paligo laugh at users who brag about how fast they Hugo site generates html pages.
I have a blog written in Python + Django.
Before I started use of WYSIWYG editor, to create a blog post preview I manually added custom html tag <post_cut/> and used python slice to show only a preview. It allowed to avoid issues with fixed length for preview or breaking html tags.
Now I added Django-CKEditor and it removes all html tags which "it doesn't understand".
I tried to do something with configuration (allowedContentRules, format_tags and etc.) but no success.
The questions is how to manage "post-cut" and how to do this using CKEditor.
P.S. it would be awesome also to have button for that.
Found the answer by myself.
You need to use extraAllowedContent if you want to add some extra tags.
Also found how to add custom button by creating a custom plugin.
But still looking for good solution that will utilize django-ckeditor
CKEDITOR_CONFIGS = {
'default': {
'extraAllowedContent': {
'post_cut': True,
},
# ...
# (other options)
}
}
I'm building a Rails app, but I'm using a plugin in which I have to render my images using only html.
Since I haven't deployed yet, all my images are in RAILS_ROOT/app/assets/images/, so to render an image I have to write the following code:
<img src="/assets/image.jpg">
But when I'm ready to deploy to the web and I perform a precompile, all my images are supposedly going to be moved to my public folder. Will the html still work to link to the image, or will I have to change to link to a different path?
The plugin I'm using is Typeahead:
application.html.erb*
<script type="text/javascript">
//....
$('#typeahead').typeahead(null, {
maxLength: 5,
displayKey: function(thing) {
return "<div class='typeahead'><img src='" + thing.image_url + "'></div>";
},
source: bloodhound.ttAdapter(),
});
</script>
things_controller.rb
def typeahead
#render json: Thing.where(name: params[:query])
q = params[:query]
render json: Thing.where('name LIKE ?', "%#{q}%")
end
*Thing.image_tag is currently set to "/assets/[image.jpg]", except for each thing it's adjusted with the proper file name.
Not only are they going to be in the public folder, but they'll be renamed to include the fingerprint.
You must use the Rails helpers for all assets, see how to here and read the rest of the guide while you're at it :)
I think you should use non-stupid-digest-assets gem as it copies all your assets(mentioned in assets precompile list) in public/assets folder and then you need not to change your code before/after compiling.To install, you just need to add it into your Gemfile.
gem 'non-stupid-digest-assets'
I hope it might help you.
Joe, my suggestion would be to create a directory in your public folder to house your images, instead us using the app/assets directory. The public folder will allow the assets to not be altered by the rails pipeline, and you can link to them reliably using any external services that need the images.
As stated in RailsGuides:
Assets can still be placed in the public hierarchy. Any assets under
public will be served as static files by the application or web server
when config.serve_static_files is set to true. You should use
app/assets for files that must undergo some pre-processing before they
are served.
So you would need to add this line in config/application.rb
config.serve_static_files = true
As described in Rails general configuration.
It looks like you're storing your image_url in your model, and that's not working because assets don't have fixed URLs in Rails. I would override the getter in your model to use the asset_path helper, so it translates the path when that attribute is read (e.g., when the JSON is generated).
Something like:
# thing.rb
[...]
def image_url
ActionController::Base.helpers.asset_path(read_attribute(:image_url))
end
[...]
Short answer, no.
But it isn't that big a deal to remedy. Just move the images you need to reference with html into your Public folder. Then you can simply reference them with this code:
<img src="/image_name.image_type">
and the html will link to the correct path, both before and after precompile. So you don't have to change any code before you deploy.
BTW: I assume image_tag and image_url are the same column and you just made a mistake in one of the two times you mentioned it. If that's the case, then don't forget to change it to simply "/[image.jpg]".
Im calling my feed with <%= blog_feed %> inside the view and have a little snippet in my helper.
require 'rss/1.0'
require 'rss/2.0'
require 'open-uri'
def blog_feed
source = "http://www.domain.com/.rss" # url or local file
content = "" # raw content of rss feed will be loaded here
open(source) do |s| content = s.read end
rss = RSS::Parser.parse(content, false)
html = "<ul>"
rss.items.first(3).each do |i|
html << "<li><a href='#{i.link}'>#{i.title}</a></li>"
end
html << "</ul>"
html
end
It runs mostly the way i want. But the html is inline html. So i see li,ul and a hrefs on the website.
Any idea or suggestion?
best regards
denym
The way you're processing and displaying the RSS in a view isn't the way I'd do it, but the quick answer is that you need to call html_safe for any HTML strings you build in this way.
This may be unsafe, as the incoming RSS data may have code in it that causes cross site security issues. You can handle that by using the sanitize helper. I think the sanitize helper automatically calls html_safe for you.
So, at the end of your blog_feed method, replace the html return value with:
sanitize html
Check out the documentation for sanitize here: http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html#method-i-sanitize
I let users embed videos from Youtube, Google, Vimeo etc. I thought about the best and most secure approach (I don't want them to be able to include any flash and I also want to restrict the Videosites to exclude free porn websites etc.).
So I thought the best and easiest thing would be to let the user just copy&paste the URL of the video into a text-field, store it in a ExternalVideo Model and then just generate the needed HTML to embed the video.
So my ExternalVideo Model has a function called "embed_html" which should return the proper HTML.
Of course I could do something like this:
def embed_html
# just a very short example to make my point
"<embed src='#{#video_source}'>"
end
But I think that's bad practice and very unreadable.
My Question: Is there a tool / Gem / Built-in function I can use to generate custom HTML, something like the View Helpers (link_to, image_tag, etc)?
Thanks for your help!
I would do the following
def embed_element(external_video)
content_tag(:embed, '', :src => external_video.video_source)
end
You should probably check the docs for more information on the content tag method.
Also note that the content_tag() method will insert a closing tag. Something you seem to be forgetting...
You almost answered your question. Use helper method:
def embed_html url
"<embed src='#{url}'>"
end
And use it in view:
<%= embed_html #video_source %>
Why don't you just write a view helper method that accepts a ExternalVideo model instance, asks it for its video URL and then returns the HTML?