[SOLVED] custom display of images

More
9 years 23 hours ago - 8 years 1 month ago #53385 by agata
Hi,
I need to display an unordered list of images, however those images need to have custom classes. I'm loading the values of that field outside of flexicontent and my code looks like this:
Code:
<ul class="hotel-carousel__items list-bare js-hotel-carousel"> <?php FlexicontentFields::getFieldDisplay($item, "field_slideshow", null, "display_large"); echo $item->fields["field_slideshow"]->display_large; ?> </ul>
the output of this is as follows:
Code:
<ul class="hotel-carousel__items list-bare js-hotel-carousel"> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Roofterrace.jpg" alt="25hours Boutique Hotel Frankfurt, Roofterrace" class="fc_field_image" /></li> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bedroom.jpg" alt="25hours Boutique Hotel Frankfurt, Bedroom" class="fc_field_image" /></li> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bedroom2.jpg" alt="25hours Boutique Hotel Frankfurt, Bedroom2" class="fc_field_image" /></li> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bedroom3.jpg" alt="25hours Boutique Hotel Frankfurt, Bedroom3" class="fc_field_image" /></li> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bathroom.jpg" alt="25hours Boutique Hotel Frankfurt, Bathroom" class="fc_field_image" /></li> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Restaurant2.jpg" alt="25hours Boutique Hotel Frankfurt, Restaurant2" class="fc_field_image" /></li> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Hall.jpg" alt="25hours Boutique Hotel Frankfurt, Hall" class="fc_field_image" /></li> </ul>
However as I mentioned I need the images to have a specific class. So what I tried was:
Code:
<ul class="hotel-carousel__items list-bare js-hotel-carousel"> <?php FlexicontentFields::getFieldDisplay($item, "field_slideshow"); foreach ($item->fields['field_slideshow']->thumbs_src['large'] as $img) : echo '<li class="hotel-carousel__item"><img src="'.$img.'" class="hotel-carousel__img"></li>'; endforeach; ?> </ul>
The output of this code is as follows:
Code:
<ul class="hotel-carousel__items list-bare js-hotel-carousel"> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Roofterrace.jpg" class="hotel-carousel__img"></li> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bedroom.jpg" class="hotel-carousel__img"></li> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bedroom2.jpg" class="hotel-carousel__img"></li> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bedroom3.jpg" class="hotel-carousel__img"></li> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Bathroom.jpg" class="hotel-carousel__img"></li> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Restaurant2.jpg" class="hotel-carousel__img"></li> <li class="hotel-carousel__item"><img src="/images/stories/flexicontent/item_91_field_36/l_25hours_Boutique_Hotel_Frankfurt_Hall.jpg" class="hotel-carousel__img"></li> </ul>
Which is almost perfect BUT I lose the alt="" attributes. How should I modify the second code to get the alts?

Thanks,
Agata
Last edit: 8 years 1 month ago by agata.

Please Log in or Create an account to join the conversation.

More
9 years 21 hours ago #53387 by ggppdk
Replied by ggppdk on topic custom display of images
Hello

you can duplicate these files:
carousel.php
carousel.xml
/carousel/ (folder)
/carousel/carousel2.css


as:
carousel2.php
carousel2.xml
/carousel2/ (folder)
/carousel2/carousel2.css



Optionally:

then you can edit carousel2.php
<div class="carousel mod_flexicontent_wrapper

replace with:
<div class="carousel2 mod_flexicontent_wrapper


then edit
carousel2.css

and replace
.carousel
with
.carousel2


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

More
9 years 19 hours ago #53391 by agata
Replied by agata on topic custom display of images
Hi,
I don't think I explained myself correctly. I'm not using any carousel script that came with Flexicontent, all I need is to obtain an unordered list of images with alts and class="hotel-carousel__img". It all boils down to being able to load alt values in the second code I pasted in my previous post.
Thanks,
Agata

Please Log in or Create an account to join the conversation.

More
9 years 17 hours ago #53392 by ggppdk
Replied by ggppdk on topic custom display of images
Hello


you can get an array with the image URLs

see here:
About custom display of image / gallery field


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

More
9 years 17 hours ago #53394 by agata
Replied by agata on topic custom display of images
Yes I know this article and that's what I'm doing but it doesn't mention how to get the alt attributes.
Code:
<ul class="hotel-carousel__items list-bare js-hotel-carousel"> <?php FlexicontentFields::getFieldDisplay($item, "field_slideshow"); foreach ($item->fields['field_slideshow']->thumbs_src['large'] as $img) : echo '<li class="hotel-carousel__item"><img src="'.$img.'" class="hotel-carousel__img"></li>'; endforeach; ?> </ul>

Thanks,
Agata

Please Log in or Create an account to join the conversation.

More
9 years 16 hours ago #53396 by ggppdk
Replied by ggppdk on topic custom display of images
Hello

you can use

$item->fieldvalues[_field_id_]

see this FAQ artcile:
Using the raw value of a field inside a template file or inside a new custom field type


-- Flexicontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star...

Please Log in or Create an account to join the conversation.

Moderators: vistamediajoomlacornerggppdk
Time to create page: 0.306 seconds
Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline