modx wayfinder dynamic pictures - image

I create Wayfinder by a small overview page (scale projects, etc.)
<li[[+wf.id]][[+wf.classes]]>
<div onclick='location.href="[[+wf.link]]"' class="[[+wf.title]] project_overview" title="[[+wf.title]]" [[+wf.attributes]]><img src="images/HausDummy.png" /></div>
[[+wf.wrapper]]
Here is to be displayed from child page in the first picture. In the inferior side multiple images are displayed in a gallery.
Is something like that feasible? By the dynamics behind me, I do something heavy.
Thank you for your advice.

Old Question, but maybe someone else needs a hint for that..
Also the Question is not easy to understand (auf deutsch hätte ich sie besser verstanden ;) ),
to get images for your wayfinder navigation, look at the "Template Parameters" Section in the documentation
In short:
You need a TV for your image, a snippet (see Doc) to process the TV and something like:
<img src="[[processTV? &myId='[[+id]]' &myTV='icon' ]]" />
in your wayfinder template

Related

Is it possible to serve dynamic images for email?

What I'm trying to do: Create an email campaign that will have a header image which will be personalized and display the viewers name based on FirstName data.
This may be beyond my current skill level. But I'm wondering if there isn't a service or some kind of library that will do this. I'm thinking what needs to happen is that an image needs to be served somehow that when pinged with a request like http://example.com/images/emailheader?Ralph, would serve an image with Ralph's name in it.
If this were just for the web, that would be easy. I'm not able to wrap my head around how I might do this for email however, and I'm not finding much in the search.
If you have the ability to http://example.com/images/emailheader?Ralph you have the ability to do this with names. You'll just have to do the fancy logic on the web site.
Lets use http://placekitten.com as an example because I'd rather look at kittens.
If http://placekitten.com can serve a 640x480 image of a kitten, you can serve an image for a guy named Ralph. Lets say the first name of your email target is 600/480. You would code in: http://placekitten.com/. This will give you an image named http://placekitten.com/600/480.
It would look something like this:
<p>Dear <firstname>,</p>
<p>We saw this and thought of you.</p>
<img src="http://placekitten.com/<firstname>" width="600" height="480" alt="<firstname>" style="display:block;"/>
<p>Your friends at StackOverflow.</p>
Your email ISP will take , convert it to good old 600/480, and you'd get this:
<p>Dear 600/480,</p>
<p>We saw this and thought of you.</p>
<img src="http://placekitten.com/600/480" width="600" height="480" alt="600/480" style="display:block;"/>
<p>Your friends at StackOverflow.</p>
Assuming you did your configuration on your web site for everyone named Ralph, gwally or 600/480, those images will show up in their email. There's far more to it than this, but it gets you started.
Good luck.

Custom sections Umbraco

Not even sure I labeled this correctly, I am in the process of converting a site to Umbraco, and there are sections of the site that needs to be edited using the CMS tools in the back end, basically it is a grid with pictures and description text
Here is a sample of the HTML
<div class="hi-icon-effect-1 hi-icon-effect-1a">
<a class="hi-icon">
<img class="img-responsive " id="ImgSales" src="../../Images/sales_icon_circle_grey.png" alt="">
</a>
<p style="padding-left:5px;" id="lblSales" class="">Sales</p>
</div>
What I would like to be able to do is go to the content section of the admin and edit the list of items and configure the image and text for each item.
http://www2.strikemedia.co.za/
If you view the above link and scroll down there will be a grid of items (services) and it is this list that I want to be able to generate.
I am comfortable with all the technologies used in Umbraco, I just do not know the system well enough to do these kinds of modifications, can someone please assist or point me to the resources that will help me build this.
Thanks
You should take a look at the Archetype package: https://our.umbraco.org/projects/backoffice-extensions/archetype/
As far as I understand your question you are looking for a way to add X amount of similar items to the contents of a page - for this, Archetype is probably perfect :-)
Once you have your list of items added inside Umbraco, look here: https://github.com/kgiszewski/ArchetypeManual/blob/master/03%20-%20Template%20Usage.md
Use case #1 in this example will allow you to iterate through items and output it with whatever "template" you want (aka the HTML sample you provided).

How to remove tweet photos from twitter widget?

to display and style my tweets on my website I use somethiong like this code:
<a
class="twitter-timeline"
href="https://twitter.com/YourNickname"
data-widget-id="xxxxxxxxxxxxxxxxxxx" <!--you will haveyour own number http://stackoverflow.com/questions/16375116/what-is-data-widget-id-in-twitter-api-how-i-can-get-the-data-widget-id-->
data-chrome="noheader nofooter noborders noscrollbar transparent" <!--tweak these for the looks-->
data-tweet-limit="5"
data-link-color="#FFFFFF"
data-border-color="#FFFFFF"
lang="EN" data-theme="light" <!--light or dark-->
height="447"
width="255"
data-screen-name="yourName"
data-show-replies="false"
data-aria-polite="assertive">
Tweets by #YourName
</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
I'm looking for a way to remove images in case they are twitted.
Looking for a solution I've found this:
https://dev.twitter.com/discussions/19073
They suggest to add a line
data-src-2x="false"
to my code.
This solution, sadly, doesn't seem to work for me.
If any of you have solved this problem, a hint would be much appreciated!
Cheers!
The following answer is no longer relevant due to recent changes by twitter!
In the configuration options when creating the widget there is a checkbox labeled 'auto expand photos'. Uncheck this, but be aware it takes

EmberJs model output into an img tag in a handlebar template

I am trying to learn EmberJs, in conjuction with Laravel 4, to create a blog. Things have been going great, stuff hasn't been too difficult yet. But I got into a snag when trying to have a <img/> tag in one of my handlebar templates.
From my understanding to use info from a model in a template you use {{attribute_name}} and like magic, it's there! And so for my tag I was trying something like:
<img src="{{URL::asset('images/posts/')}}#{{id}}.#{{image_extension}}" }}" alt=""/>
Adding the url to images with Laravel and Blade, then on the template, just adding in those last little pieces to make the it all work. But I get this instead:
<img src="http://localhost/blog/images/posts<script id='metamorph-11-start' type='text/x-placeholder'></script>26<script id='metamorph-11-end' type='text/x-placeholder'></script>.<script id='metamorph-12-start' type='text/x-placeholder'></script>jpg<script id='metamorph-12-end' type='text/x-placeholder'></script>" alt="">
Obviously theres script tags in my src tag and this is causing some issues.
Now then, upon much research I discovered {{unbound attribute_name}} and came up with:
<img src="{{URL::asset('images/posts')}}/#{{unbound id}}.#{{unbound image_extension}}" alt=""/>
and while this works on the first blog post I click, it doesn't switch images when I switch posts. So is there a way to make this guy work? I'm running out of ideas! Any information you could shed on this would be great! I really like ember so far and want to get even better! IF there's any more info you need, let em know and I will edit this question! Thanks so much!
EDIT:
Based on the advise from #buruzaemon, I tried
<img src="{{URL::asset('images/posts')}}/#{{bind-attr src=id}}.#{{bind-attr src=image_extension}}" alt="Post image"/>
and it feels like it's on the right path, but not quite there. Any more advice?
Perhaps you should have a look at bind_attr in Ember.js. It will allow you to set the src attribute properly with value that can be set in your controller.

Floating images in Github Readme

How would I go about doing this? Putting the following code into the
Markdown generator
gives me the desired output
<div style="float: left"><img src="http://ompldr.org/vaDU5NQ/scrotter.png"/>
</div>
I'm trying not to, kid. Don't act so surprised, Your Highness. You weren't
on any mercy mission this time. Several transmissions were beamed to this
ship by Rebel spies. I want to know what happened to the plans they sent
you. Kid, I've flown from one side of this galaxy to the other.
I've seen a lot of strange stuff, but I've never seen anything to make me
believe there's one all-powerful Force controlling everything.
However, adding this code to my README.md file makes it an inline image instead
of floating.
How could I work around this? Is it a Github bug?
I know this thread's old, but for anyone interested, you can use <img align="left" src="img.jpg"> and <img align="right" src="img.jpg"> to float images on GitHub.
I believe it is a security issue with GitHub. My understanding is they strip all HTML attributes such as style with the execption of perhaps href.

Resources