(17 posts)
(2 voices)
sunstardave
Member
Hi.
Is it possible to add shortcodes in the fading (or any) slider?
I have tried to add a framed image short code but am only getting [raw][/raw] appearing in the slide.
I have attached a couple of screen caps.
Thanks a lot.
David
Screen_shot_2011-10-25_at_10.22.25.png (55.9 KB, 1 downloads) 7 months old Screen_shot_2011-10-25_at_10.22.08.png (33.7 KB, 0 downloads) 7 months old 
Elliott
Support
Hello sunstardave,
Shortcodes work in the slider it's just the images you use will be picked up by our preloader.
You can take them off by doing this, http://mysitemyway.com/support/topic/adding-image-to-the-textfield-of-the-home-page-slider?replies=3&message=update-support-forums-topic-status-error.
You'll want to use this line though,
imgSelector: 'img:not(.framed)',
sunstardave
Member
Hi Elliott.
Thanks for the reply.
I'm a bit confused. The link you sent me is saying to use the class (in this case .framed) in the img tag e.g. <img src"#" class="framed">
Am I correct in understanding that this means I can't use the images shortcodes and have to instead have to <img> if I want to put images in slides?
I had wanted clients to be able to comfortably edit slides themselves and shortcodes are (of course) a great way of doing this.
Thanks again for the reply.
Cheers,
David
sunstardave
Member
Sorry if I was not clear but I understand that.
My question is the instructions on the link you provided instruct me to add the class 'framed' to the <img> tag. It's the fact the instructions refer to the <img> tag at all, that has me confused/curious, as image shortcodes don't contain <img> tags in their use.
Thanks.
sunstardave
Member
I did wonder if the class added to the custom.js file would work with the type="framed" variable in the shortcode. It's working insofar as the image is framed (and aligned) but I am still, as you will see, getting the [raw] tags.
Additionally, you will see the first slide which is set to Full + Raw html has an issue with the placement of the image inserted into the image field in that it's being 'moved' by the html content. Am I misunderstanding this option i.e. do I have to leave the "Image/Video URL" blank when selecting Full + Raw html and only use html in the description field?
Here is a link to the site: http://sandalwood.sunstarclient.com/
I've attached a screen cap for reference of the backend settings.
Thanks.
Screen_shot_2011-10-25_at_19.47.31.png (78.5 KB, 3 downloads) 7 months old
Elliott
Support
The Full + Raw HTML stage will still need an image set in the url field. You can upload a 1x1 transparent image so it does not display though.
As for the raw tags open up /wp-content/themes/[your_theme]/lib/shortcodes/18-images.php and change line 156 from this,
return '[raw]' . $out . '[/raw]';
To this,
return $out;
sunstardave
Member
I have tried changing the 18-images.php file as per your instructions and it hasn't worked. I see that there are two semi-colons in the new code:
return $out;;
and thought this might be a mistake, so tried both as provided and with only one semi-colon (I'm not familiar with php) just in case but no luck.
Additionally, the other issue I'm having that I mentioned above, is when I use full + html and put an image (Full: 972 x 420) in the image URL field, it is not placed correctly when any html is added in the description field.
See attached screen caps and previous message for reference.
sunstardave
Member
It seems the screen caps were too large.
Here they are again.
full_html_issue.jpg (62.8 KB, 0 downloads) 7 months old raw_issue.jpg (111.2 KB, 0 downloads) 7 months old
Elliott
Support
Yes that was a typo there is just one semi colon.
As for the fullsize image that you place in the slide description you can position it with CSS,
<img style = 'position: absolute; top: 0px; left: 0px;' />
As for the other raw tags you are getting it's because of your list shortcode. You'll need to take them out of that one also. The slider already is using [raw] [/raw] tags so any shortcode that you use inside will have their raw tags displayed.
sunstardave
Member
Elliott.
I am not using a full size image in the slide description field. The full size image URL is added in the 'Image/Video URL' field. I said that already and it can be seen in the earlier screen cap. So as I'm adding it into the 'Image/Video URL' field, what can be causing the alignment issue?
And regarding the [raw] tag issue. I am getting REALLY confused about this.
1. Can I use html in the slide description field, yes or no?
2. Can I use the theme shortcodes in the slide description field, yes or no?
3. And if I can use either html and/or shortcodes in the slide description field, does the slide have to be Full + html or can it be any 'Stage effect' setting?
4. And if I can use html and/or shortcodes in the slide description field, why is it not working i.e. why am I getting the [raw][/raw] tags?
Please can we try and resolve this. I'm trying very hard to be clear with describing the issues and questions.
Thanks.
Elliott
Support
I think we are just getting confused here. Go ahead and take a screenshot of what your trying to do (make sure to highlight your intentions) so we can get a better idea and point you in the right direction.
1. yes
2. yes but you'll need to take the raw tags out of the shortcode file
3. any
4. because the slide description already has raw tags in place, you cannot nest raw tags
sunstardave
Member
Righty-ho.
Here is the code from the slideshow description fields:
SLIDESHOW1 (Full + Raw html)
<div style="padding:20px;">
<div style="margin-left:600px;">
<h2>Here is a great slogan</h2>
<p>Here is some additional text. Here is some additional text.</p>
[button link="http://www.google.com" size="small" target = "blank"]Lorem Ipsum[/button]
</div>
</div>
SLIDESHOW 2 (Full + Raw html)
[image_frame type="framed" align="right"]http://sandalwood.sunstarclient.com/images/slides/slide1.jpg[/image_frame]
<h2>Here is the great slogan</h2>
<p>Here is some additional text. Here is some additional text.</p>
[fancy_list style="arrow_list"]
[/fancy_list]
[button link="http://www.google.com" size="small" target = "blank"]Lorem Ipsum[/button]
As you can see, I have gotten the button and list shortcodes working fine but it's the misaligned full size image in Slideshow 1 and the [raw] tags in Slideshow 2, that are the ongoing problems.
I hope this is all clear.
Thanks Elliott.
slideshow2.jpg (70.8 KB, 0 downloads) 7 months old slideshow1.jpg (41.8 KB, 1 downloads) 7 months old slideshow_editor.jpg (79.8 KB, 1 downloads) 7 months old
Elliott
Support
If your wanting your image to use the full area of the slide then your wanting the "Full" stage not the "Full + Raw HTML".
As for the raw tags it's most likely your [image_frame], are you sure you took the raw tags out of the file as I explained here? http://mysitemyway.com/support/topic/shortcodes-in-slider#post-36030
sunstardave
Member
Sigh.
If I choose Full, then I lose the html content in the description. What is the purpose of Full + Raw html?
And yes, I did follow the instructions as explained in the link provided. I pasted the edited code in an earlier message. Here it is again:
This are lines 316 - 336 from custom.js
/*
* Mysitemyway image preloader
*/
(function($)
{
$.fn.preloader = function(options) {
var defaults = {
selector: '',
imgSelector: 'img:not(.framed)',
imgAppend: 'a',
fade: true,
delay: 500,
fadein: 400,
imageResize: imageResize,
resizeDisabled: resizeDisabled,
nonce: imageNonce,
beforeShowAll: function(){},
onDone: function(){},
oneachload: function(image){}
},
I'm losing the will to live here. :(
You must log in to post.
resolved
